@font-face{font-family:"Outfit";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/outfit-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/outfit-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}

:root{
  --hell:#F8F7F2;
  --dunkel:#161413;
  --text:#151311;
  --text-hell:#FDFEFD;
  --casal:#256368;
  --sulu:#81F06D;
  --persian:#01B7AA;
  --muted:#4d4a46;
  --radius:12px;
  --gutter:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--hell);color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.7;
}
h1,h2,h3{font-family:"Outfit",system-ui,sans-serif;font-weight:700;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,6.5vw,3.5rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem)}
h3{font-size:1.4rem}
p{margin:0 0 1em}
a{color:var(--casal)}
a:hover{color:var(--dunkel)}
:focus-visible{outline:3px solid var(--persian);outline-offset:3px;border-radius:4px}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.label{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--casal);margin:0 0 1rem;
}

header.site{padding:24px 0}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:"Outfit",sans-serif;font-weight:700;font-size:1.25rem;color:var(--text);text-decoration:none}
.badge{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"JetBrains Mono",monospace;font-size:.8rem;
  background:var(--dunkel);color:var(--text-hell);
  padding:.45em .9em;border-radius:999px;
}
.badge::before{
  content:"";width:.6em;height:.6em;border-radius:50%;background:var(--sulu);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.35}}

.hero{padding:clamp(48px,10vw,120px) 0 clamp(40px,8vw,96px)}
.hero h1 .mark{
  background:linear-gradient(transparent 62%,var(--sulu) 62%);
  padding:0 .08em;
}
.hero p.lead{font-size:1.2rem;max-width:36em;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;
  padding:.85em 1.4em;border-radius:var(--radius);border:2px solid var(--casal);
  transition:background .2s,color .2s,border-color .2s;
}
.btn.primary{background:var(--casal);color:var(--text-hell)}
.btn.primary:hover{background:var(--sulu);border-color:var(--sulu);color:var(--dunkel)}
.btn.secondary{background:transparent;color:var(--casal)}
.btn.secondary:hover{background:var(--persian);border-color:var(--persian);color:var(--dunkel)}

.offer{padding:clamp(32px,6vw,72px) 0}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:2rem}
.card{
  background:#fff;border:1px solid rgba(21,19,17,.12);border-radius:var(--radius);
  padding:24px;transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--casal);transform:translateY(-2px)}
.card .nr{font-family:"JetBrains Mono",monospace;font-size:.85rem;color:var(--casal)}
.card h3{margin:.4em 0 .4em;font-size:1.25rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.soon{
  display:inline-block;margin-top:1em;font-family:"JetBrains Mono",monospace;font-size:.75rem;
  background:var(--hell);border:1px solid rgba(21,19,17,.2);border-radius:999px;padding:.2em .8em;
}

footer.site{background:var(--dunkel);color:var(--text-hell);padding:48px 0 32px;margin-top:clamp(32px,6vw,72px)}
footer.site a{color:var(--text-hell)}
footer.site a:hover{color:var(--sulu)}
footer.site .cols{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
footer.site .label{color:var(--sulu)}
footer.site small{display:block;margin-top:32px;opacity:.7}

/* Rechtstexte */
.legal{padding:clamp(32px,6vw,72px) 0}
.legal .wrap{max-width:760px}
.legal h2{font-size:1.5rem;margin-top:2em}
.legal ul{padding-left:1.2em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- Logo, Portraet (ergaenzt 05.10.2026) ---- */
.brand{display:inline-flex;align-items:center;gap:.55rem}
.brand img{height:34px;width:34px;display:block}
.hero-grid{display:grid;gap:clamp(24px,5vw,56px);align-items:center}
.hero-text{min-width:0}
.portrait{margin:0}
.portrait img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(21,19,17,.18);
}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
}

/* ---- Optik wie onedaychoir.co (ergaenzt 06.11.2026): Rausch-Textur, Mintgruen, dunkler Hero ---- */
:root{--hell:#eafede;--line:#cdefbb}
html{scroll-padding-top:6rem}

/* Leichter Grain nur in den Hintergrundflaechen, nie ueber Text oder Bildern */
body,.hero,footer.site{background-image:url("/img/grain-bg-3.png");background-size:256px}

/* Kopfzeile: fest, halbtransparent, Milchglas */
header.site{
  position:fixed;inset:0 0 auto 0;z-index:50;padding:.8rem 0;
  background-color:rgb(22 20 19 / .55);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgb(255 255 255 / .08);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.site{background-color:rgb(22 20 19 / .92)}
}
.brand{color:var(--text-hell)}
.brand img{filter:invert(1)}
.badge{background-color:rgb(255 255 255 / .1)}

/* Hero: dunkel mit Farbschein */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:var(--dunkel);color:var(--text-hell);
  padding:clamp(7rem,14vw,9rem) 0 clamp(4rem,8vw,6rem);
}
.hero::before{
  content:"";position:absolute;inset:-25%;z-index:-1;filter:blur(80px);opacity:.5;
  background:
    radial-gradient(circle at 78% 90%,var(--persian) 0 13%,transparent 14%),
    radial-gradient(circle at 92% 62%,var(--sulu) 0 9%,transparent 10%),
    radial-gradient(circle at 62% 105%,var(--casal) 0 16%,transparent 17%);
}
.hero .label{color:var(--persian)}
.hero h1 .mark{background:none;padding:0;color:var(--sulu)}
.hero p.lead{color:#dfe3de}
.hero .btn.primary{background:var(--sulu);border-color:var(--sulu);color:var(--dunkel)}
.hero .btn.primary:hover{background:var(--persian);border-color:var(--persian)}
.hero .btn.secondary{border-color:rgb(253 254 253 / .55);color:var(--text-hell)}
.hero .btn.secondary:hover{background:var(--text-hell);border-color:var(--text-hell);color:var(--dunkel)}
.portrait img{box-shadow:0 18px 40px rgb(0 0 0 / .4)}

/* Karten und Hinweise */
.card{border-color:var(--line)}
.soon{border-color:var(--line)}

/* Fusszeile direkt anschliessend, Rechtstexte unter der festen Kopfzeile */
footer.site{background-color:var(--dunkel)}
main.legal{padding-top:7rem}

/* Social-Icons in der Fusszeile, wie onedaychoir.co */
.social{display:flex;flex-wrap:wrap;gap:.75rem}
footer.site .social a{display:inline-flex;color:var(--text-hell);line-height:0;text-decoration:none;transition:color .15s ease,transform .15s ease}
.social svg{width:1.9rem;height:1.9rem}
.social .glyph{fill:#161413}
footer.site .social a:hover{color:var(--sulu);transform:translateY(-2px)}
.social a:focus-visible{outline:2px solid var(--sulu);outline-offset:3px;border-radius:8px}

/* Der Farbschein ragt ueber den Hero hinaus, der Bereich darf sich dadurch nicht verschieben lassen */
.hero{overflow:clip}

/* Hero-Bilder ueber die volle Breite, Text darueber. Die Bilder sind breiter als der Hero und
   links angeschlagen, damit die Person rechts neben dem Text steht. */
.hero{display:flex;align-items:center;min-height:min(92vh,820px)}
.hero>.wrap{width:100%}
.hero-grid{display:block}
.hero-text{max-width:30rem}
.hero h1{font-size:clamp(1.75rem,9.2vw,3.5rem)} /* "Gesangspaedagoge," muss auch auf schmalen Handys passen */
.hero-bilder{position:absolute;inset:0 auto 0 0;width:130%;margin:0;z-index:-2}
.hero-bilder img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-bilder img.aktiv{opacity:1}
.hero-bilder img:nth-child(2){object-position:50% 0} /* Hocker: Kopf sitzt weit oben im Bild */
.hero::before{
  inset:0;filter:none;opacity:1;
  background:
    url("/img/grain-bg-3.png") 0 0 / 256px,
    linear-gradient(90deg,rgb(22 20 19 / .92) 0%,rgb(22 20 19 / .78) 38%,rgb(22 20 19 / .3) 68%,rgb(22 20 19 / .12) 100%),
    linear-gradient(0deg,rgb(22 20 19 / .55) 0%,transparent 35%);
}
/* Handy und Tablet: Bild oben, Text unten auf dem dunklen Verlauf */
@media (max-width:859px){
  .hero{align-items:flex-end;min-height:0;padding-top:18.5rem}
  .hero-bilder{inset:0 0 auto 0;width:100%;height:440px}
  .hero-bilder img,.hero-bilder img:nth-child(2){object-position:50% 30%}
  .hero::before{
    background:
      url("/img/grain-bg-3.png") 0 0 / 256px,
      linear-gradient(180deg,rgb(22 20 19 / .1) 0,rgb(22 20 19 / .12) 225px,rgb(22 20 19 / .82) 295px,#161413 440px);
  }
}

/* Hauptnavigation */
.nav{display:flex;align-items:center;gap:1.15rem;font-size:.92rem;margin-left:auto}
.nav a{color:var(--text-hell);text-decoration:none;font-weight:500;white-space:nowrap;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--sulu)}
.nav a[aria-current="page"]{border-bottom-color:var(--sulu)}
.nav-toggle{display:none}
.burger{position:relative;display:block;width:1.5rem;height:1.1rem}
.burger span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--text-hell);transition:transform .2s ease,opacity .2s ease,top .2s ease}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:calc(50% - 1px)}
.burger span:nth-child(3){top:calc(100% - 2px)}
.nav-open .burger span:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){top:calc(50% - 1px);transform:rotate(-45deg)}
@media (max-width:1000px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;padding:0;border:0;border-radius:10px;background:rgb(253 254 253 / .08);cursor:pointer}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:.5rem var(--gutter) 1.2rem;background:var(--dunkel);font-size:1rem;
  }
  .nav-open .nav{display:flex}
  .nav a{padding:.75rem 0;border-bottom:1px solid rgb(255 255 255 / .08)}
  .nav a[aria-current="page"]{border-bottom-color:rgb(255 255 255 / .08)}
}

/* Unterseiten: Karten unter dem Text */
main.legal .grid{margin:1.5rem 0 2.5rem}
main.legal .card h3{margin-top:0}
main.legal .card p{white-space:normal}
.card-link{margin-top:.8rem!important}
.card-link a{font-weight:600}
.zurueck{margin-top:2rem}

/* Cookie-Banner, wie onedaychoir.co */
.consent{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:100;max-width:44rem;margin-inline:auto;
  background:#fff;color:var(--text);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px rgb(0 0 0 / .18);padding:1.2rem 1.4rem;font-size:.95rem;line-height:1.55;
}
.consent p{margin:0 0 1rem}
.consent-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
.consent .btn{padding:.65rem 1.3rem;cursor:pointer;font:inherit;font-weight:600}

/* Handy: Kopfzeile einzeilig, lange Woerter wie "Datenschutzerklaerung" passen in die Breite */
.brand,.badge{white-space:nowrap}
.legal h1{font-size:clamp(1.6rem,7.4vw,3.5rem);hyphens:auto;overflow-wrap:break-word}
@media (max-width:430px){
  header.site .wrap{gap:8px}
  .brand{font-size:1.05rem;gap:.4rem}
  .brand img{height:28px;width:28px}
  .badge{font-size:.68rem;padding:.4em .7em}
}

/* Workshops: Übersichtskarten als Links, Rahmendaten auf der Detailseite */
a.card-workshop{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit}
a.card-workshop .soon{margin-top:.8rem;background:var(--sulu);border-color:var(--sulu);color:var(--dunkel);padding:.55em 1.3em;border-radius:1.4em;line-height:1.5}
a.card-workshop .card-link{margin-top:auto;padding-top:1rem;font-weight:600;color:var(--casal)}
a.card-workshop:hover .card-link{text-decoration:underline}
main.legal .label a{text-decoration:none}
.kurz{font-size:1.15rem;color:var(--muted)}
.rahmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:1.5rem 0 2rem;padding:0}
.rahmen div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem}
.rahmen dt{font-family:"JetBrains Mono",monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--casal)}
.rahmen dd{margin:.2rem 0 0}
.anfrage{margin:2.5rem 0 1rem;padding:1.4rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.anfrage .btn{margin-top:.4rem}
main.legal .anfrage .btn.primary{color:var(--text-hell);text-decoration:none}

/* Kontaktformular */
.kontaktform{display:flex;flex-direction:column;gap:1.1rem;margin:2rem 0 1rem;max-width:620px}
.kontaktform .feld{display:flex;flex-direction:column;gap:.4rem}
.kontaktform label{font-family:"JetBrains Mono",monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--casal)}
.kontaktform input,.kontaktform textarea{font:inherit;color:var(--text);background:#fff;border:2px solid var(--line,#cdefbb);border-radius:var(--radius);padding:.75em .9em;width:100%}
.kontaktform input:focus,.kontaktform textarea:focus{outline:none;border-color:var(--casal)}
.kontaktform textarea{resize:vertical;min-height:9rem}
.kontaktform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontaktform .hinweis{font-size:.9rem;color:var(--muted);margin:0}
.kontaktform button{align-self:flex-start;cursor:pointer;font:inherit;font-weight:600}
.kontaktform button:disabled{opacity:.6;cursor:wait}
.kontaktform .formstatus{margin:0;font-weight:600;color:var(--casal)}
.kontaktform .formstatus:empty{display:none}