/* ==========================================================================
   Road to Warrior: Muay Thai Retreat, Koh Phangan
   Schlanke Fassung: Hero, Deine Woche, FAQ, Footer, Anmelde-Dialog.
   Farben und Schriften unveraendert aus der Vorfassung.
   ========================================================================== */

/* ---------------------------------------------------------------- Fonts  */
@font-face{
  font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/anton-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------- Tokens  */
:root{
  --black:#0A0A0A;
  --satin:#14110E;
  --pattern:#2A231B;
  --gold:#C8943F;
  --gold-light:#E3B866;
  --copper:#D9782D;
  --text:#F3EEE6;
  --text-muted:#A79E92;

  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --head-h:62px;
  --gutter:1.25rem;
  --max:1180px;

  /* Gravurfeld: Palme, Mond-Arc, Tick-Spalten, Ton in Ton, sehr leise. */
  --engrave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' opacity='.6' stroke='%232A231B' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M44 158c0-24 1-41 5-56'/%3E%3Cpath d='M49 102c-8-9-20-12-30-8 10 0 18 4 23 12'/%3E%3Cpath d='M49 102c-4-13 1-25 11-31-5 8-7 19-5 28'/%3E%3Cpath d='M49 102c10-8 23-8 32 1-9-4-20-3-27 2'/%3E%3Cpath d='M49 102c-12 4-20 13-21 26 4-11 12-18 22-20'/%3E%3Cpath d='M138 40v96'/%3E%3Cpath d='M130 54h16M130 70h16M130 86h16M130 102h16M130 118h16'/%3E%3Cpath d='M96 18l9 9-9 9-9-9z'/%3E%3Cpath d='M14 60h26M14 70h17M14 80h26'/%3E%3Cpath d='M168 162a20 20 0 0 1-26-26'/%3E%3C/g%3E%3C/svg%3E");

  --sheen:linear-gradient(104deg,transparent 0%,rgba(227,184,102,.028) 38%,
    rgba(227,184,102,.055) 50%,rgba(227,184,102,.02) 62%,transparent 100%);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
@media (min-width:900px){:root{--head-h:76px;--gutter:2rem}}

/* ----------------------------------------------------------------- Base  */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 1rem);
}
/* Korn liegt im Body-Hintergrund, nicht als fixiertes Overlay mit
   mix-blend-mode: das zwingt den Browser sonst, die ganze Seite bei
   jedem Scroll neu zu komponieren. */
body{
  margin:0;
  background-color:var(--black);
  background-image:var(--grain);
  color:var(--text);
  font:400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}
img{height:auto}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:var(--gold);text-decoration:none}
code{font-family:var(--mono);font-size:.92em}
button{font:inherit}

::selection{background:rgba(200,148,63,.32);color:var(--text)}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
input,textarea{caret-color:var(--gold-light)}
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--pattern) var(--black);scrollbar-width:thin}
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--black);padding:.8rem 1.2rem;
  font:700 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:.75rem;top:.75rem}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ------------------------------------------------------------ Utilities  */
.wrap{width:min(var(--max),100% - (var(--gutter) * 2));margin-inline:auto}
.sec{padding:clamp(4.25rem,11vw,7.5rem) 0;position:relative}

.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* Gold-Folie. Das Padding ist Pflicht, nicht Kosmetik: bei line-height < 1
   ragen Umlautpunkte ueber die Box hinaus und werden von background-clip:text
   sonst weggeschnitten ("ICH KAMPFE" statt "ICH KÄMPFE"). */
.gold{
  background:linear-gradient(174deg,#E3B866 0%,#C8943F 46%,#A9792F 66%,#E3B866 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55));
  padding-block:.18em .06em;
  margin-block:-.18em -.06em;
}

.h2{
  margin:0 0 1.1rem;
  font:400 clamp(2.05rem,8.4vw,4.1rem)/.98 var(--display);
  text-transform:uppercase;letter-spacing:.015em;
}
.lede{max-width:56ch;font-size:clamp(1.06rem,3.4vw,1.25rem);line-height:1.62;color:var(--text-muted)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:.95em 1.7em;border:0;cursor:pointer;
  background:var(--gold);color:#0A0A0A;
  font:700 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  text-align:center;
  transition:background .2s,box-shadow .2s,transform .15s;
}
.btn:hover{background:var(--gold-light);box-shadow:0 0 0 1px var(--black),0 0 0 2px rgba(217,120,45,.85)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn--sm{padding:.7em 1.15em;font-size:.72rem;letter-spacing:.13em}
.btn--lg{padding:1.1em 2.1em;font-size:.88rem}
.btn--block{width:100%}

/* Kupfer-Paspel: der einzige Sektionstrenner der Seite. */
.piping{position:relative;height:6px}
.piping::before,.piping::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 1.05s cubic-bezier(.19,.78,.22,1);
}
.piping::before{top:1px;background:linear-gradient(90deg,transparent,var(--copper) 18%,var(--copper) 82%,transparent)}
.piping::after{top:4px;background:linear-gradient(90deg,transparent,rgba(200,148,63,.38) 18%,rgba(200,148,63,.38) 82%,transparent);transition-delay:.1s}
.piping.is-in::before,.piping.is-in::after{transform:scaleX(1)}

/* Scroll-Reveal, nur wenn JS laeuft */
.js .js-in{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.19,.78,.22,1)}
.js .js-in.is-in{opacity:1;transform:none}

/* --------------------------------------------------------------- Header  */
/* Die Startseite hat keine Kopfzeile mehr. .head traegt nur noch den
   Zurueck-Balken auf impressum.html und datenschutz.html. */
.head{
  position:fixed;inset:0 0 auto;z-index:50;
  border-bottom:1px solid transparent;
}
.head__in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:min(var(--max),100% - (var(--gutter) * 2));margin-inline:auto;
  height:var(--head-h);
}
.head__logo img{height:clamp(21px,4.6vw,30px);width:auto}

/* ----------------------------------------------------------------- Hero  */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,8vw,4.5rem) var(--gutter);
}
@media (min-width:768px){.hero{min-height:90vh}}

.hero__media{position:absolute;inset:0;z-index:-2;display:block}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  /* Mobil steht die Person links im Bild: nach links ausrichten, sonst
     schneidet der Hochformat-Zuschnitt ihr den Arm ab. */
  object-position:18% 38%;
  filter:grayscale(.28) contrast(1.06);
}
@media (min-width:768px){.hero__media img{object-position:50% 40%}}
/* Drei Lagen, von oben nach unten gelesen:
   1. Textband: dunkelt genau dort, wo Logo, Headline und Copy stehen
   2. Vignette: zieht den Blick zur Mitte und nimmt die hellen Raender
   3. Grundverlauf: oben und unten satt, in der oberen Bildhaelfte offen,
      damit die Gruppe im Foto sichtbar bleibt */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(76% 44% at 50% 56%,rgba(10,10,10,.82),rgba(10,10,10,.42) 62%,transparent 100%),
    radial-gradient(118% 96% at 50% 50%,transparent 42%,rgba(10,10,10,.58) 100%),
    linear-gradient(180deg,rgba(10,10,10,.70) 0%,rgba(10,10,10,.26) 24%,rgba(10,10,10,.50) 58%,rgba(10,10,10,.93) 100%);
}
/* Mobil steht der Text tiefer und das Bild ist hochkant: unten mehr Deckung. */
@media (max-width:767px){
  .hero__scrim{
    background:
      radial-gradient(94% 46% at 50% 57%,rgba(10,10,10,.88),rgba(10,10,10,.52) 64%,transparent 100%),
      radial-gradient(120% 92% at 50% 50%,transparent 40%,rgba(10,10,10,.54) 100%),
      linear-gradient(180deg,rgba(10,10,10,.64) 0%,rgba(10,10,10,.18) 20%,rgba(10,10,10,.56) 50%,rgba(10,10,10,.95) 100%);
  }
}

.hero__in{position:relative;display:grid;justify-items:center;gap:1.3rem;text-align:center;width:100%;max-width:46rem;margin-inline:auto}
@media (min-width:1000px){.hero__in{max-width:54rem}}
/* Das Gold-Logo darf nicht auf warmen Hauttoenen des Fotos liegen:
   eine weiche dunkle Scheibe dahinter trennt es sauber ab. */
.hero__mark{margin:0;width:min(500px,76vw);position:relative}
.hero__mark::before{
  content:"";position:absolute;z-index:-1;
  left:-12%;right:-12%;top:-28%;bottom:-28%;
  background:radial-gradient(56% 58% at 50% 50%,rgba(10,10,10,.50),transparent 74%);
}
.hero__mark img{width:100%;height:auto}

/* Die Copy bleibt schmal fuer gute Lesbarkeit, die Headline darf die
   volle Hero-Breite nutzen, sonst bricht jeder Satz unnoetig um. */
.hero-copy{width:100%;max-width:34rem}
.hero-headline{width:100%}
p.hero-headline{
  margin:0;font:400 clamp(1.5rem,5.4vw,2.9rem)/1.08 var(--display);
  text-transform:uppercase;letter-spacing:.015em;color:var(--text);
  text-shadow:0 2px 16px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.9);
}
/* Jeder Satz ein eigener Block: nur so kann balance pro Satz ausgleichen.
   Ueber ein erzwungenes <br> hinweg wirkt es nicht. */
.hero-headline span{display:block;text-wrap:balance}
p.hero-copy{
  margin:0;font-size:clamp(1.02rem,3.4vw,1.18rem);line-height:1.6;color:var(--text);
  text-wrap:pretty;
  text-shadow:0 1px 12px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.9);
}

.hero__meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5em 1.1em;margin:0;
  font:600 .74rem/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-light);
  text-shadow:0 1px 10px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.9);
}
.hero__meta span{display:inline-flex;align-items:center}
.hero__meta span+span::before{
  content:"";width:5px;height:5px;margin-right:1.1em;
  background:var(--copper);transform:rotate(45deg);
}
@media (max-width:599px){
  .hero__meta{flex-direction:column;gap:.34em}
  .hero__meta span+span::before{display:none}
}

/* ----------------------------------------------------------------- Week  */
.week{background:var(--satin);background-image:var(--engrave),var(--grain),var(--sheen)}
.grid{display:grid;gap:1.05rem;margin-top:clamp(2rem,5vw,3rem)}
@media (min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--black);border:1px solid rgba(200,148,63,.15);
  transition:border-color .25s,transform .25s;
}
.card:hover{border-color:rgba(200,148,63,.45);transform:translateY(-3px)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0E0C0A}
.card__media>img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.19,.78,.22,1)}
.card:hover .card__media>img{transform:scale(1.045)}
.card__body{position:relative;flex:1;display:flex;flex-direction:column;gap:.5rem;padding:1.35rem 1.25rem 1.55rem}
.card__body::before{content:"";position:absolute;top:0;left:1.25rem;width:30px;height:1px;background:var(--copper)}
.card h3{margin:0;font:400 1.15rem/1.18 var(--display);text-transform:uppercase;letter-spacing:.035em;color:var(--gold)}
.card p{margin:0;font-size:.92rem;line-height:1.6;color:var(--text-muted)}

/* ------------------------------------------------------------------ FAQ  */
.faq__list{margin-top:clamp(2rem,5vw,3rem);border-top:1px solid rgba(200,148,63,.18)}
.faq__list details{border-bottom:1px solid rgba(200,148,63,.18)}
.faq__list summary{
  position:relative;cursor:pointer;list-style:none;
  padding:1.2rem 2.8rem 1.2rem 0;
  font:400 clamp(1.02rem,3.6vw,1.26rem)/1.35 var(--display);
  text-transform:uppercase;letter-spacing:.03em;color:var(--text);
  transition:color .2s;
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary:hover{color:var(--gold)}
.faq__list summary::after{
  content:"";position:absolute;right:.5rem;top:50%;width:12px;height:12px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq__list details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 0 1.5rem;max-width:68ch}
.faq__a p{color:var(--text-muted);font-size:.97rem}

/* --------------------------------------------------------------- Footer  */
.foot{
  padding:clamp(2.6rem,7vw,4rem) 0 calc(2.2rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(217,120,45,.3);
}
.foot__in{display:grid;justify-items:center;gap:1.4rem;text-align:center}
.foot__logo{width:min(190px,50vw)}
.social{display:flex;justify-content:center;gap:.8rem}
.social a{
  display:grid;place-items:center;width:46px;height:46px;
  border:1px solid rgba(200,148,63,.3);color:var(--gold);
  transition:background .2s,color .2s,border-color .2s;
}
.social a:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
.foot__nav{display:flex;justify-content:center;gap:1.6rem}
.foot__nav a{font-size:.82rem;color:var(--text-muted);transition:color .2s}
.foot__nav a:hover{color:var(--gold)}
.foot__c{margin:0;font-size:.78rem;letter-spacing:.1em;color:var(--text-muted);opacity:.75}

/* ------------------------------------------------------- Anmelde-Dialog  */
.modal{
  padding:0;border:0;background:transparent;color:var(--text);
  width:min(640px,100% - 2.5rem);max-height:calc(100dvh - 3rem);
  overflow:visible;
}
.modal::backdrop{background:rgba(5,4,3,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal__in{
  position:relative;overflow-y:auto;max-height:calc(100dvh - 3rem);
  padding:clamp(1.6rem,4vw,2.6rem);
  background:var(--satin);background-image:var(--engrave),var(--grain);
  border:1px solid var(--gold);
  box-shadow:inset 0 0 0 1px var(--black),inset 0 0 0 2px rgba(217,120,45,.4);
}
.modal__x{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  display:grid;place-items:center;width:44px;height:44px;
  background:none;border:1px solid rgba(200,148,63,.3);color:var(--gold);cursor:pointer;
  transition:background .2s,color .2s;
}
.modal__x:hover{background:var(--gold);color:var(--black)}
.modal__t{margin:0 2.6rem .4rem 0;font:400 clamp(1.6rem,5.6vw,2.4rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.015em}
.modal__sub{margin:0 0 1.6rem;color:var(--text-muted);font-size:.98rem}

/* Vollbild-Sheet auf Mobile */
@media (max-width:599px){
  .modal{width:100%;max-width:none;max-height:100dvh;margin:0;top:0;left:0;
    height:100dvh;transform:none}
  .modal__in{min-height:100dvh;max-height:100dvh;border:0;box-shadow:none;padding-top:3.4rem}
}

/* Ohne JavaScript laesst sich kein <dialog> oeffnen: dann steht das
   Formular als normaler Abschnitt am Seitenende. */
html:not(.js) .modal{display:block;position:static;margin:0 auto clamp(3rem,8vw,5rem);max-height:none}
html:not(.js) .modal__in{max-height:none;overflow:visible}
html:not(.js) .modal__x{display:none}

/* ------------------------------------------------------------- Formular  */
.form{display:grid;gap:1.1rem}
@media (min-width:560px){
  .form{grid-template-columns:1fr 1fr}
  .field--full,.form>.btn,.form__note{grid-column:1 / -1}
}
.field label,.choice legend{display:block;margin-bottom:.5rem;padding:0;font:600 .7rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.req{color:var(--copper)}
.opt{color:var(--text-muted);opacity:.7;letter-spacing:.1em}
/* Nicht nach Typ auflisten: ein neues Feld (tel, url, number) faellt sonst
   lautlos aus dem Styling heraus. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field textarea,.field select{
  width:100%;padding:.85rem .9rem;border-radius:0;
  background:#100E0B;border:1px solid rgba(200,148,63,.24);color:var(--text);
  font:400 1rem/1.5 var(--sans);
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:6.5rem}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 1px rgba(200,148,63,.4);
}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{border-color:#C0563A}
.err{margin:.45rem 0 0;font-size:.82rem;color:#E4926B}

.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer}
.select::after{
  content:"";position:absolute;right:1.1rem;top:50%;width:9px;height:9px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}

.choice{border:0;margin:0;padding:0}
.radio,.check{
  display:flex;align-items:flex-start;gap:.7em;margin-bottom:.6rem;
  font:400 .95rem/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer;
}
.check{margin-bottom:0}
.radio input,.check input{
  flex:none;width:20px;height:20px;margin:.18rem 0 0;accent-color:var(--gold);cursor:pointer;
}
.check span{font-size:.9rem;color:var(--text-muted)}
.check a{border-bottom:1px solid rgba(200,148,63,.5)}
.hp{position:absolute;left:-9999px}

.form__note{margin:0;font-size:.88rem;line-height:1.5;min-height:1px}
.form__note.is-err{color:#E4926B}

.done{text-align:center;padding:1rem 0 .5rem}
.done__t{margin:0 0 .6rem;font:400 clamp(1.8rem,6vw,2.6rem)/1 var(--display);text-transform:uppercase}
.done__p{margin:0 0 1.6rem;color:var(--text-muted)}

/* ------------------------------------------------------- Reduced motion  */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .js-in{opacity:1;transform:none}
  .piping::before,.piping::after{transform:scaleX(1)}
}

/* ------------------------------------------------- Impressum / Datenschutz */
.legal-head{border-bottom:1px solid rgba(217,120,45,.3);background:rgba(10,10,10,.93)}
.back{
  display:inline-flex;align-items:center;gap:.6em;
  font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
  transition:color .2s;
}
.back:hover{color:var(--gold)}
.back .ico{width:17px;height:17px;transform:rotate(180deg)}

/* Der Header ist fixiert, der Abstand muss ihn mitrechnen. */
.legal{padding:calc(var(--head-h) + clamp(2rem,6vw,3.5rem)) 0 clamp(4rem,10vw,7rem)}
.legal .wrap{max-width:70ch}
.legal h1{margin:0 0 1.6rem;font:400 clamp(2rem,7vw,3.2rem)/1 var(--display);text-transform:uppercase;letter-spacing:.015em}
.legal h2{margin:2.6rem 0 .8rem;font:400 1.3rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--gold)}
.legal p,.legal li{color:var(--text-muted);font-size:1rem;line-height:1.7}
.legal ul{margin:0 0 1.05em;padding-left:1.1rem;list-style:disc}
.legal li{margin-bottom:.35rem}
.legal li::marker{color:var(--copper)}
.legal b{color:var(--text);font-weight:600}
.legal__stand{margin:-.9rem 0 0;font:700 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--copper)}

/* Im Fliesstext reicht Gold allein nicht als Linkkennzeichnung: Farbe darf
   nicht das einzige Merkmal sein (WCAG 1.4.1). Darum unterstrichen. */
.legal p a,.legal li a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:rgba(200,148,63,.55)}
.legal p a:hover,.legal li a:hover{text-decoration-color:currentColor}