/* FRISCHHAUS — Grundlagen: Farben, Typografie, Knöpfe, Kopf, Fuß.
   Die Abschnitte selbst stehen in seite.css, die Bauteile in teile.css. */

:root{
  --flieder:#8989E5;
  --flieder-tief:#6161CE;   /* Flaechen mit Fliesstext: 5,1:1 gegen Weiss */
  --flieder-dunkel:#4F4FBC; /* Schrift auf Weiss: 6,6:1 */
  --gold:#8C6A12;           /* Mango als Schriftfarbe auf Weiss */
  --mango:#FBDC63;
  --mango-tief:#F5CE38;
  --mango-hell:#FFF4C2;   /* Mango als Schriftfarbe auf Flieder: 4,6:1 */
  --pistazie:#CBEA97;
  --lavendel:#DCDEF8;
  --papier:#EFF2FD;
  --weiss:#FFFFFF;
  --tinte:#2F2F42;
  --tinte-weich:#5C5C72;
  --tinte-zart:#6E6E86;

  --rund-s:14px;
  --rund-m:22px;
  --rund-l:32px;
  --rund-xl:44px;

  --huelle:1280px;
  --luft:clamp(56px,7vw,112px);

  --schatten-weich:0 18px 44px rgba(70,70,140,.10);
  --schatten-tief:0 24px 60px rgba(70,70,140,.18);

  --kopf-hoehe:76px;
  --schnell:.22s cubic-bezier(.4,0,.2,1);
  --ruhig:.42s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-hoehe) + 16px)}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

h1,h2,h3,.titel,.marke__wort{
  font-family:'Jost',system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.12;
  margin:0;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.huelle{width:min(100% - 32px,var(--huelle));margin-inline:auto}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sprung{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--tinte);color:#fff;padding:10px 18px;border-radius:0 0 12px 12px;
  text-decoration:none;transition:top var(--schnell);
}
.sprung:focus-visible{top:0}
:focus-visible{outline:3px solid var(--flieder-dunkel);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------ Überschriften */
.titel{font-size:clamp(28px,3.1vw,46px)}
.titel--klein{font-size:clamp(24px,2.2vw,34px)}
.titel em{font-style:normal;color:var(--flieder-tief)}
.titel--hell{color:#fff}
.titel--hell em{color:var(--mango)}

/* ------------------------------------------------------------------ Knöpfe */
.knopf{
  --fuell:var(--flieder);
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border:0;border-radius:999px;
  font-family:'Jost',sans-serif;font-weight:500;font-size:1.02em;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform var(--schnell),box-shadow var(--schnell),color var(--schnell);
}
.knopf::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fuell);
  transform:translateY(101%);transition:transform var(--ruhig);
}
.knopf--hell{background:#fff;color:var(--flieder-dunkel);--fuell:var(--mango)}
.knopf--gelb{background:var(--mango);color:var(--tinte);--fuell:#fff}
.knopf--flieder{background:var(--flieder-tief);color:#fff;--fuell:var(--flieder-dunkel)}
.knopf--leer{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);--fuell:rgba(255,255,255,.16)}

.knopf:active{transform:translateY(1px) scale(.99)}

/* -------------------------------------------------------------------- Pfeil */
.pfeil{
  width:1em;height:1em;flex:none;display:inline-block;background:currentColor;
  -webkit-mask:var(--pfeil-bild) center/contain no-repeat;
  mask:var(--pfeil-bild) center/contain no-repeat;
  transition:transform var(--ruhig);
}
:root{--pfeil-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12.5 5.5 19 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pfeil--links{transform:rotate(180deg)}

/* --------------------------------------------------------------- Textlinks */
.textlink{
  position:relative;display:inline-flex;align-items:center;gap:9px;flex:none;
  font-family:'Jost',sans-serif;font-weight:500;color:var(--flieder-dunkel);
  text-decoration:none;padding-bottom:3px;
}
.textlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--ruhig);
}
.abschnitt__kopf--hell .textlink{color:#fff}

/* ------------------------------------------------------------------- Haken */
.haken{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.haken li{position:relative;padding-left:34px;line-height:1.5}
.haken li::before{
  content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.22);
  -webkit-mask:none;
}
.haken li::after{
  content:"";position:absolute;left:5px;top:calc(.15em + 7px);width:12px;height:8px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg);
}
.haken--dunkel li::before{background:var(--lavendel)}
.haken--dunkel li::after{border-color:var(--flieder-dunkel)}

/* ---------------------------------------------------------------- Kopfleiste */
.kopf{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--ruhig),border-color var(--ruhig);
}
.kopf.ist-geschoben{box-shadow:0 8px 28px rgba(70,70,140,.09);border-bottom-color:var(--lavendel)}
.kopf__reihe{display:flex;align-items:center;gap:24px;min-height:var(--kopf-hoehe)}

.marke{display:inline-flex;align-items:center;gap:7px;text-decoration:none;flex:none}
.marke__wort{font-size:22px;font-weight:600;color:var(--flieder-dunkel);letter-spacing:.02em}
.marke__tropfen{width:15px;height:15px;fill:var(--flieder);transition:transform var(--ruhig),fill var(--ruhig)}

.navi{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.9vw,32px)}
.navi a{
  position:relative;text-decoration:none;font-size:.97em;color:var(--tinte);
  padding:6px 0;transition:color var(--schnell);
}
.navi a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--flieder);
  transform:scaleX(0);transform-origin:left;transition:transform var(--ruhig);
}
.navi__ruf{
  color:var(--flieder-dunkel)!important;font-weight:700;
  box-shadow:inset 0 -2px 0 var(--flieder);
}
.navi__ruf::after{display:none}

.brenner{
  display:none;width:44px;height:44px;border:0;border-radius:12px;
  background:var(--lavendel);cursor:pointer;position:relative;
  transition:background var(--schnell);
}
.brenner__striche,.brenner__striche::before,.brenner__striche::after{
  position:absolute;left:50%;width:20px;height:2px;background:var(--flieder-dunkel);
  border-radius:2px;transform:translateX(-50%);transition:transform var(--ruhig),opacity var(--schnell);
}
.brenner__striche{top:50%;margin-top:-1px}
.brenner__striche::before{content:"";top:-7px}
.brenner__striche::after{content:"";top:7px}
.brenner[aria-expanded="true"] .brenner__striche{background:transparent}
.brenner[aria-expanded="true"] .brenner__striche::before{transform:translateX(-50%) translateY(7px) rotate(45deg)}
.brenner[aria-expanded="true"] .brenner__striche::after{transform:translateX(-50%) translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------- Fußbereich */
.fuss{background:var(--mango);color:var(--tinte);padding:clamp(40px,5vw,64px) 0 22px;margin-top:var(--luft)}
.fuss__gitter{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.fuss__marke{display:flex;flex-wrap:wrap;align-items:center;gap:7px;align-content:start}
.fuss__marke .marke__wort{color:var(--flieder-dunkel);font-size:24px}
.fuss__marke .marke__tropfen{fill:var(--flieder-dunkel);width:14px;height:14px}
.fuss__marke p{flex-basis:100%;margin-top:4px;color:var(--tinte-weich);max-width:26ch}
.fuss__block{display:grid;gap:9px;align-content:start;font-size:.96em}
.fuss__block a{position:relative;text-decoration:none;justify-self:start;padding-bottom:2px}
.fuss__block a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--ruhig);
}
.fuss__klein{font-size:.82em;color:var(--tinte-weich);max-width:34ch;margin-top:6px}
.fuss__zeile{margin-top:34px;padding-top:16px;border-top:1px solid rgba(47,47,66,.16);font-size:.86em;color:var(--tinte-weich)}

/* ----------------------------------------------------------- Einblendungen */
.js .zeigen{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js .zeigen.ist-da{opacity:1;transform:none}

/* --------------------------------------------------------------- Hover-Welt */
@media (hover:hover) and (pointer:fine){
  .knopf:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(108,108,214,.28)}
  .knopf:hover::before{transform:translateY(0)}
  .knopf--gelb:hover{color:var(--flieder-dunkel);box-shadow:0 14px 28px rgba(245,206,56,.4)}
  .knopf:hover .pfeil{transform:translateX(5px)}
  .textlink:hover::after{transform:scaleX(1)}
  .textlink:hover .pfeil{transform:translateX(5px)}
  .navi a:hover{color:var(--flieder-dunkel)}
  .navi a:hover::after{transform:scaleX(1)}
  .navi__ruf:hover{box-shadow:inset 0 -2px 0 var(--flieder-dunkel)}
  .marke:hover .marke__tropfen{transform:translateY(-3px) rotate(-8deg);fill:var(--mango-tief)}
  .brenner:hover{background:var(--flieder);}
  .brenner:hover .brenner__striche,
  .brenner:hover .brenner__striche::before,
  .brenner:hover .brenner__striche::after{background:#fff}
  .fuss__block a:hover::after{transform:scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .zeigen{opacity:1;transform:none}
}

/* ------------------------------------------------------------------ Schmal */
@media (max-width:960px){
  .brenner{display:block}
  .navi{
    position:fixed;inset:var(--kopf-hoehe) 0 auto;display:grid;gap:0;
    background:#fff;padding:8px 20px 22px;box-shadow:var(--schatten-tief);
    transform:translateY(-130%);transition:transform var(--ruhig);
    max-height:calc(100dvh - var(--kopf-hoehe));overflow:auto;
  }
  .navi.ist-offen{transform:none}
  .navi a{padding:14px 0;border-bottom:1px solid var(--lavendel);font-size:1.06em}
  .navi a::after{display:none}
  .navi__ruf{box-shadow:none!important;padding-top:18px!important;border-bottom:0!important}
  .fuss__gitter{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nur-breit{display:none}
}
@media (max-width:560px){
  .fuss__gitter{grid-template-columns:1fr}
  .knopf{padding:14px 24px}
}