/* ================================================================
   Das Ticket - gemeinsames Stylesheet fuer alle Seiten.
   index.html, thankyou.html, impressum.html, datenschutz.html.
   Liegt bewusst im Wurzelverzeichnis, damit url("assets/...") stimmt.
   Wer eine Farbe aendert, aendert sie hier - und nirgends sonst.
   ================================================================ */
/* ----------------------------------------------------------------
   Archivo, vom eigenen Server statt von Googles Servern.
   Grund: sonst geht die IP jedes Besuchers an Google, bevor er
   zustimmen konnte. Eine Datei traegt alle Gewichte (Variable Font);
   latin-ext laedt der Browser nur nach, wenn ein Zeichen daraus
   wirklich vorkommt.
   ---------------------------------------------------------------- */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62.5% 125%;
  font-display:swap;
  src:url("assets/schrift/archivo-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:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62.5% 125%;
  font-display:swap;
  src:url("assets/schrift/archivo-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;
}

:root{
  --beige:#EFE8D8;
  --beige-tief:#E7DFCB;
  --gruen:#015426;
  --gruen-tief:#02371A;
  --nacht:#0A180E;
  --gold:#A48001;
  --gold-hell:#C29A16;
  --fg:#182A1E;
  --fg2:#55604F;
  --linie:rgba(1,84,38,.20);
  --muster:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M54.4%2C52.1Q45.9%2C66.2%2033.5%2C58.5Q21.0%2C50.8%2018.4%2C33.1Q15.9%2C15.5%2030.0%2C11.0Q44.1%2C6.4%2053.5%2C22.2Q62.9%2C38.1%2054.4%2C52.1Z%22%2F%3E%3Cpath%20d%3D%22M71.2%2C33.0Q63.9%2C19.8%2068.7%2C8.4Q73.5%2C-3.0%2083.9%2C-4.3Q94.2%2C-5.5%20103.1%2C1.8Q111.9%2C9.0%20110.5%2C21.0Q109.0%2C33.0%20104.7%2C38.1Q100.4%2C43.1%2089.4%2C44.6Q78.4%2C46.2%2071.2%2C33.0Z%22%2F%3E%3Cpath%20d%3D%22M152.9%2C47.2Q139.8%2C45.4%20137.5%2C39.7Q135.3%2C33.9%20138.1%2C24.8Q140.9%2C15.7%20155.4%2C13.4Q169.9%2C11.0%20172.7%2C21.4Q175.4%2C31.7%20170.7%2C40.3Q165.9%2C48.9%20152.9%2C47.2Z%22%2F%3E%3Cpath%20d%3D%22M194.8%2C45.8Q178.7%2C36.7%20180.5%2C26.2Q182.4%2C15.6%20198.1%2C8.2Q213.7%2C0.9%20220.6%2C11.3Q227.5%2C21.7%20223.7%2C31.8Q219.9%2C41.9%20215.5%2C48.4Q211.0%2C54.9%20194.8%2C45.8Z%22%2F%3E%3Cpath%20d%3D%22M81.0%2C95.6Q72.5%2C109.7%2055.9%2C102.9Q39.4%2C96.2%2039.8%2C80.7Q40.2%2C65.2%2049.1%2C62.8Q58.0%2C60.4%2073.8%2C70.9Q89.6%2C81.5%2081.0%2C95.6Z%22%2F%3E%3Cpath%20d%3D%22M116.9%2C107.9Q102.8%2C106.5%20100.5%2C89.9Q98.1%2C73.4%20104.7%2C63.6Q111.3%2C53.8%20124.3%2C60.5Q137.4%2C67.1%20141.7%2C83.6Q145.9%2C100.0%20138.4%2C104.7Q130.9%2C109.3%20116.9%2C107.9Z%22%2F%3E%3Cpath%20d%3D%22M176.7%2C79.1Q186.3%2C69.8%20192.1%2C72.9Q197.9%2C76.1%20202.0%2C84.9Q206.0%2C93.8%20196.3%2C106.0Q186.5%2C118.2%20180.1%2C112.7Q173.7%2C107.2%20170.5%2C97.8Q167.2%2C88.4%20176.7%2C79.1Z%22%2F%3E%3Cpath%20d%3D%22M231.3%2C105.1Q218.2%2C98.6%20220.6%2C86.5Q223.1%2C74.4%20239.7%2C72.7Q256.3%2C71.0%20259.4%2C83.5Q262.6%2C96.0%20253.5%2C103.8Q244.4%2C111.6%20231.3%2C105.1Z%22%2F%3E%3Cpath%20d%3D%22M53.9%2C149.3Q55.2%2C161.3%2043.6%2C162.5Q32.1%2C163.7%2025.0%2C160.6Q17.8%2C157.6%2016.5%2C146.6Q15.1%2C135.6%2015.0%2C130.1Q14.9%2C124.7%2026.9%2C125.8Q38.9%2C127.0%2045.8%2C132.2Q52.7%2C137.4%2053.9%2C149.3Z%22%2F%3E%3Cpath%20d%3D%22M70.2%2C163.1Q65.9%2C151.7%2067.7%2C139.9Q69.6%2C128.1%2081.4%2C125.7Q93.3%2C123.3%20100.3%2C129.2Q107.2%2C135.1%20108.9%2C143.6Q110.6%2C152.1%20105.6%2C163.4Q100.6%2C174.8%2087.6%2C174.6Q74.6%2C174.4%2070.2%2C163.1Z%22%2F%3E%3Cpath%20d%3D%22M135.3%2C156.5Q126.3%2C153.1%20130.2%2C138.0Q134.1%2C123.0%20150.5%2C125.4Q166.9%2C127.8%20166.9%2C139.3Q167.0%2C150.8%20155.7%2C155.4Q144.3%2C160.0%20135.3%2C156.5Z%22%2F%3E%3Cpath%20d%3D%22M200.0%2C173.7Q184.7%2C173.0%20183.5%2C154.9Q182.4%2C136.8%20195.9%2C134.6Q209.4%2C132.4%20219.7%2C137.3Q230.1%2C142.3%20222.7%2C158.3Q215.3%2C174.3%20200.0%2C173.7Z%22%2F%3E%3Cpath%20d%3D%22M48.3%2C192.5Q53.5%2C179.5%2065.9%2C179.5Q78.4%2C179.5%2083.6%2C188.5Q88.7%2C197.4%2090.4%2C208.8Q92.1%2C220.2%2078.5%2C223.7Q64.9%2C227.2%2054.0%2C216.3Q43.2%2C205.5%2048.3%2C192.5Z%22%2F%3E%3Cpath%20d%3D%22M116.4%2C191.2Q126.5%2C188.0%20133.5%2C195.8Q140.4%2C203.6%20137.0%2C217.1Q133.6%2C230.6%20127.7%2C235.5Q121.8%2C240.3%20110.3%2C237.0Q98.8%2C233.6%2096.8%2C221.6Q94.9%2C209.5%20100.6%2C201.9Q106.3%2C194.3%20116.4%2C191.2Z%22%2F%3E%3Cpath%20d%3D%22M157.9%2C214.9Q153.5%2C203.2%20164.0%2C198.2Q174.5%2C193.1%20181.6%2C196.7Q188.7%2C200.2%20190.2%2C211.7Q191.7%2C223.2%20186.1%2C229.3Q180.5%2C235.3%20171.3%2C230.9Q162.2%2C226.6%20157.9%2C214.9Z%22%2F%3E%3Cpath%20d%3D%22M255.8%2C201.5Q265.2%2C207.0%20260.5%2C221.7Q255.9%2C236.4%20252.7%2C239.3Q249.4%2C242.1%20236.9%2C240.1Q224.4%2C238.2%20222.0%2C226.9Q219.5%2C215.6%20227.3%2C204.7Q235.1%2C193.8%20240.7%2C194.9Q246.4%2C196.0%20255.8%2C201.5Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:Arial,"Helvetica Neue",Helvetica,sans-serif;

  --pad:clamp(20px,5vw,44px);
  --sec:clamp(60px,8vw,108px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--beige)}
body{
  margin:0;background:var(--beige);color:var(--fg);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-stretch:125%;font-weight:800;
  letter-spacing:-.012em;text-transform:uppercase;line-height:1}

.wrap{max-width:1120px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mid{max-width:880px;margin-left:auto;margin-right:auto}
.tight{max-width:720px;margin-left:auto;margin-right:auto}

/* ---------- Kopf: Foto-Hero ---------- */
.top{
  position:relative;overflow:hidden;
  background:var(--nacht) url("assets/hero.jpg?v=2") center/cover no-repeat;
  --fg:#fff;--fg2:rgba(255,255,255,.84);
  color:#fff;
}
.top::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,24,14,.58),rgba(10,24,14,.40) 45%,rgba(10,24,14,.86));
}
.top > *{position:relative}

.marke{display:block;text-align:center;padding:clamp(22px,3.4vw,40px) 0 0}
/* Feine dunkle Kontur um Ticket und Schriftzug: der erste Schatten legt sich
   als hauchduenne Linie um jede Kante, der zweite gibt Tiefe. Ohne das
   verschwindet das Gold im hellen Himmel des Balkonfotos. */
.marke img{
  width:clamp(190px,21vw,268px);height:auto;display:inline-block;
  filter:drop-shadow(0 0 1px rgba(10,24,14,.55))
         drop-shadow(0 1px 2px rgba(10,24,14,.22));
}

.hero{text-align:center;padding:clamp(22px,2.8vw,32px) 0 clamp(24px,2.8vw,38px)}
.eyebrow{
  font-family:var(--body);font-size:11px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-hell);
  margin-bottom:16px;
}
/* Auf dem hellen Balkonfoto braucht die goldene Zeile Halt, sonst verschwindet
   sie im Himmel. Gilt nur im Kopf - auf beigem Grund stimmt sie ohne Schatten. */
.top .eyebrow{
  color:#E8C255;
  text-shadow:0 1px 14px rgba(10,24,14,.45);
}
.top .sub{text-shadow:0 1px 14px rgba(10,24,14,.40)}

.h1{
  font-size:clamp(26px,3.6vw,46px);line-height:1.06;
  max-width:24ch;margin:0 auto;color:var(--fg);
  text-transform:none;letter-spacing:-.005em;
}
/* Nur der Kopf: die Headline laeuft bewusst auf drei Zeilen.
   Die dritte Zeile kostet rund 50px Hoehe; die holen die engeren Abstaende
   darueber und darunter wieder rein, damit das Video weiter anschneidet. */
.top .h1{max-width:24ch}
.h1 em,.h2 em{font-style:normal}
.h1 em{color:inherit}
.sec--gruen .h1 em{color:var(--gold-hell)}
.sub{
  margin:14px auto 0;max-width:50ch;color:var(--fg2);
  font-size:clamp(15px,1.5vw,17.5px);line-height:1.62;
}

.btn{
  display:inline-block;margin-top:32px;
  font-family:var(--body);font-weight:700;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;
  background:var(--gruen);color:var(--beige);
  padding:18px 44px;border:1px solid var(--gruen);
  transition:background .16s ease,transform .16s ease;
}
.btn:hover{background:var(--gruen-tief)}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn--gold:hover{background:#8C6D01}
/* Das helle Gold fuer Flaechen - dasselbe Gold oben wie unten.
   var(--gold) #A48001 ist der dunkle Ockerton fuer Schrift, nicht fuer Flaechen. */
.top .btn,.sec--knopf .btn{background:#C9A24A;border-color:#C9A24A;color:var(--nacht)}
.top .btn:hover,.sec--knopf .btn:hover{background:#DDB55C}
.sec--knopf .btn{margin-top:0;padding:20px 52px;font-size:13.5px}

/* ---------- Schritt-Ueberschriften ----------
   Eine Zeile ueber dem Video, dieselbe ueber dem Kalender - so wie in Nikos
   Vorlage. Kein Kachelraster mehr: die Schritte stehen bei ihrem Element. */
.sec--gruen .schritt{color:var(--beige)}
.schritt{
  font-size:clamp(21px,2.5vw,32px);line-height:1.14;
  margin:0 auto clamp(22px,3vw,32px);max-width:32ch;
  text-transform:none;letter-spacing:-.005em;
}

/* ---------- Leiste "vom Guide gekommen" ----------
   Steht auf index.html ueber dem Video und erscheint nur mit ?von=guide in
   der Adresse (Skript am Seitenende). Der goldene Haken ist derselbe wie auf
   der Danke-Seite. */
.vom-guide{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 auto clamp(22px,3vw,32px);max-width:640px;
  padding:14px 22px;border:1px solid var(--gold);background:var(--beige-tief);
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:clamp(10px,1.1vw,11.5px);letter-spacing:.2em;text-transform:uppercase;
  line-height:1.5;color:var(--gold);text-align:left;
}
.vom-guide[hidden]{display:none}
.vom-guide .ok{flex:0 0 auto;width:34px;height:34px}
.vom-guide .ok circle{fill:none;stroke:var(--gold);stroke-width:1.5}
.vom-guide .ok path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Video ---------- */
.video{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--linie);background:var(--beige-tief);
}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Eigene Videos statt Fremd-Einbettung (10.09.): schwarzer Grund, damit beim Laden
   keine beige Flaeche durchblitzt, und object-fit fuer den Fall, dass eine Aufnahme
   doch einmal nicht exakt 16:9 ist. */
.video video{background:#000;object-fit:cover;display:block}
/* ---------- Eigener Player: zwei Knoepfe, sonst nichts ----------
   Apples eingebaute Steuerung bringt neun Bedienelemente mit. Hier sind es
   Abspielen und Ton, dazu eine duenne Linie fuer den Fortschritt. Die Leiste
   liegt ueber dem Bild und blendet sich weg, solange das Video laeuft und die
   Maus nicht darauf ist. */
.spieler{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:linear-gradient(to top,rgba(10,24,14,.78),rgba(10,24,14,0));
  transition:opacity .25s ease;
}
.video.laeuft .spieler{opacity:0}
.video:hover .spieler,.video:focus-within .spieler{opacity:1}
@media(hover:none){.video.laeuft .spieler{opacity:1}}

.spieler__knopf{
  flex:none;width:40px;height:40px;padding:0;cursor:pointer;
  display:grid;place-items:center;
  border:1px solid rgba(201,162,74,.55);border-radius:50%;
  background:rgba(10,24,14,.72);color:var(--gold-hell,#C9A24A);
  transition:background .16s ease,border-color .16s ease;
}
.spieler__knopf:hover{background:rgba(1,84,38,.9);border-color:#C9A24A}
.spieler__knopf:focus-visible{outline:2px solid #C9A24A;outline-offset:3px}
.spieler__knopf svg{width:19px;height:19px;fill:currentColor;display:block}

/* Je Knopf sind zwei Zeichen hinterlegt - sichtbar ist immer nur das richtige. */
.ikon-pause,.ikon-stumm{display:none}
.video.laeuft .ikon-play{display:none}
.video.laeuft .ikon-pause{display:inline}
.video.ist-stumm .ikon-laut{display:none}
.video.ist-stumm .ikon-stumm{display:inline}

.spieler__leiste{
  flex:1;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(239,232,216,.28);
}
.spieler__leiste span{
  display:block;height:100%;width:0;background:var(--gold-hell,#C9A24A);
  transition:width .2s linear;
}
/* "Tippen fuer Ton": liegt mittig auf dem Bild, solange das Video stumm laeuft.
   Sobald der Ton an ist oder das Video steht, verschwindet er. */
.ton-an{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:none;align-items:center;gap:12px;
  padding:14px 22px 14px 18px;cursor:pointer;
  border:1px solid rgba(201,162,74,.75);border-radius:999px;
  background:rgba(10,24,14,.82);color:#EFE8D8;
  font:600 16px/1 var(--text,inherit);letter-spacing:.02em;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  animation:ton-an-puls 1.8s ease-in-out infinite;
}
.ton-an svg{width:24px;height:24px;fill:var(--gold-hell,#C9A24A);display:block}
.ton-an:hover{background:rgba(1,84,38,.92);border-color:#C9A24A}
.ton-an:focus-visible{outline:2px solid #C9A24A;outline-offset:3px}
.video.laeuft.ist-stumm .ton-an{display:flex}
@keyframes ton-an-puls{
  0%,100%{box-shadow:0 8px 30px rgba(0,0,0,.35),0 0 0 0 rgba(201,162,74,.55)}
  60%{box-shadow:0 8px 30px rgba(0,0,0,.35),0 0 0 14px rgba(201,162,74,0)}
}
@media(prefers-reduced-motion:reduce){.ton-an{animation:none}}

@media(max-width:640px){
  .spieler{gap:11px;padding:11px 12px}
  .spieler__knopf{width:36px;height:36px}
  .spieler__knopf svg{width:17px;height:17px}
}

.video__wait{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px 24px;
  background-image:var(--muster);background-color:var(--beige-tief);
  background-size:300px 300px;background-blend-mode:multiply;
}
.video__wait::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,86%);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,var(--beige-tief) 52%,rgba(231,223,203,0) 100%);
}
.video__wait > *{position:relative}
.video__wait b{
  font-family:var(--display);font-stretch:125%;font-weight:800;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.video__wait p{font-size:15px;color:var(--fg2);max-width:38ch}

/* ---------- Abschnitte ---------- */
.sec{padding:var(--sec) 0}
/* Der erste Abschnitt rueckt dichter an den Kopf, damit die Ueberschrift und der
   obere Rand des Videos schon im ersten Blick anschneiden - sonst endet die Seite
   optisch am Foto und niemand scrollt weiter. Gilt nur hier, nicht fuer den Rest. */
main > .sec:first-child{padding-top:clamp(24px,2.6vw,34px)}
/* Eigene, dunklere Flaeche - NICHT --gruen aendern: das ist das gemessene
   Logo-Gruen und steckt in Knoepfen, Linien und Raendern. Bewusst ohne Muster. */
.sec--gruen{
  background:#013F1D;
  --fg:var(--beige);--fg2:rgba(239,232,216,.76);--linie:rgba(239,232,216,.22);
  color:var(--beige);
}
.sec--gruen .eyebrow{color:var(--gold-hell)}
.sec--gruen .h1 em,.sec--gruen .h2 em{color:var(--gold-hell)}
/* Derselbe Ton wie der Abschnitt darueber - sonst stehen hier drei Kanten
   dicht untereinander und der Knopf sitzt in einem hellen Streifen. */
/* Stimmen, Knopf und der Abschnitt danach bilden optisch einen Block. Ohne die
   folgenden Regeln addieren sich drei volle Abschnittsabstaende und der Knopf
   haengt in einem leeren Feld. */
.sec--stimmen{padding-bottom:clamp(38px,4.8vw,62px)}
.sec--knopf{
  padding-top:0;padding-bottom:0;
  background:var(--beige-tief);
}
/* Der Abschnitt direkt nach dem Knopf beginnt knapper als sonst - sonst steht
   der Knopf oben angeklebt und unten in einem leeren Feld. */
.sec--knopf + .sec{padding-top:clamp(56px,7vw,96px)}
/* Derselbe Knopf, aber im hellen Teil der Seite: dort ist der Grund normales
   Beige, die dunklere Flaeche von .sec--knopf wuerde einen Streifen ziehen. */
.sec--knopf--hell{background:transparent}
.sec--tief{background:var(--beige-tief)}
.sec--center{text-align:center}
.sec__intro{margin-bottom:clamp(30px,4vw,46px)}
.h2{font-size:clamp(25px,3.1vw,40px);line-height:1.04;max-width:22ch}
.sec--center .h2{margin-left:auto;margin-right:auto}
.sec__intro .sub{margin-top:18px}

/* ---------- Karten ---------- */
.cards{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));
  background:var(--linie);border:1px solid var(--linie);text-align:left}
.card{background:var(--beige);padding:26px 24px}
.sec--gruen .card{background:rgba(2,55,26,.42)}
.sec--tief .card{background:var(--beige-tief)}
.card__n{display:block;font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:11px;letter-spacing:.16em;color:var(--gold);margin-bottom:14px}
.sec--gruen .card__n{color:var(--gold-hell)}
.h3{font-size:14px;letter-spacing:.1em;line-height:1.3}
.card p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--fg2)}

/* ---------- Ergebnis: die vier Zahlen ---------- */
.zahlen{
  display:grid;gap:1px;grid-template-columns:repeat(4,1fr);
  background:var(--linie);border:1px solid var(--linie);
  margin:0 auto clamp(28px,3.6vw,40px);text-align:center;
}
.zahl{background:rgba(2,55,26,.42);padding:24px 14px}
.zahl b{
  display:block;font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:clamp(26px,3.6vw,42px);line-height:1;color:var(--beige);
}
.zahl span{
  display:block;margin-top:9px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(239,232,216,.76);
}
@media(max-width:640px){.zahlen{grid-template-columns:repeat(2,1fr)}}

.zitat{
  max-width:44ch;margin:0 auto;font-size:clamp(17px,2vw,21px);line-height:1.5;
  color:var(--beige);border-left:2px solid var(--gold-hell);
  padding-left:22px;text-align:left;
}
.zitat + .quelle{margin-top:14px}
.quelle{font-size:13px;color:rgba(239,232,216,.62)}
.kleingedruckt{
  margin-top:clamp(26px,3.4vw,38px);font-size:12px;line-height:1.55;
  color:rgba(239,232,216,.58);max-width:56ch;margin-left:auto;margin-right:auto;
}

/* ---------- Kalender ---------- */
.calcard{border:1px solid var(--linie);background:var(--beige);text-align:left;overflow:hidden}
.sec--gruen .calcard{background:var(--beige);border-color:rgba(239,232,216,.28)}
/* Innerhalb der hellen Karte gelten wieder die dunklen Textfarben - sonst erbt sie
   die Beige-Toene des gruenen Abschnitts und der Kopf wird unlesbar. */
.sec--gruen .calcard{--fg:#182A1E;--fg2:#55604F;--linie:rgba(1,84,38,.20);color:var(--fg)}
.calcard__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:6px 20px;padding:20px clamp(18px,3vw,26px);border-bottom:1px solid var(--linie)}
.calcard__head p{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
/* Hoehe: Calendly meldet sie selbst per postMessage, siehe Skript am Seitenende.
   Die 1080px sind nur der Startwert, damit vor der Meldung nichts springt. */
.cal{min-height:1080px;position:relative}
.cal iframe{display:block;width:100%;height:1080px;border:0}
/* Liegt UEBER dem Kalenderbereich, nicht darunter - sonst waere die Seite waehrend
   des Ladens doppelt so hoch. Verschwindet, sobald Calendlys Rahmen steht. */
.cal__wait{position:absolute;inset:0;z-index:1;background:var(--beige-tief);
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;text-align:center;color:var(--fg2);font-size:15px;line-height:1.6}
.cal__wait b{color:var(--fg);font-weight:700}
.cal__wait a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------- Personen ---------- */
.crew{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  background:var(--linie);border:1px solid var(--linie);text-align:left}
.crew > div{background:var(--beige);padding:28px 26px}
.sec--tief .crew > div{background:var(--beige-tief)}
.crew__rolle{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:10px}
.crew__rolle ~ p{margin-top:15px;color:var(--fg2);font-size:16px;line-height:1.6}

/* ---------- Was du in dem Call bekommst ---------- */
.hol{
  display:grid;gap:clamp(26px,3.4vw,44px);
  grid-template-columns:repeat(2,1fr);text-align:left;
  max-width:860px;margin:0 auto;
}
.hol__bild{
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linie);
  background-image:var(--muster);background-color:var(--beige-tief);
  background-size:260px 260px;background-blend-mode:multiply;
  margin-bottom:18px;
}
.hol__bild span{
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:clamp(30px,4.4vw,46px);line-height:1;
  letter-spacing:.04em;color:var(--gold);opacity:.5;
}
img.hol__bild{display:block;width:100%;height:auto;object-fit:cover;background:none}
.hol__t{font-size:14px;letter-spacing:.1em;line-height:1.3;margin-bottom:10px}
.hol p{font-size:15.5px;line-height:1.6;color:var(--fg2)}
@media(max-width:820px){.hol{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ---------- Fussleiste auf dem Balkon-Bild ---------- */
.fussbild{
  position:relative;
  min-height:clamp(190px,25vw,320px);
  display:flex;align-items:flex-end;
  background:var(--nacht) url("assets/hotel.jpg") center/cover no-repeat;
}
.fussbild::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,24,14,0) 22%,rgba(10,24,14,.62) 62%,rgba(10,24,14,.94));
}
.fussbild__in{
  position:relative;width:100%;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding-top:26px;padding-bottom:26px;
  color:rgba(239,232,216,.92);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
}
.fussbild__in a:hover{color:#fff}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gruen);color:var(--beige)}

.rise{opacity:0;transform:translateY(10px);animation:rise .62s cubic-bezier(.2,.7,.3,1) forwards}
.rise--2{animation-delay:.07s}.rise--3{animation-delay:.14s}.rise--4{animation-delay:.21s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}

/* ---------- Rechtsseiten: Impressum und Datenschutz ----------
   Gemeinsam fuer impressum.html und datenschutz.html. Vorher liefen beide
   auf dem dunklen Stylesheet der verworfenen Fassung. */
.doc{padding:clamp(52px,7vw,92px) var(--pad) clamp(60px,8vw,104px);max-width:760px;margin:0 auto}
.doc h1{font-size:clamp(30px,4.4vw,46px);line-height:1.02;margin-bottom:34px}
.doc h2{
  font-size:13px;letter-spacing:.14em;line-height:1.3;color:var(--gruen);
  margin:44px 0 14px;
}
.doc p,.doc address,.doc li{font-size:16px;line-height:1.68;color:var(--fg2);font-style:normal}
.doc p + p{margin-top:14px}
.doc a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--gold)}
.doc ul{margin:14px 0 0;padding-left:20px}
.doc li + li{margin-top:8px}
.doc strong{color:var(--fg)}
.doc__zurueck{
  display:inline-block;margin-bottom:38px;
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.doc__zurueck:hover{color:var(--gruen)}

/* ---------- Wall of Wins: zwei gegenlaeufige Reihen ----------
   Steht auf index.html vor dem Knopf. Zweck: viele Ergebnisse auf einmal, damit
   die Menge wirkt und nicht die einzelne Karte.

   WIE EINE KARTE ECHT WIRD (je Karte genau zwei Zeilen tauschen):
     <div class="win__bild"><span>01</span></div>
       ->  <img class="win__bild" src="assets/wins/NAME.jpg" alt="">
     <b class="win__zahl">Foto folgt</b>
       ->  <b class="win__zahl">780 EUR</b>
   Alles andere bleibt stehen. Die Reihe rechnet ihre Breite selbst.

   WICHTIG: Jede Karte in der Spur steht ZWEIMAL im HTML (zweiter Satz mit
   aria-hidden="true"). Nur so laeuft die Schleife ohne Sprung. Wer eine Karte
   hinzufuegt, fuegt sie in BEIDEN Saetzen hinzu. */
/* Die Wand schliesst unten knapp ab: wenig Abstand vom letzten Foto
   zum Farbwechsel. */
.sec--wall{padding-bottom:clamp(26px,3.4vw,44px)}

.wall__reihe{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.wall__reihe + .wall__reihe{margin-top:clamp(12px,1.6vw,20px)}
.wall__spur{
  display:flex;width:max-content;
  animation:wall-lauf 46s linear infinite;
}
.wall__reihe--zurueck .wall__spur{animation-direction:reverse}
@keyframes wall-lauf{to{transform:translateX(-50%)}}

/* Anhalten, solange jemand hinschaut oder sich mit der Tastatur durchhangelt.
   Ohne das kann man die Karten nicht lesen. */
.wall__reihe:hover .wall__spur,
.wall__reihe:focus-within .wall__spur{animation-play-state:paused}

.win{
  flex:0 0 auto;width:clamp(104px,13vw,152px);
  margin-right:clamp(10px,1.3vw,16px);
}
/* 9:16 wie die Stories selbst - so entstehen weder oben noch seitlich Balken. */
.win__bild{
  display:block;height:auto;aspect-ratio:9/16;object-fit:cover;
  border-radius:4px;background:var(--beige-tief);
}

/* Wer Bewegung abgestellt hat, sieht dieselben Karten als ruhiges Raster.
   Die globale Regel weiter oben killt die Animation - ohne das Folgende
   stuende die Spur still und der halbe Inhalt waere abgeschnitten. */
@media (prefers-reduced-motion:reduce){
  .wall__reihe{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .wall__spur{flex-wrap:wrap;width:auto;justify-content:center}
  .wall__spur > [aria-hidden="true"]{display:none}
  .win{margin:0 clamp(5px,.7vw,8px) clamp(10px,1.4vw,14px)}
}

/* ---------- Kundenstimmen: Video oder Foto plus die Geschichte ----------
   Aufbau je Block: Medium auf der einen Seite, Text auf der anderen, und ab
   dem zweiten Block wechselt die Seite. Ueberschrift ist immer das Ergebnis
   in Zahlen - wer nur die Ueberschriften liest, hat den Beweis schon. */
.stimme{
  display:grid;gap:clamp(22px,3vw,44px);align-items:center;
  grid-template-columns:1fr 1fr;
  max-width:1000px;margin:0 auto;text-align:left;
  border:1px solid var(--linie);border-radius:10px;
  padding:clamp(20px,2.6vw,32px);
}
.stimme + .stimme{margin-top:clamp(18px,2.4vw,28px)}
/* jeder zweite Block spiegelt sich - erzeugt das Zickzack */
.stimme--gedreht .stimme__medium{order:2}

.stimme__t{
  font-size:clamp(19px,2.4vw,27px);line-height:1.08;color:var(--gruen);
  margin-bottom:14px;
}
.stimme__text{font-size:15.5px;line-height:1.62;color:var(--fg2);font-style:italic}
.stimme__text + .stimme__text{margin-top:12px}
.stimme__wer{
  display:block;margin-top:18px;
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}

/* Video: laedt erst auf Klick, deshalb steht ein Standbild davor. */
.stimme__medium{position:relative;margin:0}
.stimme__medium video,
.stimme__medium img{
  display:block;width:100%;height:auto;border-radius:8px;background:var(--beige-tief);
}
.stimme__medium video{aspect-ratio:16/9;object-fit:cover}
.stimme--hoch .stimme__medium img{aspect-ratio:9/16;object-fit:cover;max-width:300px;margin:0 auto}

/* Der Tonknopf fuer Luis - eine Sprachnachricht, kein Videoplayer. */
.ton{
  display:flex;align-items:center;gap:12px;width:100%;
  margin-top:14px;padding:11px 16px;
  border:1px solid var(--gold);border-radius:999px;
  background:none;color:var(--fg);cursor:pointer;
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.ton:hover{background:rgba(164,128,1,.18)}
.ton__zeichen{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:var(--nacht);
  display:flex;align-items:center;justify-content:center;font-size:12px;
}

@media(max-width:760px){
  .stimme{grid-template-columns:1fr}
  .stimme--gedreht .stimme__medium{order:0}
  .stimme--hoch .stimme__medium img{max-width:220px}
}

/* Portraits im Block "Wer das macht" - quadratisch, damit das hochkant und das
   quer aufgenommene Bild als Paar wirken. */
.crew__bild{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  margin-bottom:20px;background:var(--beige-tief);
}