/* =========================================================
   Wal-Visitenkarten — gemeinsames Stylesheet
   Schriften lokal eingebunden (kein Google-CDN -> DSGVO-sauber)
   ========================================================= */

/* ---- Fonts (selbst gehostet) ---- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/fraunces-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/fraunces-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/fraunces-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/figtree-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/figtree-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/figtree-latin-700-normal.woff2") format("woff2");}

/* ---- Tokens ---- */
:root{
  --paper:#F5F4F0;          /* exakt der Hintergrund der Zeichnungen */
  --paper-2:#EFEDE6;
  --ink:#211E1A;
  --muted:#6E685E;
  --hairline:#E2DDD2;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --maxw:1080px;
}
.site--studienwal{ --accent:#C23A2B; --accent-deep:#9E1B1B; --accent-soft:#F0DCD7; }
.site--berufswal { --accent:#1E8BB0; --accent-deep:#15677F; --accent-soft:#D5E8EF; }

/* ---- Reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  min-height:100vh;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* ---- Wrapper ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}

/* ---- Topbar ---- */
.topbar{padding-top:26px;padding-bottom:8px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{
  font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:.5ch;text-decoration:none;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;margin-bottom:2px}
.crosslink{
  font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;
  padding:8px 14px;border:1px solid var(--hairline);border-radius:999px;
  transition:border-color .2s ease,color .2s ease,background .2s ease;white-space:nowrap;
}
.crosslink:hover,.crosslink:focus-visible{color:var(--accent);border-color:var(--accent);background:var(--paper)}

/* ---- Hero ---- */
main{flex:1 0 auto;display:flex;align-items:center}
.hero{
  width:100%;display:flex;align-items:center;gap:clamp(24px,6vw,72px);
  padding-block:clamp(28px,6vw,64px);
}
.site--berufswal .hero{flex-direction:row-reverse}

.whale{flex:1 1 46%;position:relative;display:flex;justify-content:center}
/* Eingang: Wal gleitet in Schwimmrichtung herein (große Strecke = Parallax-Ferne) */
.site--studienwal .whale{animation:enter-from-left 1.5s cubic-bezier(.22,.61,.36,1) both}
.site--berufswal  .whale{animation:enter-from-right 1.5s cubic-bezier(.22,.61,.36,1) both}
/* innere Ebene: sanfte Zeiger-Parallaxe (per JS gesteuert) */
.whale-inner{display:block;transition:transform .35s ease-out;will-change:transform}
.whale img{
  width:min(100%,520px);
  /* Bob startet erst, wenn der Eingang fertig ist */
  animation:bob 7s ease-in-out 1.5s infinite;
  transform-origin:50% 70%;
}
/* sanfte „Wasser“-Ellipse unter dem Wal */
.whale::after{
  content:"";position:absolute;left:50%;bottom:2%;translate:-50% 0;
  width:54%;height:22px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(33,30,26,.13),transparent 75%);
  filter:blur(2px);animation:shadow 7s ease-in-out 1.5s infinite;z-index:-1;
}

.intro{flex:1 1 54%;max-width:46ch;transition:transform .35s ease-out}
/* Text baut sich gestaffelt auf (nähere, schnellere Parallax-Ebene) */
.eyebrow   {animation:rise .6s cubic-bezier(.22,.61,.36,1) .15s both}
.intro h1  {animation:rise .7s cubic-bezier(.22,.61,.36,1) .28s both}
.lead      {animation:rise .6s cubic-bezier(.22,.61,.36,1) .52s both}
.intro p.body{animation:rise .6s cubic-bezier(.22,.61,.36,1) .64s both}
.actions   {animation:rise .6s cubic-bezier(.22,.61,.36,1) .78s both}
.eyebrow{
  font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.intro h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(52px,9vw,104px);color:var(--ink);
}
.marker{display:block;width:min(100%,360px);height:auto;margin:6px 0 22px;overflow:visible}
.marker path{
  fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:600;stroke-dashoffset:600;
  animation:draw 1s .82s cubic-bezier(.65,0,.35,1) forwards;
}
.lead{
  font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,27px);
  line-height:1.32;color:var(--ink);margin-bottom:18px;
}
.intro p.body{font-size:17px;color:var(--muted);margin-bottom:30px}

/* ---- Buttons ---- */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  font-family:var(--body);font-weight:600;font-size:16px;text-decoration:none;
  padding:13px 22px;border-radius:999px;display:inline-flex;align-items:center;gap:.5ch;
  transition:transform .12s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--accent-deep)}
.btn.ghost{border:1px solid var(--accent);color:var(--accent);background:transparent}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--accent-soft)}

/* ---- Footer ---- */
.site-foot{flex-shrink:0;border-top:1px solid var(--hairline);margin-top:24px}
.site-foot .wrap{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;
  padding-block:20px;font-size:14px;color:var(--muted);
}
.site-foot nav{display:flex;gap:22px}
.site-foot a{text-decoration:none;color:var(--muted);transition:color .2s ease}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--accent)}

/* =========================================================
   Inhalts-Seiten (Impressum / Datenschutz)
   ========================================================= */
.doc{padding-block:clamp(32px,6vw,64px);max-width:760px}
.doc .back{
  display:inline-flex;align-items:center;gap:.4ch;font-size:14px;font-weight:600;
  color:var(--accent);text-decoration:none;margin-bottom:26px;
}
.doc .back:hover{text-decoration:underline}
.doc h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,48px);
  letter-spacing:-.02em;line-height:1.05;margin-bottom:8px}
.doc .sub{color:var(--muted);margin-bottom:34px}
.doc h2{font-family:var(--display);font-weight:600;font-size:22px;margin:32px 0 10px}
.doc h3{font-size:16px;font-weight:700;margin:20px 0 6px}
.doc p{margin-bottom:14px}
.doc p.small{font-size:14px;color:var(--muted)}
.doc a{color:var(--accent-deep)}
.fill{
  background:var(--accent-soft);color:var(--ink);border-radius:4px;
  padding:0 6px;font-weight:600;white-space:nowrap;
}
.note{
  border-left:4px solid var(--accent);background:var(--paper-2);
  padding:16px 18px;border-radius:0 8px 8px 0;margin:0 0 30px;font-size:15px;
}
.note strong{color:var(--accent-deep)}

/* =========================================================
   Animationen
   ========================================================= */
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%    {transform:translateY(-12px) rotate(1.2deg)}
}
@keyframes shadow{
  0%,100%{transform:scale(1);opacity:.9}
  50%    {transform:scale(.86);opacity:.6}
}
@keyframes draw{to{stroke-dashoffset:0}}

/* Eingangs-Animationen */
@keyframes enter-from-left{
  from{opacity:0;transform:translateX(-90px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes enter-from-right{
  from{opacity:0;transform:translateX(90px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}

/* =========================================================
   Responsiv
   ========================================================= */
@media (max-width:760px){
  .hero,.site--berufswal .hero{flex-direction:column;text-align:center;gap:8px}
  .whale{order:-1}
  .whale img{width:min(78%,360px)}
  .intro{max-width:100%}
  .eyebrow{margin-top:8px}
  .marker{margin-inline:auto}
  .actions{justify-content:center}
  .lead{font-size:21px}
}

/* =========================================================
   Zugänglichkeit
   ========================================================= */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .whale img,.whale::after,
  .site--studienwal .whale,.site--berufswal .whale,
  .eyebrow,.intro h1,.lead,.intro p.body,.actions{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .whale-inner,.intro{transition:none!important}
  .marker path{animation:none;stroke-dashoffset:0}
  *{scroll-behavior:auto}
}