/* ============================================================
   Zaubergiraffe Studio – Stil

   26.08.2026, Theresa: „die website passt farblich da aber nicht so dazu …
   die app gefällt mir gut .. vl. die website doch in dem ton oder?"

   Also: dieselbe Welt wie Goldfeder. Heller Salbeigrund, weiße Karten,
   Waldgrün und Gold. Wer von hier in die App geht, merkt keinen Bruch mehr –
   vorher war die Seite schwarz und die App hell, das wirkte wie zwei Anbieter.

   ⚠️ Eine Sache hängt daran: Das Giraffen-Video hat einen DUNKLEN Grund
   eingebrannt. Auf hellem Papier wäre das ein schwarzer Kasten. Deshalb sitzt
   die Giraffe jetzt auf einem dunklen Medaillon – einer bewussten dunklen
   Scheibe mit Goldring. Der Videogrund ist auf genau diese Scheibenfarbe
   gerechnet, dann ist die Kante unsichtbar. Siehe .signet-feld unten.
   ============================================================ */

:root{
  /* Dieselben Werte wie in der App – nicht „so ähnlich", sondern gleich. */
  --grund:#dfe4dc;          /* Seitengrund, helles Salbei */
  --grund-2:#eef1ea;        /* ruhige Flächen */
  --karte:#ffffff;
  --tinte:#26352e;          /* Fließtext */
  --tinte-2:#5c6b62;        /* leiser Text */
  --tinte-3:#94a097;        /* Beiwerk */
  --linie:#d4dcd2;
  --linie-2:#c4cdc1;
  --wald:#2f4a3e;
  --wald-2:#3a5a4b;
  --wald-tief:#263d33;
  --gold:#c9a24b;
  --gold-tief:#b08a35;
  --gold-weich:#eadfc4;
  --gold-linie:#dcc99e;
  /* Die dunkle Scheibe unter der Giraffe.
     ⚠️ Dieser Wert MUSS dem Grund im Video entsprechen - gemessen
     rgb(12-13,11-13,9-15). Das Video fuellt die Scheibe komplett aus; die
     Farbe hier ist das, was man vor dem Laden und beim Standbild sieht.
     Weichen die beiden voneinander ab, blitzt beim Laden eine andere Farbe
     auf. Wer das Video neu rechnet, aendert diesen Wert mit. */
  --medaillon:#0d0d0c;

  --disp:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
/* Wichtig: .marke-bild hat display:block. Ohne diese Zeile wuerde das
   display:block das hidden-Attribut ueberstimmen und das fehlende Logo
   bliebe als leerer Kasten stehen. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
/* Das Funkeln liegt hinter allem und faengt keine Klicks ab. */
#funkeln{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
.kopf,.hero,main,footer{position:relative;z-index:1}
body{
  font-family:var(--sans);
  background:var(--grund);
  color:var(--tinte);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:840px;margin:0 auto;padding:0 24px}

/* ---------- Kopfleiste ---------- */
/* Die Kopfleiste bleibt dunkel - so wie die Seite urspruenglich war
   (Theresa, 26.08.2026: „die zaubergiraffe studio so wie urspruenglich nur
   oben links weiss"). Das hat zwei Vorteile: die Wortmarke ist wieder weiss
   wie im Logo, und das Giraffen-Signet bringt seinen eigenen dunklen Kreis
   mit - auf dunklem Dach faellt der gar nicht auf.
   Darunter beginnt die helle Seite im Ton der App. */
.kopf{
  border-bottom:1px solid rgba(201,162,75,.30);
  background:rgba(13,13,12,.94);
  backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20;
}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:15px;padding-bottom:15px}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:#ece7dc}
/* Kein zusaetzlicher Kreis noetig: das Signet hat seinen dunklen Grund
   eingezeichnet und sitzt hier auf dunklem Dach. */
.marke-bild{height:40px;width:auto;display:block}
/* Wortmarke wie im Logo: zwei Zeilen, versalien, weit gesperrt. */
.marke-wort{display:flex;flex-direction:column;line-height:1.2;
  font-size:.84rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#ece7dc}
.marke-wort span{font-size:.66rem;font-weight:400;letter-spacing:.3em;color:var(--gold)}
.navi{display:flex;gap:22px;align-items:center}
.navi a{color:#a8a294;text-decoration:none;font-size:.9rem;font-weight:500;transition:color .15s}
.navi a:hover,.navi a[aria-current="page"]{color:#e5c98a}

/* ---------- Grundtypografie ---------- */
h1{font-family:var(--disp);font-weight:500;font-size:3rem;line-height:1.1;letter-spacing:-.015em;color:var(--wald)}
h2{font-family:var(--disp);font-weight:500;font-size:1.62rem;line-height:1.25;color:var(--wald);margin-bottom:14px}
h3{font-family:var(--disp);font-weight:500;font-size:1.14rem;color:var(--wald);margin-bottom:7px}
p{margin-bottom:16px}
p:last-child{margin-bottom:0}
a{color:var(--gold-tief);text-decoration:none}
a:hover{color:var(--gold);text-decoration:underline}
strong{color:var(--wald-tief);font-weight:600}
section{padding:46px 0}
section.eng{padding-top:30px}
.leise{color:var(--tinte-2)}
.gross{font-size:1.1rem;color:var(--tinte-2)}

/* ---------- Hero ---------- */
/* Der goldene Schimmer liegt ueber dem Signet, nicht dahinter – so bekommen
   Medaillon und Seite denselben Hauch Gold und es entsteht keine Kante. */
.hero{text-align:center;padding:64px 0 22px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(700px 400px at 50% -10%,rgba(201,162,75,.16) 0%,rgba(201,162,75,0) 66%);
}
.hero .wrap{position:relative;z-index:1}

/* ---- Das Signet im Hero: die GOLDFEDER ----
   Diese Seite ist die Goldfeder-Seite - also steht hier auch die Goldfeder,
   nicht die Giraffe (Theresa, 26.08.2026). Die Giraffe bleibt als Marke oben
   links; ihr Video ist auf "Ueber mich" umgezogen, wo es hingehoert.
   Das Logo hat einen hellen Papiergrund (gemessen rgb(226,227,227)) - deshalb
   eine helle Scheibe mit Goldring statt einer dunklen. */
.signet-feld{
  position:relative;width:196px;height:196px;margin:0 auto 22px;border-radius:50%;
  background:#e6e6e4;
  border:1px solid var(--gold-linie);
  box-shadow:0 2px 6px rgba(38,61,51,.12), 0 16px 36px rgba(38,61,51,.16),
             inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;
}
.signet-feld .signet{
  position:absolute;inset:0;margin:0;height:100%;width:100%;object-fit:cover;
  display:block;
}
@media (max-width:600px){
  .signet-feld{width:150px;height:150px}
}

/* ---- Das Giraffen-Video (jetzt auf "Ueber mich") ----
   Sein Grund ist eingebrannt dunkel, deshalb sitzt es auf einer dunklen
   Scheibe. `--medaillon` MUSS dem Videogrund entsprechen. */
.giraffe-feld{
  position:relative;width:168px;height:168px;border-radius:50%;
  background:var(--medaillon);border:1px solid var(--gold-linie);
  box-shadow:0 2px 6px rgba(38,61,51,.14), 0 14px 32px rgba(38,61,51,.18);
  overflow:hidden;margin:0 0 26px;
}
.giraffe-feld video,.giraffe-feld img{width:100%;height:100%;object-fit:contain;display:block}
.giraffe-feld img{position:absolute;inset:0;opacity:0;pointer-events:none}
.giraffe-feld video[hidden] + img{opacity:1}
@media (prefers-reduced-motion:reduce){
  .giraffe-feld video{display:none}
  .giraffe-feld img{opacity:1}
}

.hero p.unter{margin:14px auto 0;max-width:34ch;font-size:1.16rem;color:var(--tinte-2)}
.regel{width:54px;height:1px;background:var(--gold);opacity:.75;border:0;margin:30px auto 0}

/* ---------- Der Einstieg unter dem Hero ---------- */
.einstieg{text-align:center;max-width:56ch;margin:0 auto}
.einstieg .gross{font-size:1.26rem;line-height:1.62;color:var(--tinte);margin-bottom:14px}
.einstieg .leise{font-size:1rem;color:var(--tinte-2)}

/* Ueber jeder Abschnitts-Ueberschrift ein kurzer goldener Strich. */
.abschnitt-titel{text-align:center;margin-bottom:4px}
.abschnitt-titel::before{content:"";display:block;width:34px;height:2px;
  background:var(--gold);opacity:.85;margin:0 auto 16px;border-radius:2px}

/* ---------- Kacheln ----------
   Genau wie in der App: weisse Karte, klare Haarlinie, enger Schatten.
   ⚠️ Kein weicher Riesenschatten – der laesst benachbarte Karten ineinander
   verschwimmen (genau das war im Cockpit das Problem). */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:28px}
.kachel{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,#ffffff 0%,#f6f8f4 100%);
  color:var(--tinte);border:1px solid var(--linie-2);border-radius:17px;
  padding:26px 24px;
  box-shadow:0 1px 2px rgba(38,61,51,.07), 0 6px 14px rgba(38,61,51,.09);
  transition:box-shadow .22s,border-color .22s,transform .22s cubic-bezier(.2,.7,.3,1);
}
.kachel:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 2px 4px rgba(38,61,51,.10), 0 14px 30px rgba(38,61,51,.16)}
.kachel:active{transform:translateY(-1px) scale(.995);transition-duration:.08s}
/* Goldstreifen an der linken Kante, faehrt beim Darueberfahren auf. */
.kachel::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--gold),var(--gold-tief));
  transform:scaleY(0);opacity:0;transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .2s}
.kachel:hover::before{transform:scaleY(1);opacity:1}
.kachel h3{color:var(--wald)}
.kachel .strich{display:block;width:26px;height:2px;background:var(--gold);margin-bottom:15px}
.kachel p{font-size:.95rem;color:var(--tinte-2);margin:0}

/* ---------- Kasten ---------- */
.kasten{
  background:var(--karte);color:var(--tinte);border:1px solid var(--linie-2);
  border-left:3px solid var(--gold);border-radius:17px;padding:28px 30px;
  box-shadow:0 1px 2px rgba(38,61,51,.07), 0 6px 14px rgba(38,61,51,.09);
}
.kasten h2{color:var(--wald)}
.kasten strong{color:var(--wald-tief)}
.kasten a{color:var(--gold-tief)}
.kasten ul{margin:0;padding-left:20px;list-style:none}
/* Statt grauer Punkte ein kleiner goldener Strich – ruhiger und passender. */
.kasten li{margin-bottom:13px;color:var(--tinte-2);position:relative}
.kasten li::before{content:"";position:absolute;left:-20px;top:.72em;
  width:9px;height:2px;background:var(--gold);border-radius:2px}
.kasten li:last-child{margin-bottom:0}

/* ---------- Auszeichnungen ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{
  border:1px solid var(--gold-linie);border-radius:999px;padding:8px 16px;
  font-size:.86rem;color:var(--gold-tief);background:var(--gold-weich);font-weight:500;
}

/* ---------- Portraet ---------- */
.portraet{
  width:100%;max-width:270px;border-radius:16px;display:block;
  border:1px solid var(--linie-2);margin-bottom:26px;
  box-shadow:0 1px 2px rgba(38,61,51,.07), 0 8px 20px rgba(38,61,51,.10);
}

/* ---------- Knopf ---------- */
.tor{text-align:center;padding:26px 0 70px}
.knopf{
  position:relative;overflow:hidden;
  display:inline-block;background:linear-gradient(160deg,var(--wald-2),var(--wald-tief));
  color:#f0e3c2;font-weight:600;font-size:1.03rem;padding:16px 44px;border-radius:13px;
  text-decoration:none;border:1px solid var(--wald-tief);
  box-shadow:0 2px 5px rgba(38,61,51,.16), 0 10px 24px rgba(38,61,51,.22);
  transition:filter .15s,transform .15s,box-shadow .15s;
}
.knopf:hover{filter:brightness(1.1);transform:translateY(-2px);text-decoration:none;color:#fff3d6;
  box-shadow:0 3px 7px rgba(38,61,51,.18), 0 16px 34px rgba(38,61,51,.26)}
.knopf:active{transform:translateY(0);transition-duration:.08s}
.tor .klein{font-size:.86rem;color:var(--tinte-2);margin-top:15px}

/* ---------- Rechtsseiten ---------- */
.recht{max-width:760px;margin:0 auto;padding:44px 24px 70px}
.recht h1{font-size:2.1rem;margin-bottom:8px}
.recht h2{font-size:1.1rem;margin:34px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--linie)}
.recht p,.recht li{font-size:.95rem}
.recht ul{padding-left:22px;margin-bottom:16px}
.recht li{margin-bottom:7px;color:var(--tinte-2)}
.recht .stand{color:var(--tinte-3);font-size:.86rem;margin-bottom:28px}
.recht address{font-style:normal;background:var(--karte);border:1px solid var(--linie-2);
  border-left:3px solid var(--gold);border-radius:13px;padding:18px 20px;margin:14px 0;color:var(--tinte)}

/* ---------- Fuss ---------- */
footer{border-top:1px solid var(--linie);padding:30px 0 48px;text-align:center;
  font-size:.85rem;color:var(--tinte-3)}
footer a{color:var(--tinte-2)}
footer a:hover{color:var(--gold-tief)}
footer .zeile{margin-bottom:8px}

@media(max-width:600px){
  h1{font-size:2.15rem}
  .hero{padding:52px 0 20px}
  section{padding:38px 0}
  .navi{gap:16px}
  .navi a{font-size:.84rem}
  .kacheln{gap:16px}
}

/* ============================================================
   Goldschimmer (Theresa, 26.08.2026)

   Der Schriftzug bekommt einen Lichtstreifen, der langsam durchwandert:
   ein Farbverlauf wird auf die BUCHSTABEN beschnitten und bewegt.

   ⚠️ `color` bleibt gesetzt - kann ein Browser das Beschneiden nicht,
   faellt er darauf zurueck, sonst waere die Ueberschrift unsichtbar.
   Auf hellem Grund braucht der Streifen dunkleres Gold, sonst „verschwindet"
   die Ueberschrift im Weiss.
   Bei "weniger Bewegung" steht alles still.
   ============================================================ */
.gold-schimmer{
  color:var(--wald);
  background-image:linear-gradient(100deg,
    var(--wald) 0%, var(--wald) 34%,
    var(--gold-tief) 46%, var(--gold) 50%, var(--gold-tief) 54%,
    var(--wald) 66%, var(--wald) 100%);
  background-size:280% 100%;
  background-position:120% 0;
  -webkit-background-clip:text; background-clip:text;
  animation:goldWandern 5.5s linear infinite;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .gold-schimmer{-webkit-text-fill-color:transparent}
}
@keyframes goldWandern{
  0%{background-position:120% 0}
  100%{background-position:-20% 0}
}

/* Lichtstreifen, der beim Darueberfahren ueber eine Kachel wandert.
   Theresa wollte ihn deutlicher: breiter, mit goldenem Kern. */
.kachel::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(102deg,
    rgba(255,255,255,0)   28%,
    rgba(255,246,222,.35) 42%,
    rgba(255,255,255,.95) 50%,
    rgba(233,199,126,.55) 58%,
    rgba(255,255,255,0)   72%);
  transform:translateX(-140%);opacity:0;
}
.kachel:hover::after{opacity:1;animation:schimmerDurch 1.05s cubic-bezier(.32,.55,.28,1)}
/* Derselbe Streifen auf dem Knopf – dort in Gold, weil der Knopf dunkel ist. */
.knopf::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(102deg,
    rgba(255,244,216,0) 30%, rgba(255,244,216,.42) 50%, rgba(255,244,216,0) 70%);
  transform:translateX(-140%);opacity:0;
}
.knopf:hover::after{opacity:1;animation:schimmerDurch 1.05s cubic-bezier(.32,.55,.28,1)}
@keyframes schimmerDurch{
  from{transform:translateX(-140%)}
  to{transform:translateX(140%)}
}

@media (prefers-reduced-motion:reduce){
  .gold-schimmer{animation:none;background-position:50% 0}
  .kachel:hover::after,.knopf:hover::after{animation:none;opacity:0}
  .kachel:hover,.knopf:hover{transform:none}
}