/* Multi Language Institute – Stylesheet
   Markenpalette (neues Logo, Kunde 2026-10-14): Blau #345b86 · Beere #9b4560 · Creme #ede5df · Schwarz
   Abgeleitete Töne per build\farbe-marke.ps1 (vorher Blau #6583a3 / Mauve-Lila #8d6587)
   Schrift (Markenpalette 2026-10-14): Cormorant Garamond (Ueberschriften) · Roboto (Text) · Caveat (handschriftliche Akzente) · KFGQPC Uthman Taha Naskh (nur arabische Schrift) – alles lokal eingebunden */

@font-face{font-family:"Roboto";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/roboto-latin-wght-normal.woff2") format("woff2-variations"),url("../fonts/roboto-latin-wght-normal.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:"Roboto";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/roboto-latin-ext-wght-normal.woff2") format("woff2-variations"),url("../fonts/roboto-latin-ext-wght-normal.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}
@font-face{font-family:"Roboto";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/roboto-latin-wght-italic.woff2") format("woff2-variations"),url("../fonts/roboto-latin-wght-italic.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:"Roboto";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/roboto-latin-ext-wght-italic.woff2") format("woff2-variations"),url("../fonts/roboto-latin-ext-wght-italic.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}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2-variations"),url("../fonts/cormorant-garamond-latin-wght-normal.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:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2-variations"),url("../fonts/cormorant-garamond-latin-ext-wght-normal.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}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/caveat-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:"MLHamza";src:local("Segoe UI"),local("Helvetica Neue"),local("Arial"),local("Roboto");unicode-range:U+02BE,U+02BF}
@font-face{font-family:"KFGQPC Uthman Taha Naskh";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/kfgqpc-uthman-taha-naskh.ttf") format("truetype");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --blue:#345b86;
  --blue-deep:#204064;
  --blue-ink:#1a3552;
  --blue-soft:#ceddef;
  --cream:#ede5df;
  --paper:#faf7f4;
  --paper-2:#fffdfb;
  --accent:#9b4560;        /* Akzent Beere (Logo, seit 2026-10-14): Buttons, Hervorhebungen */
  --accent-deep:#7d2c45;   /* Links / Text auf hellem Grund */
  --accent-mid:#dcb2bf;
  --accent-soft:#f1e3e7;
  --accent-wash:#f8eef1;
  --ink:#2a2f36;
  --ink-soft:#57606b;
  --line:rgba(26,53,82,.16);
  --radius:26px;
  --wrap:1160px;
  --font:"MLHamza","Roboto","Segoe UI",system-ui,sans-serif;
  --font-head:"MLHamza","Cormorant Garamond",Garamond,Georgia,serif;
  --font-hand:"MLHamza","Caveat","Segoe Print","Bradley Hand",cursive;
  --font-ar:"KFGQPC Uthman Taha Naskh",serif;
  --header-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  overflow-y:scroll;            /* Scrollleiste immer sichtbar, Layout springt nicht */
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;font-family:var(--font);font-size:1.125rem;line-height:1.75;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:800;line-height:1.18;color:var(--blue-ink);margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(2.4rem,5.6vw,4.3rem);font-weight:800;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.15em}
a{color:var(--accent-deep);text-decoration-thickness:.08em;text-underline-offset:.2em}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
em{font-style:italic}
ul{padding-left:1.2em}
.ar{font-family:var(--font-ar);font-weight:400;direction:rtl;unicode-bidi:isolate;line-height:1.5}
.hand{font-family:var(--font-hand);font-weight:600;color:var(--accent);letter-spacing:0}

.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.wrap-narrow{width:min(760px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--blue-ink);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}

/* Kleine Zeilen über Überschriften: handschriftlich statt Großbuchstaben */
.eyebrow{
  font-family:var(--font-hand);font-weight:700;font-size:1.65rem;line-height:1.1;color:var(--accent);
  margin:0 0 .5rem;display:block;letter-spacing:0;text-transform:none
}
.eyebrow a{color:inherit}
.lead{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.55;color:var(--ink-soft);max-width:34em}

/* ------------------------------------------------ Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;font:inherit;font-weight:800;font-size:1.02rem;
  padding:1rem 1.8rem;border-radius:999px;border:2px solid var(--accent);background:var(--accent);color:#fff;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s,box-shadow .2s;
  box-shadow:0 10px 22px -14px rgba(125,44,69,.8)
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--blue-ink);border-color:var(--blue-ink);box-shadow:none}
.btn-ghost:hover{background:var(--blue-ink);border-color:var(--blue-ink);color:#fff}
.btn-light{background:#fff;border-color:#fff;color:var(--accent-deep);box-shadow:none}
.btn-light:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}

/* ------------------------------------------------ Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)}
.brand{display:block;width:clamp(190px,19vw,260px);flex:none}
.brand img{width:100%;height:auto}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.1rem;align-items:center}
.nav a{display:block;padding:.6rem .78rem;font-size:.98rem;font-weight:700;color:var(--blue-ink);text-decoration:none;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.3rem;height:3px;border-radius:3px;background:var(--accent-mid);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover{color:var(--accent-deep)}
.nav .nav-cta a{background:var(--accent);color:#fff;border-radius:999px;padding:.65rem 1.3rem;margin-left:.5rem}
.nav .nav-cta a::after{display:none}
.nav .nav-cta a:hover{background:var(--accent-deep);color:#fff}
.search-link{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;color:var(--blue-ink)}
.search-link:hover{background:var(--accent-soft);color:var(--accent-deep)}
.menu-toggle{display:none}

@media (max-width:1140px){
  .bar{gap:.5rem}
  .search-link{margin-left:auto}
  .menu-toggle{display:inline-flex;align-items:center;gap:.7rem;font:inherit;font-size:1rem;font-weight:800;color:var(--blue-ink);background:none;border:2px solid var(--blue-ink);border-radius:999px;padding:.5rem 1.05rem;cursor:pointer}
  .menu-icon{display:grid;gap:4px;width:16px}
  .menu-icon i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s}
  .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;background:var(--paper-2);border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(26,53,82,.35);display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;padding:.6rem 1.25rem 1.2rem;gap:0}
  .nav a{padding:1rem .2rem;font-size:1.1rem;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--accent-deep)}
  .nav .nav-cta a{margin:.9rem 0 0;text-align:center;border:0}
}

/* ------------------------------------------------ Seitenkopf (Unterseiten) */
/* Feste Hoehe auf allen Unterseiten (Kundenwunsch): Text steht immer an derselben Stelle, nichts springt beim Seitenwechsel. */
.page-hero{--ph-h:clamp(380px,32vw,420px);position:relative;height:var(--ph-h);background:linear-gradient(165deg,#f6e8ec 0%,var(--accent-soft) 55%,#ede5df 100%);overflow:hidden;padding:clamp(2.8rem,5.5vw,4.2rem) 0 0;border-radius:0 0 50% 50%/0 0 34px 34px}
.page-hero .wrap{position:static}
.page-hero-text{max-width:min(40rem,58%);position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.2rem,4.2vw,3.3rem);margin-bottom:.35em}
.page-hero .lead{margin-bottom:0;font-size:clamp(1.1rem,1.6vw,1.22rem)}
.page-hero-deco{position:absolute;right:max(2%,calc((100% - var(--wrap)) / 2 - 20px));bottom:0;height:100%;aspect-ratio:380/360;background:url("../img/kopf-buch.svg") center bottom/contain no-repeat;pointer-events:none}
/* Eck-Ornament im Seitenkopf entfernt (Kunde 2026-10-15: doppelte Deko neben dem Buch-Bild); bleibt nur im lila CTA-Block (.cta::after) */
.page-hero::before{content:"";position:absolute;left:-90px;bottom:-120px;width:320px;height:320px;border-radius:50%;background:var(--cream);opacity:.6}
@media (max-width:860px){
  .page-hero{--ph-h:auto;height:auto;min-height:var(--ph-h-m,440px);padding-bottom:2.5rem}
  .page-hero-text{max-width:none}
  .page-hero-deco{height:62%;right:-6%;opacity:.28}
}

/* ------------------------------------------------ Abschnitte */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-head{max-width:40rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.section-cream{background:var(--cream)}
.section-rose{background:var(--accent-soft)}
.section-blue{background:var(--blue-deep);color:#e0e8f0;position:relative;overflow:hidden}
.section-blue h2,.section-blue h3{color:#fff}
.section-blue .eyebrow{color:#f2cfda}
.section-blue::before{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:url("../img/ranke-hell.svg") repeat-x left center/480px 45px;opacity:.55;pointer-events:none;height:45px;bottom:22px}
.section-blue > *{position:relative}
/* (frueher +40px Platz fuer die Ranken-Borduere unten; Bordüre seit 2026-10-14 entfernt, Zuschlag 2026-10-26 gestrichen) */
.verse::before{display:none} /* Vers-Band hat schon eigene Ranken */
.prose{max-width:42rem}
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.8em;color:var(--blue)}
.prose blockquote{margin:1.5em 0;padding-left:1.2rem;border-left:4px solid var(--accent-mid);font-style:italic}

/* ------------------------------------------------ Startseite: Hero */
.hero{position:relative;padding:clamp(2.2rem,5vw,4.4rem) 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;right:-6%;top:-14%;width:min(58vw,680px);aspect-ratio:1;border-radius:50%;background:var(--accent-soft);z-index:-1}
.hero::after{content:"";position:absolute;right:clamp(24px,4.2vw,64px);top:clamp(22px,2.6vw,40px);width:clamp(120px,12.5vw,180px);aspect-ratio:182.5/208;background:url("../img/ecke.svg") center/contain no-repeat;opacity:.55;pointer-events:none;z-index:-1}
@media (max-width:600px){.hero::after{width:92px;right:14px;top:14px;opacity:.45}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
.hero-copy{padding-bottom:clamp(3rem,7vw,6rem);align-self:center}
.hero h1{margin-bottom:.15em}
.hero h1 span{display:block}
.hero .slogan-en{font-family:var(--font-hand);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.65rem);color:var(--blue-deep);margin:.2rem 0 1.5rem;line-height:1.1}
.hero .welcome{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);margin:0 0 1.1rem}
.welcome-icon{flex:none;width:clamp(84px,10vw,128px);height:auto}
.welcome-text{display:flex;flex-direction:column;line-height:1.05}
.welcome-de{font-weight:800;font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--blue-ink);letter-spacing:-.015em}
.welcome-de .nowrap{white-space:nowrap}
.welcome-mark{display:inline-block;height:.74em;width:auto;vertical-align:baseline;margin-left:.06em}
.welcome-ar{font-family:var(--font-hand);font-weight:700;font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--blue);margin-top:.25rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0;padding:0;list-style:none}
.chips li{padding:.45rem 1.05rem;border-radius:999px;background:#fff;border:1.5px solid var(--accent-mid);color:var(--accent-deep);font-weight:700;font-size:.98rem}
.arches{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.6rem,1.6vw,1.2rem);position:relative;padding-inline:.5rem}
.arches::after{content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:16px;background:var(--blue-ink);border-radius:999px 999px 0 0}
.arch{position:relative;flex:1 1 0;max-width:210px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0 .6rem 1.7rem;border-radius:999px 999px 0 0;color:#fff;margin-bottom:16px}
.arch::before{content:"";position:absolute;inset:9px 9px 0;border-radius:999px 999px 0 0;border:1.5px solid currentColor;border-bottom:0;opacity:.45;pointer-events:none}
.arch b{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:800;line-height:1.1;display:block}
.arch b.ar{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:400}
.arch small{display:block;margin-top:.5rem;font-size:.9rem;font-weight:700;opacity:.9}
.arch-1{height:clamp(250px,32vw,380px);background:var(--accent)}
.arch-2{height:clamp(300px,39vw,460px);background:var(--blue)}
.arch-3{height:clamp(220px,28vw,330px);background:var(--cream);color:var(--blue-ink)}
.hero-ribbon{display:block;width:100%;height:auto;fill:var(--accent);margin-top:-1px;opacity:.85}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding-bottom:1rem}
  .arches{margin-top:1.5rem}
}

/* "Lernen, das in dein Leben passt" */
.care{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.care-card{background:var(--paper-2);border-radius:var(--radius);padding:1.9rem 1.7rem 1.7rem;position:relative;box-shadow:0 18px 30px -26px rgba(125,44,69,.7)}
.care-card:nth-child(2){transform:translateY(1.2rem)}
.care-card h3{margin-bottom:.4rem}
.care-card p{color:var(--ink-soft)}
.care-card blockquote{position:relative;margin:1.2rem 0 0;padding:2.3rem 1.2rem 1rem;background:var(--accent-wash);border-radius:18px;font-size:.98rem;line-height:1.55;color:var(--ink)}
.care-card blockquote::before{content:"\201C";position:absolute;top:.45rem;left:1rem;color:var(--accent-mid);font-weight:800;font-size:2.8rem;line-height:1}
.care-card cite{display:block;margin-top:.5rem;font-family:var(--font-hand);font-weight:600;font-size:1.3rem;font-style:normal;color:var(--accent)}
@media (max-width:900px){.care{grid-template-columns:1fr}.care-card:nth-child(2){transform:none}}

/* Drei Wege */
.ways{display:grid;gap:1rem}
.way{display:grid;grid-template-columns:4.2rem 1fr auto;gap:1.2rem 1.6rem;align-items:center;padding:1.5rem 1.8rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
.way:hover{transform:translateY(-3px);border-color:var(--accent-mid);box-shadow:0 18px 30px -24px rgba(125,44,69,.7)}
.way-num{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);font-weight:800;font-size:1.3rem}
.way h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 .15rem}
.way p{margin:0;color:var(--ink-soft)}
.way-go{font-weight:800;font-size:1rem;color:var(--accent-deep);display:flex;gap:.6rem;align-items:center;white-space:nowrap}
.way-go svg{transition:transform .25s}
.way:hover .way-go svg{transform:translateX(5px)}
@media (max-width:700px){.way{grid-template-columns:3.4rem 1fr;padding:1.3rem}.way-go{grid-column:2}}

/* Sprachen-Band */
.langs{display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;align-items:baseline;justify-content:center;padding:1rem 0}
.langs span{font-size:clamp(2.1rem,6vw,4.6rem);font-weight:800;letter-spacing:-.025em;color:var(--blue-ink);line-height:1.15}
.langs span:nth-child(2){color:var(--accent)}
.langs span.ar{font-size:clamp(2.5rem,7vw,5.4rem);color:var(--blue)}

/* Lernpfad (Erste Schritte) */
.path{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1rem}
.path-line{position:absolute;left:0;right:0;top:0;width:100%;height:100px;overflow:visible}
.path-line path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9}
.step{position:relative;padding-top:5.5rem;text-align:center}
.step-dot{position:absolute;top:8px;left:50%;margin-left:-27px;width:54px;height:54px;border-radius:50%;background:var(--accent);border:4px solid var(--paper);box-shadow:0 0 0 2px var(--accent);display:grid;place-items:center;font-weight:800;font-size:1.25rem;color:#fff}
.step:nth-of-type(2) .step-dot{top:36px}
.step:nth-of-type(2){padding-top:7.2rem}
.step h3{margin-bottom:.4rem}
.step p{color:var(--ink-soft);margin:0 0 .4rem}
@media (max-width:760px){
  .path{grid-template-columns:1fr;gap:0}
  .path-line{display:none}
  .step,.step:nth-of-type(2){padding:0 0 2.2rem 5rem;text-align:left}
  .step-dot,.step:nth-of-type(2) .step-dot,.step:nth-of-type(3) .step-dot{top:0;left:0;margin-left:0}
  .step::before{content:"";position:absolute;left:26px;top:58px;bottom:6px;border-left:3px dotted var(--accent-mid)}
  .step:last-child::before{display:none}
}

/* Stimmen – Briefkarten */
.letters{columns:3 300px;column-gap:1.6rem}
.letter{break-inside:avoid;margin:0 0 1.6rem;padding:3.6rem 1.7rem 1.6rem;background:var(--paper-2);border-radius:var(--radius);border:1px solid var(--line);position:relative;box-shadow:0 18px 28px -26px rgba(125,44,69,.8)}
.letter::before{content:"\201C";position:absolute;top:.9rem;left:1.5rem;font-size:3.6rem;font-weight:800;line-height:1;color:var(--accent-mid)}
.letter blockquote{margin:0}
.letter p{font-size:1.02rem;line-height:1.65;margin:0 0 .8em;color:var(--ink)}
.letter p:last-child{margin-bottom:0}
.letters.featured{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:start}
.letters.featured .letter{margin:0}
.letters.featured .letter:nth-child(1){transform:rotate(-1.2deg)}
.letters.featured .letter:nth-child(2){transform:translateY(1.5rem)}
.letters.featured .letter:nth-child(3){transform:rotate(1deg)}
@media (max-width:860px){.letters.featured{grid-template-columns:1fr}.letters.featured .letter{transform:none!important}}

/* Fakten-Streifen */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.fact b{display:block;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;line-height:1;color:var(--cream);margin-bottom:.5rem}
.fact span{color:#bbcee3;font-size:1.02rem}
@media (max-width:700px){.facts{grid-template-columns:1fr;gap:1.6rem}}

/* CTA-Band */
.cta{background:var(--accent);color:#fff;position:relative;overflow:hidden;border-radius:50px 50px 0 0}
.cta h2{color:#fff;max-width:18ch}
.cta p{color:#fcf1f5;font-size:1.2rem;max-width:34em}
.cta .eyebrow{color:#f8e6ec}
.cta::after{content:"";position:absolute;right:clamp(20px,4vw,60px);top:clamp(28px,3vw,44px);width:clamp(100px,11vw,160px);aspect-ratio:182.5/208;background:url("../img/ecke-hell.svg") center/contain no-repeat;opacity:.3;pointer-events:none}
.cta::before{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:url("../img/ranke-hell.svg") repeat-x left center/480px 45px;opacity:.6;pointer-events:none;height:45px;bottom:80px}
.cta{padding-bottom:calc(clamp(3.5rem,8vw,6.5rem) + 70px)}
.cta .wrap{position:relative}

/* ------------------------------------------------ Inhaltsblöcke Unterseiten */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.numlist{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.numlist li{position:relative;padding:1.05rem 1.3rem 1.05rem 3.4rem;background:var(--paper-2);border:1px solid var(--line);border-radius:20px}
.numlist li::before{content:"";position:absolute;left:1.2rem;top:1.45rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--accent-mid);box-shadow:0 0 0 4px var(--accent-wash)}
.section-cream .numlist li{background:rgba(255,253,251,.7)}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem}
.offer{border-radius:var(--radius);padding:1.9rem 1.7rem;background:var(--paper-2);border:1px solid var(--line)}
.offer:nth-child(1){background:var(--accent-soft);border-color:transparent}
.offer:nth-child(2){background:var(--blue-soft);border-color:transparent}
.offer:nth-child(3){background:var(--cream);border-color:transparent}
.offer:nth-child(4){background:var(--accent-wash);border-color:transparent}
.offer h3{margin-bottom:.4rem}
.offer p{margin:0;color:var(--ink-soft)}
.section-blue .offer h3{color:var(--blue-ink)}
.trio{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.015em;color:var(--blue-ink);margin:1rem 0 1.4rem;line-height:1.25}
.trio span{color:var(--accent)}

/* Tabellen */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper-2)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1.05rem}
th,td{padding:1rem 1.3rem;text-align:left;border-bottom:1px solid var(--line)}
thead th{font-size:1rem;color:var(--accent-deep);background:var(--accent-wash);border-bottom:2px solid var(--accent-mid);font-weight:800}
tbody th{font-weight:700;color:var(--blue-ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--accent-deep);font-weight:900}
td.no{color:#8b95a1}

.price-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.price-tile{padding:1.6rem 1.3rem 1.5rem;border-radius:999px 999px var(--radius) var(--radius);background:var(--paper-2);border:1px solid var(--line);text-align:center}
.price-tile:nth-child(1){background:var(--accent-soft);border-color:transparent}
.price-tile:nth-child(2){background:var(--cream);border-color:transparent}
.price-tile:nth-child(3){background:var(--blue-soft);border-color:transparent}
.price-tile h3{font-size:1.02rem;color:var(--accent-deep);margin:1.7rem 0 .5rem}
.price-tile .big{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;color:var(--blue-ink);line-height:1}
.price-tile .big small{font-size:.95rem;font-weight:700;color:var(--ink-soft)}
.price-tile p{margin:.7rem 0 0;font-size:.98rem;color:var(--ink-soft);line-height:1.5}
@media (max-width:820px){.price-tiles{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
@media (max-width:520px){.price-tiles{grid-template-columns:1fr}}

.checks{list-style:none;margin:0;padding:0}
.checks li{padding:.5rem 0 .5rem 2.4rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.95rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d2c45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}
.subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.subject{padding:1.7rem 1.6rem;background:var(--paper-2);border-radius:var(--radius);border:1px solid var(--line)}
.subject h3{font-size:1.2rem;color:var(--accent-deep)}
.subject ul{list-style:none;padding:0;margin:0}
.subject li{padding:.45rem 0;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;border-bottom:1px dotted var(--line)}
.subject li:last-child{border-bottom:0}
.subject .ar{font-size:1.5rem;color:var(--blue-ink)}
.subject p{margin:.6rem 0 0;color:var(--ink-soft);font-size:1rem}
.subject p.ar{font-size:1.35rem;line-height:1.7}

.doc-card{display:flex;gap:1.4rem;align-items:center;padding:1.4rem 1.6rem;border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line);text-decoration:none;color:inherit;max-width:34rem}
.doc-card:hover{border-color:var(--accent-mid)}
.doc-icon{flex:none;width:58px;height:72px;border-radius:8px 18px 8px 8px;background:var(--accent);color:#fff;display:grid;place-items:end center;padding-bottom:.6rem;font-weight:800;font-size:.85rem}
.doc-card strong{display:block;color:var(--blue-ink)}
.doc-card span{color:var(--ink-soft);font-size:1rem}

/* Kontakt */
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1rem;margin-bottom:2.6rem}
.channel{display:block;padding:1.4rem 1.4rem 1.3rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper-2);text-decoration:none;color:var(--blue-ink);transition:transform .2s,border-color .2s}
.channel:hover{border-color:var(--accent-mid);color:var(--blue-ink);transform:translateY(-2px)}
.channel b{display:block;font-size:1.15rem}
.channel span{display:block;font-size:.98rem;color:var(--ink-soft);word-break:break-word}
.form{display:grid;gap:1.3rem;max-width:40rem}
.field label,.field legend{display:block;font-weight:800;font-size:1rem;margin-bottom:.4rem;color:var(--blue-ink);padding:0}
.field input,.field textarea,.field select{width:100%;font:inherit;color:var(--ink);background:var(--paper-2);border:2px solid var(--accent-mid);border-radius:18px;padding:.9rem 1.1rem}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid rgba(155,69,96,.28);border-color:var(--accent)}
fieldset.field{border:0;margin:0;padding:0}
.choice{display:flex;flex-wrap:wrap;gap:.7rem}
.choice label{display:block;margin:0;font-weight:700;cursor:pointer}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.3rem;border-radius:999px;border:2px solid var(--accent-mid);background:var(--paper-2);transition:all .2s}
.choice input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.choice input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.form-note{font-size:.95rem;color:var(--ink-soft);margin:0}
.form-status{font-weight:700;color:var(--accent-deep);min-height:1.5em;margin:0}

/* Blog */
.post-row{display:grid;grid-template-columns:11rem 1fr;gap:1rem 2rem;padding:1.9rem 0;border-bottom:1px solid var(--line)}
.post-row:first-child{border-top:1px solid var(--line)}
.post-row time{font-family:var(--font-hand);font-weight:700;font-size:1.4rem;color:var(--accent);padding-top:.1rem}
.post-row h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:.4rem}
.post-row h2 a{color:var(--blue-ink);text-decoration:none}
.post-row h2 a:hover{color:var(--accent-deep)}
.post-row p{color:var(--ink-soft);margin-bottom:.6rem}
.more{font-weight:800;font-size:1rem}
@media (max-width:640px){.post-row{grid-template-columns:1fr}}
.article{padding:clamp(3rem,6vw,5rem) 0}
.article h1{font-size:clamp(2rem,4.6vw,3.2rem)}
.article .prose{max-width:none;margin-top:1.6rem}
.related{margin-top:3.5rem;padding:2rem;background:var(--accent-wash);border-radius:var(--radius)}
.related h2{font-size:1.4rem}
.related ul{list-style:none;padding:0;margin:0 0 1.6rem}
.related li{padding:.8rem 0;border-bottom:1px solid var(--line);display:grid;gap:.1rem}
.related time{font-family:var(--font-hand);font-weight:700;font-size:1.25rem;color:var(--accent)}
.related a{font-weight:700;text-decoration:none}

/* Partner */
.partner-logos{display:flex;flex-wrap:wrap;gap:1.5rem;margin:1.5rem 0 2.5rem}

/* Suche */
.search-form{display:flex;gap:.7rem;max-width:36rem;margin-bottom:2rem}
.search-form input{flex:1;font:inherit;padding:.95rem 1.3rem;border:2px solid var(--accent-mid);border-radius:999px;background:var(--paper-2)}
.search-results{list-style:none;padding:0;margin:0;max-width:44rem}
.search-results li{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.search-results a{font-weight:800;font-size:1.2rem;text-decoration:none}
.search-results p{margin:.2rem 0 0;color:var(--ink-soft);font-size:1rem}
.search-results mark{background:var(--accent-soft);color:inherit;border-radius:4px;padding:0 .15em}

/* ------------------------------------------------ Footer */
.site-footer{background:var(--cream);color:var(--ink-soft);position:relative;padding-top:1px}
.footer-ribbon{position:absolute;left:0;top:-69px;width:100%;height:70px;fill:var(--cream)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding:4.5rem 0 3rem}
.footer-logo{display:block;width:min(270px,100%)}
.footer-logo img{width:100%;height:auto}
.footer-slogan{margin:1.4rem 0 0;font-size:2.2rem}
.footer-slogan em{font-style:normal}
.site-footer h2{font-size:1.05rem;color:var(--accent-deep);margin-bottom:1rem}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{padding:.25rem 0}
.site-footer a{color:var(--blue-ink);text-decoration:none}
.site-footer a:hover{color:var(--accent-deep);text-decoration:underline}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding:1.4rem 0 2rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink-soft)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:2rem}}

.to-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:40;width:50px;height:50px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s,background .2s;box-shadow:0 8px 20px -6px rgba(125,44,69,.7)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent-deep)}

/* ------------------------------------------------ Bewegung (nur Deckkraft/Versatz – kein Layout-Sprung) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
.letters.featured .letter.reveal.in:nth-child(1){transform:rotate(-1.2deg)}
.letters.featured .letter.reveal.in:nth-child(2){transform:translateY(1.5rem)}
.letters.featured .letter.reveal.in:nth-child(3){transform:rotate(1deg)}
.care-card.reveal.in:nth-child(2){transform:translateY(1.2rem)}
@media (max-width:900px){.care-card.reveal.in:nth-child(2){transform:none}}
@media (max-width:860px){.letters.featured .letter.reveal.in{transform:none!important}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
}
@media print{.site-header,.to-top,.site-footer .footer-ribbon{display:none}body{background:#fff}}

/* ------------------------------------------------ Illustrationen & lebendige Elemente */
.illu{width:100%;height:auto;overflow:visible}
.hero-art{align-self:center;justify-self:center;width:min(100%,470px);padding-bottom:1.5rem}
/* Kompakter Hero auf Desktop (Kunde 2026-09-30): alles bis zu den Chips auf einen Blick, Foto richtet sich nach der Bildschirmhoehe */
@media (min-width:861px){
.hero{padding-top:clamp(1.2rem,3vh,2.6rem)}
.hero-copy{padding-bottom:clamp(1.5rem,4vh,3rem)}
.hero .welcome{margin-bottom:.6rem;gap:clamp(.8rem,1.6vw,1.2rem)}
.welcome-icon{width:clamp(76px,7.6vw,106px)}
.welcome-de{font-size:clamp(2rem,3.3vw,2.85rem)}
.welcome-ar{font-size:clamp(1.5rem,2.3vw,2rem)}
.hero h1.slogan-hand{font-size:clamp(2rem,3.3vw,2.85rem)}
.hero .lead{font-size:clamp(1.1rem,1.5vw,1.16rem);line-height:1.6;color:var(--ink)}
.chips{margin-top:1.1rem}
.hero-art{--aw:min(470px,calc((100vh - 150px) * .66));width:min(100%,var(--aw));margin-top:calc(var(--aw) * .16)}
}@media (min-width:861px){.hero-art{zoom:1.16;position:relative}.hero::before{display:none}.hero-art::before{content:"";position:absolute;width:129.8%;aspect-ratio:1;left:calc(50% + 26.7%);top:9.2%;translate:-50% -50%;border-radius:50%;background:var(--accent-soft);z-index:-1}.hero::after{display:none}.hero-art::after{content:"";position:absolute;width:34.4%;aspect-ratio:182.5/208;left:79.3%;top:-17.1%;background:url("../img/ecke.svg") center/contain no-repeat;opacity:.55;pointer-events:none;z-index:-1}@media (min-width:861px) and (max-width:1300px){.hero-art::after{left:66%;top:-14%}}}

.float{animation:bob 6s ease-in-out infinite}
.float.f2{animation-delay:-1.2s}.float.f3{animation-delay:-2.4s}.float.f4{animation-delay:-3.6s}.float.f5{animation-delay:-4.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.twinkle{animation:twinkle 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.twinkle.t2{animation-delay:-1.2s}.twinkle.t3{animation-delay:-2.4s}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.steam{animation:steam 3.4s ease-in-out infinite}
@keyframes steam{0%,100%{opacity:.35;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}
.wobble{animation:wobble 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes wobble{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}

/* "Kommt dir das bekannt vor?" */
.worry{background:var(--paper)}
.worry-head{max-width:44rem}
.bubbles{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin:2.2rem 0 2.6rem}
.bubble{position:relative;margin:0;padding:1.1rem 1.6rem;background:var(--accent-soft);color:var(--accent-deep);font-weight:700;font-size:1.15rem;line-height:1.4;border-radius:28px 28px 28px 6px;max-width:22rem}
.bubble.b2{background:var(--blue-soft);color:var(--blue-ink);border-radius:28px 28px 6px 28px;transform:translateY(.8rem)}
.bubble.b3{background:var(--cream);color:var(--blue-ink)}
.answer{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:stretch;background:var(--paper-2);border:1px solid var(--line);border-radius:36px;padding:clamp(1.6rem,4vw,3rem);box-shadow:0 30px 40px -34px rgba(125,44,69,.6)}
.answer h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.answer-note{font-size:1.9rem;line-height:1.15;margin:1rem 0 1.3rem}
.tips{background:var(--accent-wash);border-radius:26px;padding:1.6rem 1.6rem 1.2rem}
.tips h4{font-size:1.15rem;color:var(--accent-deep);margin-bottom:1rem}
.tips ol{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:1rem}
.tips li{counter-increment:t;position:relative;padding-left:2.7rem;font-size:1.02rem;line-height:1.55;color:var(--ink)}
.tips li::before{content:counter(t);position:absolute;left:0;top:0;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem}
@media (max-width:860px){.answer{grid-template-columns:1fr}.bubble.b2{transform:none}}

/* Für wen */
.for-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.for-card{background:var(--paper-2);border-radius:var(--radius);padding:1rem 1rem 1.8rem;box-shadow:0 22px 34px -30px rgba(125,44,69,.7)}
.for-card h3{margin:1.3rem 1rem .4rem;font-size:1.45rem}
.for-card p{margin:0 1rem;color:var(--ink-soft)}
.for-art{border-radius:calc(var(--radius) - 6px) calc(var(--radius) - 6px) 120px 120px/calc(var(--radius) - 6px) calc(var(--radius) - 6px) 90px 90px;padding:1.6rem 2rem 1rem;display:grid;place-items:center;min-height:250px}
.for-art .illu{max-width:270px}
.fa-blue{background:var(--blue-soft)}
.fa-mauve{background:var(--accent-soft)}
.fa-cream{background:var(--cream)}
.for-more{margin-top:2.4rem}
@media (max-width:760px){.for-grid{grid-template-columns:1fr}}

/* Vers / Hadith */
.verse{text-align:center;padding-block:clamp(4rem,9vw,7rem)}
.verse .eyebrow{color:#f2cfda;display:block}
.verse-ar{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.9;color:#fff;margin:.4rem 0 1rem}
.verse-de{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.6;color:#dbe5ef;max-width:34em;margin:0 auto .6rem}
.verse-src{font-family:var(--font-hand);font-weight:600;font-size:1.5rem;color:#f2cfda;margin:0}
.ayah{display:flex;flex-direction:column;gap:.2rem;margin:2.2rem 0 0;color:#fcf1f5}
.ayah .ar{font-size:1.9rem;color:#fff;text-align:left}
.ayah span:last-child{font-size:1rem;opacity:.9}
.quote-strip{margin-top:2.5rem;padding:1.6rem 1.8rem;background:var(--accent-wash);border-radius:var(--radius);border-left:6px solid var(--accent-mid)}
.quote-strip .ar{font-size:1.7rem;color:var(--accent-deep);margin:0 0 .3rem}
.quote-strip p:not(.ar){margin:0;color:var(--ink-soft)}
.split-art{display:grid;place-items:center;border-radius:var(--radius);padding:2rem}
.split-art .illu{max-width:300px}
/* ------------------------------------------------ Fotos */
.collage{position:relative;width:100%;aspect-ratio:1/1.12;margin-inline:auto}
.ph{position:absolute;overflow:hidden;background:var(--accent-soft)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-main{left:4%;top:0;width:76%;height:94%;border-radius:999px 999px 34px 34px;box-shadow:0 34px 44px -30px rgba(125,44,69,.65)}
.ph-main img{object-position:50% 45%}
.ph-round{right:0;bottom:0;width:47%;aspect-ratio:1;height:auto;border-radius:50%;border:8px solid var(--paper);box-shadow:0 20px 30px -22px rgba(26,53,82,.6)}
.sticker{position:absolute;left:-5%;top:29%;background:#fff;color:var(--accent-deep);padding:.35rem 1.1rem .45rem;border-radius:999px;font-size:1.55rem;line-height:1.1;transform:rotate(-5deg);box-shadow:0 14px 22px -14px rgba(26,53,82,.6)}
.fl-letters{position:absolute;inset:0;pointer-events:none}
.fl-letters span{position:absolute;color:#fff;text-shadow:0 2px 14px rgba(26,53,82,.45);animation:bob 6s ease-in-out infinite;line-height:1}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:860px){.hero-art{width:min(100%,400px);margin-top:1rem}}

.shots{columns:3 260px;column-gap:1rem;margin-top:.4rem}
.shot{position:relative;margin:0 0 1rem;break-inside:avoid;border-radius:26px;overflow:hidden;background:var(--accent-mid)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.2rem .9rem;color:#fff;font-family:var(--font-hand);font-weight:700;font-size:1.8rem;line-height:1;background:linear-gradient(transparent,rgba(26,53,82,.7))}
.shot-note{background:var(--accent);color:#fff;padding:1.8rem 1.6rem;border-radius:26px}
.shot-note .hand{color:#fff;font-size:2rem;line-height:1.1;margin:0 0 .5rem}
.shot-note p:last-child{margin:0;color:#f8e6ec}
.excuses{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.6rem}
.excuse{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem}
.excuse .no{margin:0 0 .45rem;font-weight:700;color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--accent-mid);text-decoration-thickness:3px}
.excuse .yes{margin:0;color:var(--blue-ink);font-weight:600;line-height:1.55}
.excuse .yes::before{content:"\2192  ";color:var(--accent);font-weight:800}
.everywhere .for-more{margin-top:2.6rem}
@media (max-width:760px){.excuses{grid-template-columns:1fr}}

.for-art.photo{padding:0;min-height:0;aspect-ratio:4/3;overflow:hidden}
.for-art.photo img{width:100%;height:100%;object-fit:cover;display:block}
.for-art.blocks{gap:.7rem;grid-auto-flow:column;justify-content:center;align-content:center;aspect-ratio:4/3;min-height:0;padding:1rem}
.for-art.blocks span{display:grid;place-items:center;width:clamp(4rem,9vw,5.6rem);aspect-ratio:1;border-radius:20px;color:#fff;font-family:var(--font-ar);font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;padding-bottom:.2em}
.for-art.blocks span:nth-child(2){transform:translateY(-.9rem) rotate(-4deg)}
.for-art.blocks span:nth-child(3){transform:rotate(4deg)}
.for-art.type{aspect-ratio:4/3;min-height:0;align-content:center;gap:.3rem;text-align:center;padding:1rem}
.for-art.type b{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--blue-ink);line-height:1.25}
.for-art.type b:nth-child(2){color:var(--accent)}
.for-art.type b.ar{font-weight:400;color:var(--blue)}
.split-photo{border-radius:var(--radius);overflow:hidden;background:var(--accent-soft)}
.split-photo img{width:100%;height:auto;display:block}
.badge{position:absolute;display:grid;place-items:center;width:4.2rem;height:4.2rem;border-radius:50%;color:#fff;font-size:2.6rem;line-height:1;padding-bottom:.25rem;box-shadow:0 14px 22px -12px rgba(26,53,82,.6);animation:bob 6s ease-in-out infinite}

/* ------------------------------------------------ Einheitlicher Slogan "Dein Weg zum Wissen" / "Your Path to Knowledge"
   Überall gleiche Schrift (Caveat, handschriftlich) und Farbe (Flieder-Mauve wie im Footer) */
.slogan-hand{font-family:var(--font-hand);font-weight:700;color:var(--accent);letter-spacing:0;line-height:1.02}
h1.slogan-hand{font-size:clamp(2.3rem,4.4vw,3.5rem);margin-bottom:.05em}
.hero h1.slogan-hand{white-space:nowrap;margin-bottom:.45em}
.hero h1.slogan-hand span{display:block}

/* ------------------------------------------------ Dezente islamische Ornamente */
.section-head::after,.worry-head::after{content:"";display:block;width:min(300px,80%);height:30px;margin-top:1.1rem;background:url("../img/ranke.svg") left center/contain no-repeat}
.section-head.center::after{margin-inline:auto;background-position:center}
.orn{width:min(360px,80%);height:36px;margin:1.2rem auto;background:url("../img/ranke.svg") center/contain no-repeat}
.orn-light{background-image:url("../img/ranke-hell.svg")}
.page-hero-text::after{content:"";display:block;width:min(280px,70%);height:28px;margin-top:1.4rem;background:url("../img/ranke.svg") left center/contain no-repeat}
.collage .ph-frame{position:absolute;left:1%;top:-2.6%;width:82%;height:98%;background:var(--accent-mid);clip-path:url(#mihrab-clip)}
.collage .ph-main{border-radius:0;clip-path:url(#mihrab-clip);box-shadow:none}
.verse .orn{margin-block:0 1.6rem}
.verse .orn:last-child{margin:1.8rem auto 0}
/* Ueberschriften in Palatino-Nachbau TeX Gyre Pagella (Kunde 2026-09-30, Variante b); Fliesstext bleibt Mulish */
h1,h2,h3,h4,.welcome-de,.book-cover .de{font-family:var(--font-head);font-weight:700;letter-spacing:0;font-size-adjust:.46}  /* Cormorant hat kleine x-Hoehe: auf Pagella-Niveau angleichen */
h1.slogan-hand{font-family:var(--font-hand)}

.facts-light{margin-top:3.2rem;padding-top:2.4rem;border-top:1px solid var(--line)}.facts-light .fact b{color:var(--accent);font-size:clamp(2rem,3.6vw,2.8rem)}.facts-light .fact span{color:var(--ink-soft)}

/* Seitenueberarbeitung 2026-09-30: Fakten-Zeile, 4 Preiskacheln, FAQ, Platzhalter (gelb, vor Livegang entfernen) */
.vorschlag-platzhalter{background:#fff4c2;border:1px dashed #c9a400;border-radius:10px;padding:.5rem .8rem;color:#6b5600;font-size:.95rem}
.price-tiles-4{grid-template-columns:repeat(4,1fr)}
.price-tiles-4 .price-tile:nth-child(4){background:var(--accent-wash);border-color:transparent}
@media (max-width:900px){.price-tiles-4{grid-template-columns:repeat(2,1fr)}}
/* Unter den Preiskarten: zwei kurze fette Angaben nebeneinander (Kunde 2026-10-26, Variante D ohne Nebensatz; vorher graue Zeile wie Kleingedrucktes) */
.price-facts{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.6rem}
.price-facts li{font-size:1.2rem;font-weight:700;color:var(--blue-ink);text-align:center}
.channels-more{margin:-1.4rem 0 2.6rem;color:var(--ink-soft)}
.faq details{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:1rem 1.3rem;margin-bottom:.8rem}
.faq summary{cursor:pointer;font-weight:800;color:var(--blue-ink)}
.faq details p{margin:.6rem 0 0}

/* Bilder 2026-09-30: 3er-Reihe 'Lernen geht ueberall', 4 Fotokarten 'Fuer wen' */
.shots-row{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.shots-row .shot{margin:0}.shots-row .shot img{height:clamp(240px,26vw,340px);object-fit:cover}
@media (max-width:700px){.shots-row{grid-template-columns:1fr}}
@media (min-width:1000px){.for-grid{grid-template-columns:repeat(4,1fr);gap:1.2rem}.for-card h3{font-size:1.2rem;margin:1rem .6rem .3rem}.for-card p{margin:0 .6rem;font-size:1rem}}
.for-art.photo{aspect-ratio:3/2}

/* Kompakter (Kunde 2026-09-30: Vers-Band und CTA-Bloecke viel zu gross) */
.verse{padding-block:clamp(2.2rem,4.5vw,3.4rem)}
.verse-ar{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.75;margin:.2rem 0 .5rem}
.verse-de{font-size:clamp(1rem,1.4vw,1.12rem);margin-bottom:.35rem}
.verse-src{font-size:1.25rem}
.verse .orn{width:min(230px,60%);height:22px;margin-block:0 .9rem}
.verse .orn:last-child{margin:1rem auto 0}
.cta{padding-top:clamp(2.4rem,5vw,3.6rem);padding-bottom:calc(clamp(2.4rem,5vw,3.6rem) + 62px);border-radius:36px 36px 0 0}
.cta h2{font-size:clamp(1.7rem,2.9vw,2.3rem);max-width:none;margin-bottom:.4em}
.cta p{font-size:1.08rem;max-width:40em}
.cta::before{height:30px;bottom:66px;background-size:320px 30px;opacity:.5}
.cta::after{width:clamp(76px,7.5vw,112px);top:clamp(20px,2.4vw,32px)}
.ayah{margin-top:1.3rem}
.ayah .ar{font-size:1.5rem}

/* CTA-Abschluss (Kunde 2026-09-30, Variante 2): statt Endlos-Rankenreihe eine einzelne Ranke mittig ueber der Welle */
.cta::before{left:50%;right:auto;width:240px;translate:-50% 0;background-repeat:no-repeat;background-size:contain;background-position:center;opacity:.75;height:30px;bottom:62px}

/* Preiskarten (Kunde 2026-09-30, Variante B) */
/* Probestunde: Handschrift, zweizeilig, mittig ueber den Preiskarten (Kunde 2026-10-26, Variante A; vorher rosa Pille wie die Einzel-Karte) */
.price-free{display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center;margin:0 auto 1.8rem}
.price-free b{font-family:var(--font-hand);font-weight:700;font-size:clamp(1.9rem,2.6vw,2.3rem);line-height:1.1;color:var(--accent)}
.price-free span{color:var(--ink-soft);font-size:1rem}
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start}
.price-card{border-radius:28px;padding:1.6rem 1.5rem 1.2rem}
.price-card:nth-child(1){background:var(--accent-soft)}.price-card:nth-child(2){background:var(--blue-soft)}.price-card:nth-child(3){background:var(--cream)}
.price-card h3{margin:0 0 .2rem}
.price-card .sub{color:var(--ink-soft);font-size:.98rem;margin:0 0 .8rem}
.price-card .from{font-size:2.3rem;font-weight:800;color:var(--blue-ink);line-height:1;margin:0 0 .9rem}
.price-card .from small{font-size:1rem;font-weight:700;color:var(--ink-soft)}
.price-card ul{list-style:none;margin:0;padding:0}
.price-card li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px dashed rgba(26,53,82,.22);font-size:1.1rem}
.price-card li:last-child{border-bottom:0}
.price-card li b{color:var(--blue-ink)}.price-card li b small{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
@media (max-width:860px){.price-cards{grid-template-columns:1fr}}

/* Preiskarten: Dauer+Preis als kleine Pillen (Kunde 2026-09-30, Variante 3) */
.price-card ul{display:flex;flex-wrap:wrap;gap:.5rem}
.price-card li{border:0;background:rgba(255,255,255,.7);border-radius:999px;padding:.35rem .9rem;gap:.5rem;font-size:1.02rem}
.price-card li:last-child{border:0}
.price-card li span{color:var(--ink-soft)}

/* Akademiker-Bereich (2026-09-30) */
.aka-chips{margin-top:0}.aka-chips li{font-size:1.05rem}
.aka-teaser h2,.aka-teaser p{color:#fff}.aka-teaser .eyebrow{color:#f2cfda}
.aka-teaser::before{display:none}

/* Buchseiten (gestaltete Symbol-Cover, keine Original-Cover) */
.book-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.book-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;text-decoration:none;color:var(--ink);padding:1.4rem 1rem 1.2rem;border-radius:26px;background:var(--paper-2);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.book-tile:hover{transform:translateY(-4px);box-shadow:0 22px 30px -24px rgba(125,44,69,.6)}
.book-tile b{color:var(--blue-ink);font-size:1.05rem;line-height:1.3;margin-top:.8rem}
.book-tile > span:last-child{color:var(--ink-soft);font-size:.95rem}
.book-cover{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:130px;aspect-ratio:3/4;padding:1rem .8rem 1rem 1.2rem;border-radius:4px 14px 14px 4px;color:#fff;text-align:center;box-shadow:inset 8px 0 0 rgba(0,0,0,.14),0 16px 22px -14px rgba(26,53,82,.7);transform:rotate(-3deg)}
.book-cover::after{content:"";position:absolute;inset:10px 10px 10px 18px;border:1.5px solid rgba(255,255,255,.45);border-radius:3px 9px 9px 3px;pointer-events:none}
.book-cover .ar{font-size:1.15rem;line-height:1.5}
.book-cover .de{font-family:var(--font-head);font-weight:700;font-size:.95rem;line-height:1.25}
.book-cover small{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.bc-mauve{background:linear-gradient(160deg,#b25370,#7d2c45)}
.bc-blue{background:linear-gradient(160deg,#4176b0,#204064)}
.bc-cream{background:linear-gradient(160deg,#f3ece6,#d9cdc2);color:var(--blue-ink)}.bc-cream::after{border-color:rgba(26,53,82,.3)}
.bc-ink{background:linear-gradient(160deg,#204064,#1a3552)}
.book-cover.big{width:min(260px,70%);padding:2rem 1.6rem 2rem 2.2rem;gap:1rem}
.book-cover.big .ar{font-size:1.9rem}.book-cover.big .de{font-size:1.5rem}.book-cover.big small{font-size:.85rem}
.book-cover-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.cover-note{font-size:.85rem;color:var(--ink-soft);margin:0}
.book-facts{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.4rem;margin:0 0 1.4rem}
.book-facts dt{font-weight:800;color:var(--blue-ink)}
.book-facts dd{margin:0;color:var(--ink-soft)}
.book-facts .ar{font-size:1.25rem;color:var(--accent-deep)}
@media (max-width:960px){.book-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.book-facts{grid-template-columns:1fr;gap:.1rem}.book-facts dd{margin-bottom:.6rem}}

.book-cover .de{font-size:.8rem;hyphens:auto}

/* Startseite ohne lila Schlussblock (Kunde 2026-09-30): Buttons unter den Schritten, Ayah als ruhiger Abschluss */
.steps-cta{justify-content:center;margin-top:2.4rem}
/* Ayah am Ende der Startseite: schmaler Kasten im Stil des Zitat-Kastens .tquote, duenner Rand links, ohne Anfuehrungszeichen, Quelle unter dem Kasten (Kunde 2026-10-16) */
.ayah-end{text-align:center;margin-top:3.4rem}
.ayah-box{display:inline-block;padding:.8rem 1.5rem;border-radius:16px;background:var(--accent-wash);border-left:3px solid var(--accent-mid)}
.ayah-box .ar{font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--accent-deep);margin:0;line-height:1.6}
.ayah-box .de{font-family:var(--font-hand);font-weight:700;font-size:1.35rem;line-height:1.25;color:var(--accent-deep);margin:.1rem 0 0}
.ayah-end .src{font-size:.95rem;color:var(--ink-soft);margin:.6rem 0 0}

/* Hero ohne Buttons (Kunde 2026-09-30): Chips direkt unter dem Text */
.hero .lead + .chips{margin-top:1.4rem}

/* Hero ohne Buttons: Text und Bild wieder etwas groesser (Kunde 2026-09-30) */
@media (min-width:861px){
.hero .lead{font-size:clamp(1.12rem,1.6vw,1.26rem);line-height:1.62}
.hero-art{--aw:min(490px,calc((100vh - 160px) * .70))}
}

.hero .lead strong{font-weight:800;color:var(--blue-ink)}

/* Social-Buttons (eigene neutrale Symbole, keine Firmenlogos) */
.social-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.social-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem .5rem .8rem;border-radius:999px;background:#fff;border:1.5px solid var(--accent-mid);color:var(--accent-deep);font-weight:700;font-size:.98rem;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.social-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.channels-more{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.ch-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);margin-bottom:.7rem;font-style:normal}
.ch-ico svg{width:22px;height:22px}
.wa-float{position:fixed;left:1.1rem;bottom:1.1rem;z-index:40;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem .7rem .9rem;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 8px 20px -6px rgba(125,44,69,.7);transition:background .2s,transform .2s}
.wa-float:hover{background:var(--accent-deep);color:#fff;transform:translateY(-2px)}
@media (max-width:600px){.wa-float span{display:none}.wa-float{padding:.8rem}}
@media print{.wa-float{display:none}}

/* Offizielle Symbole (Simple Icons, CC0) in Markenfarben – Ausnahme nur fuer Kontakt-Links */
.ico{display:inline-block;width:20px;height:20px;flex:none;font-style:normal;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico-wa{--m:url("../img/social/whatsapp.svg");background:#25D366}
.ico-tg{--m:url("../img/social/telegram.svg");background:#26A5E4}
.ico-ig{--m:url("../img/social/instagram.svg");background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.social-btn:hover .ico{background:#fff}
.ch-ico .ico{width:24px;height:24px}
.ch-ico:has(.ico-wa){background:#e7f9ee}.ch-ico:has(.ico-tg){background:#e6f4fb}
.wa-float{background:#25D366;box-shadow:0 8px 20px -6px rgba(18,140,78,.6)}
.wa-float:hover{background:#1ebe5a}
.wa-float .ico{background:#fff;width:22px;height:22px}

/* Schwebender WhatsApp-Button als runder Kreis (Kunde 2026-10-10) */
.wa-float{width:56px;height:56px;padding:0;justify-content:center;border-radius:50%;gap:0}
.wa-float span{display:none}
.wa-float .ico{width:28px;height:28px}
@media (max-width:600px){.wa-float{width:52px;height:52px;padding:0}.wa-float .ico{width:26px;height:26px}}

/* Kanalwahl im Formular mit Symbolen */
.choice .ico,.choice .ico-mail{width:20px;height:20px}
.choice .ico-mail{color:var(--accent-deep)}
.choice input:checked + span .ico{background:#fff}
.choice input:checked + span .ico-mail{color:#fff}

/* Hamza (U+02BE) enger an die Nachbarbuchstaben (Kunde 2026-10-10) */
.hz{margin:0 -.1em 0 -.08em}
h1 .hz,h2 .hz,h3 .hz,h4 .hz,.welcome-de .hz{margin:0 -.02em}
/* Hamza-Zeichen allein im Text (FAQ Koran/Quran): nicht heranziehen, etwas groesser */
.hz-solo{display:inline-block;min-width:1.6em;padding:0 .3em;margin:0 .1em;border-radius:7px;background:var(--accent-wash);border:1px solid var(--accent-mid);text-align:center;line-height:1.35;vertical-align:.02em}  /* FAQ: allein stehendes Hamza-Zeichen im Kaestchen (Kunde 2026-10-26) */
.hz-solo .hz{margin:0;display:inline-block;transform:translateY(.3em);font-size:1.4em;font-weight:700;line-height:1;color:var(--blue-ink)}
.hamza-ar{font-size:1.75em;line-height:0;margin:0 .1em;color:var(--blue-ink)}

/* Kanalwahl im Formular wie die Footer-Buttons: immer weiss, Symbol in Markenfarbe; Auswahl = kraeftiger lila Rand + zarter Flieder-Ton (Kunde 2026-10-10) */
.choice span{background:#fff;border:1.5px solid var(--accent-mid);color:var(--blue-ink)}
.choice input:checked + span{background:var(--accent-wash);border:2.5px solid var(--accent);color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft)}
.choice input:checked + span .ico-wa{background:#25D366}
.choice input:checked + span .ico-tg{background:#26A5E4}
.choice input:checked + span .ico-mail{color:var(--accent-deep)}

/* Ueber uns – Team: Weg-Grafik links, kleines Zitat rechts (Kunde 2026-10-10) */
.route{position:relative;margin-top:2rem;max-width:30rem}
.route svg{width:100%;height:auto;overflow:visible}
.route text{font-family:var(--font-hand);font-size:22px;fill:var(--accent-deep);font-weight:700}
.tquote{margin-top:1.4rem;padding:.9rem 1.2rem;border-radius:20px;background:var(--accent-wash);border-left:5px solid var(--accent-mid)}
.tquote p{font-family:var(--font-hand);font-size:1.45rem;line-height:1.25;color:var(--accent-deep);margin:0}

/* Platz fuer den schwebenden WhatsApp-Button unter dem Footer (sonst verdeckt er Impressum) */
@media (max-width:860px){.footer-legal{padding-bottom:4.5rem}}

/* Kontakt: Frage ueber den Kanal-Kacheln, Formular nur noch WhatsApp (Kunde 2026-10-10) */
.channels-head{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 1.2rem}
.btn-wa{display:inline-flex;align-items:center;gap:.55rem}
.btn-wa .ico{background:#fff;width:22px;height:22px}

/* === Startseiten-Kopf Variante A (Kunde 2026-10-12): grosses Ain statt Foto-Collage, Kreis, Eck-Ornament und Chips === */
.hero::before,.hero::after{display:none}
@media (max-width:860px){.page-start .hero-copy{padding-bottom:.5rem}}
/* Fachliche Abschnitte ohne Ranke unter der Ueberschrift (Kunde 2026-10-12): Lehrmaterial, Unterrichte, Studium, Kontakt-FAQ */
.section-head.plain::after{display:none}

/* Original-Buchcover (Kunde 2026-10-12): echte Cover statt Symbol-Cover */
.book-img{display:block;height:180px;width:auto;max-width:100%;object-fit:contain;border-radius:2px 6px 6px 2px;box-shadow:0 14px 22px -12px rgba(26,53,82,.45),0 2px 4px rgba(26,53,82,.15)}
.book-img.big{height:auto;width:min(300px,80%)}

/* Ranken (Blumen) nur noch im Hadith-Band der Startseite (.verse .orn) – Kunde 2026-10-14: sonst ueberall entfernt */
.section-head::after,.worry-head::after,.page-hero-text::after,.section-blue::before,.cta::before{display:none}

/* ------------------------------------------------ Ausklapp-Menues (Kunde 2026-10-14: alle Unterseiten im Menue)
   Hauptpunkt bleibt ein Link; Pfeil-Button daneben oeffnet per Klick/Tippen/Tastatur (.open, main.js), am Computer auch beim Darueberfahren.
   Schliesst bei Seitenwechsel, Zurueck (pageshow/popstate), Esc und Klick daneben. */
.nav a[aria-current="true"]::after{transform:scaleX(1)}
.sub-toggle{display:none}
@media (min-width:1141px){
  .nav .has-sub{position:relative;display:flex;align-items:center}
  .nav .has-sub > a{padding-right:.3rem}
  .nav .has-sub > a::after{right:.3rem}
  .sub-toggle{display:grid;place-items:center;width:26px;height:30px;margin:0 .35rem 0 0;padding:0;background:none;border:0;border-radius:8px;color:var(--blue-ink);cursor:pointer}
  .sub-toggle svg{transition:transform .2s}
  .sub-toggle:hover{color:var(--accent-deep);background:var(--accent-wash)}
  .nav .sub{position:absolute;top:100%;left:-.2rem;z-index:60;display:block;min-width:16.5rem;margin:0;padding:.45rem;list-style:none;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 40px -22px rgba(26,53,82,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
  .nav .has-sub:hover > .sub,.nav .has-sub.open > .sub{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s,visibility 0s}
  .nav .has-sub:hover > .sub-toggle svg,.nav .has-sub.open > .sub-toggle svg{transform:rotate(180deg)}
  .nav .sub a{padding:.55rem .85rem;border-radius:12px;font-size:.96rem;font-weight:600}
  .nav .sub a::after{display:none}
  .nav .sub a:hover,.nav .sub a:focus-visible{background:var(--accent-wash);color:var(--accent-deep)}
  .nav .sub a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-deep)}
}
@media (max-width:1140px){
  .nav.open{max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
  .nav .sub{display:block;list-style:none;margin:0;padding:.25rem 0 .55rem 1.1rem;border-bottom:1px solid var(--line)}
  .nav .has-sub > a{border-bottom:0;padding-bottom:.35rem}
  .nav .sub-self{display:none}
  .nav .sub a{padding:.5rem .2rem;font-size:1rem;font-weight:600;color:var(--ink-soft);border-bottom:0}
  .nav .sub a[aria-current="page"]{color:var(--accent-deep)}
  .nav a[aria-current="true"]{color:var(--accent-deep)}
}

/* Papier-Textur (Kunde 2026-10-15, Variante 3 'zart'): Aquarellpapier wie auf dem Flyer, nahtlose Kachel aus build\textur-web.ps1,
   per multiply ueber Papier- und Creme-Flaechen. Karten, Fotos, blaue/lila Bloecke und der Seitenkopf bleiben glatt. */
body,.worry,.section-cream,.site-footer{background-image:url("../img/papier-textur.jpg");background-size:600px 600px;background-blend-mode:multiply}

/* Hero: Brief vom Team (Kunde 2026-10-16) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero .welcome{margin-bottom:1.2rem}
.hero-letter p{font-size:clamp(1.1rem,1.5vw,1.16rem);line-height:1.6;color:var(--ink);margin:0 0 .8rem}
.hero-letter strong{font-weight:800;color:var(--blue-ink)}
.hero-letter .hl-sign{font-family:var(--font-hand);font-weight:700;font-size:1.75rem;line-height:1.1;color:var(--accent);margin:1.1rem 0 0}
.hl-smile{display:inline-block;margin-left:.3em;transform:rotate(-6deg)}

/* Unterseiten: gewaehlter Rahmen C mit vier originalen Arabesken-Ecken (2026-10-16). */
.page-hero{height:auto;min-height:0;padding:35px 0;background:var(--cream);border-radius:0;overflow:hidden}
.page-hero::before,.page-hero::after,.page-hero-deco{display:none}
.page-hero .wrap{position:relative}
.page-hero .book-frame{position:relative;min-height:285px;border:1px solid var(--accent-mid);padding:45px 100px;text-align:center;display:flex;align-items:center;justify-content:center}
.page-hero .page-hero-text{position:relative;z-index:1;max-width:760px;width:100%;margin:auto}
.page-hero .eyebrow{font-family:var(--font-hand);font-size:1.7rem;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--accent-deep);margin:0 0 12px}
.page-hero h1{font-size:clamp(2.8rem,5vw,4.2rem);line-height:1.08;margin:0 0 20px}
.page-hero .lead{max-width:34em;font-size:1.15rem;line-height:1.7;margin:0 auto}
.page-hero .frame-orn{position:absolute;width:90px;height:90px;background:var(--cream) url('../img/ecke.svg') center/contain no-repeat;opacity:.8;pointer-events:none}
.page-hero .frame-tl{top:-1px;left:-1px;transform:rotate(-90deg)}
.page-hero .frame-tr{top:-1px;right:-1px}
.page-hero .frame-bl{bottom:-1px;left:-1px;transform:rotate(180deg)}
.page-hero .frame-br{bottom:-1px;right:-1px;transform:rotate(90deg)}
@media(max-width:860px){
 .page-hero{height:auto;min-height:0;padding:24px 0}
 .page-hero .book-frame{min-height:300px;padding:48px 24px}
 .page-hero .frame-orn{width:55px;height:55px}
 .page-hero h1{font-size:2.8rem;overflow-wrap:anywhere}
 .page-hero .lead{font-size:1.08rem}
}
@media(max-width:480px){.page-hero h1{font-size:2.2rem;hyphens:auto;overflow-wrap:break-word}}
/* Rahmenlinie ueber den Ornament-Hintergruenden: durchgehend ohne Luecken. */
.page-hero .book-frame::after{content:"";position:absolute;inset:-1px;border:1px solid var(--accent-mid);pointer-events:none;z-index:2}
/* Abstand Variante A, vom Kunden gewaehlt: Unterseitenkopf zum ersten Inhalt. */
.page-hero + .section{padding-top:48px}
/* Kunde 2026-10-16: Variante 1 - vier Eckornamente ohne Rahmenlinien. */
.page-hero .book-frame{border:0}
.page-hero .book-frame::after{display:none}
.page-hero .frame-orn{background-color:transparent}
/* Geschlossener Rahmen, vollere Ornamente und identischer Innenabstand an allen Ecken. */
.page-hero .book-frame{--orn-inset:20px;border:1px solid var(--accent-mid);padding:55px 120px}
.page-hero .book-frame::after{display:block}
.page-hero .frame-orn{background-image:url('../img/ecke-voll.svg');background-color:transparent;opacity:1}
.page-hero .frame-tl{top:var(--orn-inset);left:var(--orn-inset)}
.page-hero .frame-tr{top:var(--orn-inset);right:var(--orn-inset)}
.page-hero .frame-bl{bottom:var(--orn-inset);left:var(--orn-inset)}
.page-hero .frame-br{bottom:var(--orn-inset);right:var(--orn-inset)}
@media(max-width:860px){.page-hero .book-frame{--orn-inset:14px;padding:76px 28px}}
/* Kompakter Unterseitenkopf: kleinere Schrift, Ornamente und Innenabstaende. */
.page-hero{padding:22px 0}
.page-hero .book-frame{--orn-inset:8px;min-height:220px;padding:32px 100px}
.page-hero .frame-orn{width:72px;height:72px}
.page-hero .eyebrow{font-size:1.4rem;margin-bottom:8px}
.page-hero h1{font-size:clamp(2rem,3.5vw,3rem);line-height:1.12;margin-bottom:14px}
.page-hero .lead{font-size:1.05rem;line-height:1.6;max-width:38em}
@media(max-width:860px){
 .page-hero{padding:16px 0}
 .page-hero .book-frame{--orn-inset:7px;min-height:235px;padding:48px 24px}
 .page-hero .frame-orn{width:44px;height:44px}
 .page-hero .eyebrow{font-size:1.3rem}
 .page-hero h1{font-size:2.1rem}
 .page-hero .lead{font-size:1rem}
}
@media(max-width:480px){.page-hero h1{font-size:1.9rem}}
/* Weitere Verkleinerung der Schrift im Unterseitenkopf auf Kundenwunsch. */
.page-hero .eyebrow{font-size:1.15rem;margin-bottom:7px}
.page-hero h1{font-size:clamp(1.65rem,2.6vw,2.25rem);margin-bottom:12px}
.page-hero .lead{font-size:.95rem;line-height:1.55}
@media(max-width:860px){.page-hero .eyebrow{font-size:1.1rem}.page-hero h1{font-size:1.7rem}.page-hero .lead{font-size:.95rem}}
@media(max-width:480px){.page-hero h1{font-size:1.6rem}}
/* Rahmen und Arabesken ausschliesslich auf Ueber uns und Stimmen. */
body:not(.page-ueber-uns):not(.page-stimmen) .page-hero .book-frame{border:0}
body:not(.page-ueber-uns):not(.page-stimmen) .page-hero .book-frame::after,
body:not(.page-ueber-uns):not(.page-stimmen) .page-hero .frame-orn{display:none}
/* Flacher Seitenkopf: keine grosse Mindesthoehe, kleinere blaue Titel. */
.page-hero{padding:14px 0}
.page-hero .book-frame{min-height:0;padding:24px 92px}
.page-hero .eyebrow{font-size:1.05rem;line-height:1.25;margin-bottom:5px}
.page-hero h1{font-size:clamp(1.5rem,2vw,1.85rem);line-height:1.15;margin-bottom:9px}
.page-hero .lead{font-size:.95rem;line-height:1.5}
.page-hero .frame-orn{width:52px;height:52px}
@media(max-width:860px){
 .page-hero{padding:12px 0}
 .page-hero .book-frame{min-height:0;padding:24px 42px}
 .page-hero .frame-orn{width:32px;height:32px}
 .page-hero h1{font-size:1.5rem}
 .page-hero .eyebrow{font-size:1.05rem}
 .page-hero .lead{font-size:.9rem}
}
@media(max-width:480px){.page-hero h1{font-size:1.4rem}.page-hero .book-frame{padding:22px 32px}}
/* Hero kompakter, damit er bei 100 % Zoom (Laptop, Windows-Skalierung 125 %) samt Welle auf einen Bildschirm passt (Kunde 2026-10-16) */
@media (min-width:861px){
.page-start .hero-copy{padding-bottom:.6rem}
.page-start .welcome-icon{width:clamp(70px,6.2vw,90px)}
.page-start .welcome-de{font-size:clamp(1.9rem,2.7vw,2.35rem)}
.page-start .welcome-de .nowrap{display:block}  /* Begruessung bleibt zweizeilig */
.page-start .welcome-ar{font-size:clamp(1.4rem,1.9vw,1.7rem)}
.page-start .hero .welcome{margin-bottom:.9rem}
.page-start .hero-letter .hl-sign{margin-top:.8rem}
.page-start .hero-ribbon{margin-top:-22px}
}
/* Am Computer insgesamt etwas kleiner, damit man bei 100 % Zoom mehr auf einen Blick sieht (Kunde 2026-10-16); Handy unveraendert */
@media (min-width:861px){
body{font-size:1.0625rem;line-height:1.7}
h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
h3{font-size:1.2rem}
.eyebrow{font-size:1.45rem}
.lead{font-size:clamp(1.1rem,1.5vw,1.25rem)}
.section{padding:clamp(2.8rem,5.5vw,4.6rem) 0}

.section-head{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.btn{font-size:.98rem;padding:.85rem 1.6rem}
.fact b{font-size:clamp(2rem,3.4vw,2.8rem)}
.facts-light{margin-top:2.4rem;padding-top:1.8rem}
.facts-light .fact b{font-size:clamp(1.8rem,3vw,2.4rem)}
.answer h3{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.way h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.price-tile .big{font-size:clamp(1.9rem,3.2vw,2.5rem)}
.price-card .from{font-size:2rem}
.cta h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.channels-head{font-size:clamp(1.35rem,2.2vw,1.75rem)}
.shot figcaption{font-size:1.55rem}
.verse-ar{font-size:clamp(1.4rem,2.3vw,1.8rem)}
}

/* Einheitliche Hoehe aller Unterseitenkoepfe, einzeilige Beschreibungen, Olivenzweig. */
.page-hero{height:208px;min-height:208px;padding:14px 0}
.page-hero .book-frame{height:180px;min-height:180px;padding:18px 80px 42px}
.page-hero .page-hero-text{max-width:100%;display:grid;grid-template-rows:22px 44px 22px;gap:3px;align-items:center}
.page-hero .eyebrow,.page-hero h1,.page-hero .lead{margin:0}
.page-hero h1{display:flex;align-items:center;justify-content:center;font-size:clamp(1.4rem,2vw,1.85rem)}
.page-hero .lead{max-width:none;white-space:nowrap;font-size:.9rem;line-height:1.5}
.page-hero .hero-olive{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:min(440px,75%);height:30px;object-fit:contain}
.page-ueber-uns .hero-olive,.page-stimmen .hero-olive{display:none}
@media(max-width:860px){
 .page-hero{height:224px;min-height:224px;padding:12px 0}
 .page-hero .book-frame{height:200px;min-height:200px;padding:18px 14px 42px}
 .page-hero .page-hero-text{grid-template-rows:22px 66px 22px;gap:3px}
 .page-hero h1{font-size:1.3rem;hyphens:auto}
 .page-hero .lead{font-size:clamp(.68rem,2.9vw,.85rem)}
 .page-hero .hero-olive{height:25px;bottom:7px}
}
@media(max-width:860px){.page-hero .lead{font-size:.85rem}}
/* Hero neu (Kunde 2026-10-16): links Begruessung, Slogan (H1) und Fakten auf hellblauem Feld, rechts der Brief als Karte; kein ain mehr.
   Proportionen: Symbol, Slogan und Text im blauen Feld stehen auf einer gemeinsamen linken Kante (Feld ragt um sein Innen-Padding nach links). */
.page-start .hero-grid{grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(1.8rem,4.5vw,4.5rem);padding-bottom:1.4rem}
.page-start .hero-copy{align-self:center;padding-bottom:0}
.page-start .hero .welcome{margin-bottom:0}
.page-start h1.hero-slogan{font-family:var(--font-hand);font-weight:700;font-size:clamp(1.6rem,2.2vw,1.95rem);font-size-adjust:none;line-height:1.1;letter-spacing:0;color:var(--accent);margin:1rem 0 0}
.hero-facts{--fp:1.4rem;display:flex;width:fit-content;max-width:calc(100% + var(--fp));gap:1.6rem 2.4rem;margin:1.4rem 0 0 calc(-1 * var(--fp));padding:1rem var(--fp);border-radius:20px;background:var(--blue-soft)}
.hero-facts p{margin:0;flex:0 1 auto;min-width:12.5rem}
.hero-facts b{display:block;white-space:nowrap;font-size:1.3rem;font-weight:800;line-height:1.2;color:var(--blue-ink)}
.hero-facts span{display:block;width:0;min-width:100%;margin-top:.15rem;font-size:.93rem;line-height:1.4;color:var(--blue-deep)}
.hero-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,2.6vw,2rem) clamp(1.4rem,2.8vw,2.2rem)}
.hero-card .hero-letter p:last-of-type{margin-bottom:0}
@media (max-width:860px){
  .page-start .hero-grid{grid-template-columns:1fr;gap:1.6rem;padding-bottom:2.4rem}
  .hero-facts{--fp:1.1rem;margin-left:0;gap:1.2rem;width:auto;max-width:none}
  .hero-facts p{min-width:0;flex:1 1 0}
  .hero-facts span{width:auto;min-width:0}
  .hero-facts b{font-size:1.15rem}
}
@media (max-width:560px){ .hero-facts{flex-direction:column;gap:.8rem} .hero-facts b{white-space:normal} }
@media (min-width:861px) and (max-width:1150px){ .hero-facts{flex-direction:column;gap:.7rem} .hero-facts p{min-width:0} }
/* Hero-Aufteilung (Kunde 2026-10-16, Endstand): mehr Luft unter dem Logo, Begruessung kleiner, Gruppe links kompakt;
   Oberkante "Herzlich" auf Hoehe der ersten Briefzeile (Innenabstand oben = Innenabstand der Karte), blaues Feld unten buendig mit der Karte */
@media (min-width:861px){
.page-start .hero{padding-top:clamp(2.2rem,6vh,3.4rem)}
.page-start .hero-grid{align-items:stretch}
.page-start .hero-copy{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;padding-top:clamp(1.4rem,2.6vw,2rem)}
.page-start .welcome-icon{width:clamp(72px,6.2vw,92px)}
.page-start .welcome-de{font-size:clamp(1.85rem,2.5vw,2.25rem)}
.page-start .welcome-ar{font-size:clamp(1.4rem,1.8vw,1.65rem)}
.page-start h1.hero-slogan{font-size:clamp(1.7rem,2.3vw,2.05rem);margin-top:auto}
.page-start .hero-facts{margin-top:auto;padding-block:1.15rem}
.page-start .hero-facts b{font-size:1.4rem}
}
/* Feld nur nach links ueberstehen lassen, wenn genug Rand da ist */
@media (max-width:1260px){.hero-facts{margin-left:0}}
/* Effekt am blauen Feld (Kunde 2026-10-16: durchgehend): ein Lichtstreifen laeuft staendig ruhig am Rand entlang, 6 s pro Runde (nur transform) */
.hero-facts{position:relative;isolation:isolate;overflow:hidden}
.hero-facts::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;z-index:-2;transform:translate(-50%,-50%) rotate(0deg);background:conic-gradient(from 0deg,transparent 0 76%,rgba(155,69,96,.25) 84%,var(--accent) 93%,#fff 96%,transparent 100%);animation:fx-spin 6s linear infinite;pointer-events:none}
.hero-facts::after{content:"";position:absolute;inset:2.5px;border-radius:17.5px;background:var(--blue-soft);z-index:-1;pointer-events:none}
@keyframes fx-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-facts::before{animation:none;opacity:0}}
/* "Schoen, dass du hier bist!" im Brief: zarte rosa Flaeche hinter dem Satz, gerade, leicht runde Ecken (Kunde 2026-10-16, Variante B) */
.hl-mark{background:#f1e3e7;border-radius:5px;padding:.08em .3em;margin:0 -.3em;color:var(--blue-ink);font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Startseite: eigenstaendige Ayah vor dem abschliessenden Hadith. */
.page-start .section-ayah{padding-block:clamp(2.2rem,4.5vw,3.4rem)}
.page-start .section-ayah .ayah-end{margin-top:0}
/* Startseite: Schatten Variante 2, weich und warm, vom Kunden gewaehlt. */
.page-start .hero-facts,.page-start .hero-card{box-shadow:0 12px 28px -12px rgba(125,44,69,.28),0 3px 8px -4px rgba(26,53,82,.1)}

/* Orientierung, Unterrichts-Finder, Preisrechner und Kontaktalternativen. */
.page-jumps{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;padding-block:1rem;font-size:1rem}
.page-jumps a{display:inline-flex;align-items:center;min-height:44px}
.helper-panel{margin:1.8rem 0;border:1px solid var(--line);border-radius:18px;background:var(--paper-2);overflow:hidden}
.helper-panel>summary{padding:1.15rem 1.4rem;font-weight:700;color:var(--blue-ink);cursor:pointer}
.helper-body{padding:.4rem 1.4rem 1.5rem}
.helper-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start}
.helper-fields .field{min-width:0}.helper-fields label{display:block;font-weight:600;margin-bottom:.4rem}
.helper-fields select,.helper-fields input{width:100%;min-height:48px;padding:.7rem;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);color:var(--ink);font:inherit;font-size:1rem}
.helper-result{font-weight:600;color:var(--blue-ink);margin-top:1rem}.helper-note{font-size:1rem;color:var(--ink-soft)}
.helper-text-link{display:inline-block;padding:.6rem 0;font-size:1rem;font-weight:600}.for-more .helper-text-link{margin-left:1rem}
#fragen h3{margin-top:2rem}#copy-fallback{width:100%;min-height:150px}
#kontakt-form .btn-row{gap:.6rem}#kontakt-form .btn{white-space:normal}
@media(max-width:760px){.helper-fields{grid-template-columns:1fr}.for-more .helper-text-link{margin-left:0;display:block}.helper-body{padding-inline:1rem}}

/* Schmaler Handyheader: Logo, Menue und Suche bleiben innerhalb des Bildschirms. */
@media(max-width:560px){.site-header .brand{width:160px}.site-header .bar{gap:.4rem}.site-header .search-link{width:36px;height:44px}}
@media(max-width:380px){.menu-toggle{padding:.6rem .7rem;min-height:44px}.menu-toggle .menu-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.menu-toggle{gap:0}}
@media(max-width:760px){.split{grid-template-columns:minmax(0,1fr)}.split>*{min-width:0}.helper-body .btn{max-width:100%;white-space:normal}}

/* Ausklapp-Menues: alle Eintraege gleich – Punkt, fett, gleiche Groesse (Kunde 2026-10-23). */
.nav .sub a{position:relative;padding-left:2rem;font-weight:600}
.nav .sub a::before{content:"\2022";position:absolute;left:.85rem;color:var(--accent);font-weight:400}
@media(max-width:1140px){.nav .sub .sub-material-overview{display:block}}

/* Freigegebene Bildwelt 1, 2026-10-16 */
.page-start .home-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.page-start .home-photo-pair figure{margin:0}
.page-start .home-photo-frame{height:310px;border-radius:22px;background-image:url('../img/bildwelten/paar-a-ohne-taschkil-sin-web.jpg');background-size:200% auto;background-position:left center;background-repeat:no-repeat}
.page-start .home-photo-frame.right{background-position:right center}
.page-start .home-photo-pair figcaption{font-size:1rem;color:var(--blue-ink);margin-top:12px}
.page-start .for-card{padding:30px 22px!important;box-shadow:none!important;border:1px solid var(--line);background:var(--paper-2)}
.page-start .for-card h3{font-size:1.45rem!important;margin:0 0 14px!important}
.page-start .for-card p{margin:0!important;font-size:1.05rem!important}
.page-start .for-card::before{content:"";display:block;width:35px;height:3px;background:var(--accent-mid);margin-bottom:22px}
.page-start .for-grid{gap:20px}
@media(max-width:760px){.page-start .home-photo-pair{grid-template-columns:1fr}.page-start .home-photo-frame{height:250px}.page-start .for-card{padding:24px!important}}
@media(max-width:760px){.page-start .home-photo-frame{height:clamp(170px,44vw,250px)}}




/* Kompakter Quran-Abschnitt nach Kundenmarkierung */
#quran .quote-strip{margin-top:1.25rem}
/* Schreibweisen Koran/Quran fuer die Suche, dezent unter dem Hadith-Balken */
.spelling-note{margin:1rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}

/* FAQ: kompakter Abstand zwischen Seitenkopf, Themenlinks und Fragen. */
.page-haeufige-fragen #fragen{padding-top:24px}
.page-haeufige-fragen #fragen .page-jumps{padding-block:0;margin:0 0 20px;gap:4px 20px}
.page-haeufige-fragen #fragen .page-jumps+h3{margin-top:0}

/* Seitenkopf: Handschrift nur auf den beiden persönlichen Seiten. */
body:not(.page-ueber-uns):not(.page-stimmen):not([class^="page-lehrmaterial/"]) .page-hero .eyebrow{font-family:var(--font-body,Roboto,sans-serif);font-size:.8rem;font-weight:400;letter-spacing:.025em;color:var(--ink-soft)}
.page-hero .page-hero-text.no-eyebrow{grid-template-rows:44px 22px;min-height:94px;align-content:center}
@media(max-width:860px){.page-hero .page-hero-text.no-eyebrow{grid-template-rows:66px 22px;min-height:116px}}
/* 404: längere Erklärung lesbar umbrechen. */
.page-404 .page-hero .page-hero-text{grid-template-rows:22px auto auto}
.page-404 .page-hero .lead{white-space:normal;max-width:52rem;margin-inline:auto;line-height:1.45}
@media(max-width:480px){.page-404 .page-hero .lead{font-size:.8rem}}

/* Freigegeben: kompakte Seitenkoepfe, lesbare mobile Inhalte. */
.page-hero{height:180px;min-height:180px;padding:14px 0}
.page-hero .book-frame{height:152px;min-height:152px;padding:12px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.page-hero .page-hero-text,.page-hero .page-hero-text.no-eyebrow,.page-404 .page-hero .page-hero-text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:0;width:100%}
.page-hero .hero-olive{position:static;transform:none;flex:none;width:min(390px,75%);height:24px;margin:0}
@media(max-width:1024px){
 .page-hero{height:auto;min-height:176px;padding:12px 0}
 .page-hero .book-frame{height:auto;min-height:152px;padding:18px 20px;gap:12px}
 .page-hero .page-hero-text,.page-hero .page-hero-text.no-eyebrow{gap:10px;min-height:0}
 .page-hero h1{font-size:clamp(1.4rem,3.1vw,1.85rem);line-height:1.15;max-width:100%;overflow-wrap:break-word;text-wrap:balance}
 .page-hero .lead,.page-404 .page-hero .lead{white-space:normal;font-size:.95rem;line-height:1.5;max-width:48rem;overflow-wrap:break-word;text-wrap:pretty}
 .page-hero .hero-olive{height:24px;width:min(360px,80%)}
 .page-ueber-uns .page-hero .book-frame,.page-stimmen .page-hero .book-frame{padding:24px 38px}
 .split{grid-template-columns:minmax(0,1fr)}
 .split>*,.form,.field,.channel,.helper-fields>*{min-width:0}
 .nav .sub a{white-space:normal;overflow-wrap:break-word}
 .form .btn,.btn-row .btn{max-width:100%;white-space:normal;text-align:center;justify-content:center}
 .field input,.field textarea,.field select{font-size:1rem;min-width:0;max-width:100%}
 .table-wrap{max-width:100%}
 .page-jumps{gap:4px 16px}
 .page-jumps a{min-height:44px}
 .faq summary,.book-facts dd{overflow-wrap:break-word}
}
@media(max-width:560px){
 .section{padding-block:36px}
 .page-hero+.section{padding-top:28px}
 .page-haeufige-fragen #fragen{padding-top:20px}
 .book-grid{grid-template-columns:minmax(0,1fr);max-width:400px;margin-inline:auto}
 .subjects{grid-template-columns:minmax(0,1fr)}
 .quote-strip{padding:20px 18px}
 .book-img.big{width:min(300px,90%)}
 .form .btn-row{gap:10px}
}

.page-hero .page-hero-text{margin:0}
@media(max-width:1024px){.search-form input{min-width:0}}@media(max-width:560px){.search-form{flex-wrap:wrap}.search-form input{flex:1 1 100%;width:100%;font-size:1rem}.search-form .btn{min-height:44px}}

/* Freigegebener kompakter Footer, Variante 1. */
.site-footer{background-image:none;padding-top:0}.footer-ribbon{display:none}.footer-grid{grid-template-columns:.85fr 1.05fr 1.3fr;padding:28px 0 24px;gap:32px}.footer-logo{width:155px}.footer-slogan{font-size:1.35rem;margin:10px 0 0}.site-footer h2{font-size:1rem;margin:0 0 10px}.footer-list{font-size:.92rem;line-height:1.5}.footer-list li{padding:3px 0}.site-footer .social-row{gap:6px;margin-top:12px}.site-footer .social-btn{font-size:.82rem;padding:7px 10px;min-height:40px;box-shadow:none}.site-footer .social-btn .ico{width:17px;height:17px}.footer-legal{padding:13px 0 16px;font-size:.8rem}.footer-grid>div:last-child .footer-list{display:grid;grid-template-columns:1fr 1fr;gap:3px 18px}.site-footer .wrap{max-width:1160px}.footer-brand{align-self:start}@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;gap:22px;padding:24px 0}.footer-brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:15px}.footer-slogan{margin:0}.footer-grid>div:last-child .footer-list{grid-template-columns:1fr}.footer-legal{padding-bottom:22px}}@media(max-width:450px){.footer-grid{grid-template-columns:1fr}.footer-brand{flex-direction:column;align-items:flex-start}.footer-grid>div:last-child .footer-list{grid-template-columns:1fr 1fr}.footer-list a{display:inline-block;padding-block:5px}.footer-legal{gap:10px}.footer-logo{width:135px}}
.site-footer{background:#ede5df;border-top:1px solid #c99aaa}

/* Madinah: Lernaufbau als helle Blase passend zur Startseite. */
.book-learning-bubble{margin-top:1.5rem;padding:clamp(1.2rem,2.5vw,2rem);background:var(--paper-2);border:1px solid var(--line);border-left:4px solid #345b86;border-radius:28px;box-shadow:0 12px 28px -18px rgba(26,53,82,.25)}
.book-learning-bubble h3,.book-learning-bubble h4{margin:0 0 .8rem;font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.2}
.book-learning-bubble p{margin:0 0 .8rem;line-height:1.65;font-weight:400;color:var(--accent)}
.book-learning-bubble p:last-child{margin-bottom:0}
.book-learning-bubble .book-volume-highlight{color:var(--blue-ink);font-weight:700}
.book-learning-bubble a{color:var(--blue-ink);font-weight:600}

/* Studium: offene Themenliste links, nur die Erklaerung rechts als Blase. */
.study-support-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.study-support-layout .book-learning-bubble{margin-top:0}
.study-topic-group + .study-topic-group{margin-top:1.6rem}
.study-topic-group h3{font-size:1.3rem;color:var(--accent-deep);margin:0 0 .6rem}
.study-topic-group ul{margin:0;padding-left:1.2rem}
.study-topic-group li{padding:.3rem 0;line-height:1.5}
.study-topic-group li::marker{color:var(--accent)}
.study-topic-group .ar{color:var(--blue-ink);font-size:1.25rem;font-weight:700;margin-left:1.25rem;margin-right:0;display:inline-block;direction:rtl;unicode-bidi:isolate}
@media(max-width:1024px){.study-support-layout{grid-template-columns:1fr;gap:1.8rem}}

/* Sehr schmale Handys (2026-10-24): ueberlange Woerter in Ueberschriften umbrechen statt seitlich ueberlaufen (Notbremse; gezielte Trennstellen per ­ im Text). */
@media(max-width:400px){h1,h2,h3{overflow-wrap:break-word}}

/* Hero: Titel auf dem Brief, "Schoen, dass du hier bist!" links, Herz-Linie unter dem Slogan (Kunde 2026-10-26, Variante D + Platz 1) */
.hero-hello{display:block;margin-top:.7rem;font-size:1.12rem;line-height:1.3}
.page-start .hero-card{padding-top:0;overflow:hidden}
.hero .hero-card-title{margin:0 calc(-1 * clamp(1.4rem,2.8vw,2.2rem)) 1.1rem;padding:.95rem clamp(1.4rem,2.8vw,2.2rem) .85rem;background:var(--blue-soft);font-size:clamp(1.35rem,1.75vw,1.6rem);line-height:1.15;color:var(--blue-ink)}
.page-start .hero-slogan-wrap{margin-top:1rem}
@media (min-width:861px){.page-start .hero-slogan-wrap{margin-top:auto}}
.page-start .hero-slogan-wrap h1.hero-slogan{margin-top:0}
.heart-line{display:flex;align-items:center;gap:.6rem;margin-top:.55rem;line-height:1}
.heart-line::before,.heart-line::after{content:"";width:118px;height:1px;background:var(--accent-mid)}
.heart-line svg{width:14px;height:13px;flex:none}
/* Am Computer: Abstand unter den Karten etwas kleiner (Hero passt samt Welle auf den Laptop-Schirm 1536 x 680); links Mindestluft um Slogan und Herz-Linie (seit Brieftext B, 2026-10-26) */
@media (min-width:861px){
.page-start .hero-grid{padding-bottom:.5rem}
.page-start .hero-slogan-wrap{padding-top:1.6rem}
.page-start .heart-line{margin-bottom:1.6rem}
}

/* Ausklapp-Menue der hinteren Menuepunkte (Lehrmaterial) rechtsbuendig aufklappen, sonst ragt es bei ca. 1141-1220 px ueber den Rand und die Seite laesst sich seitlich schieben (2026-10-26) */
@media (min-width:1141px){.nav .has-sub:nth-last-child(-n+2) > .sub{left:auto;right:-.2rem}}

/* Hadith-Band kompakt (Kunde 2026-10-26: "zu gross"): eigener, kleinerer Innenabstand statt des allgemeinen Abschnitt-Abstands */
.section.verse{padding-block:clamp(2.2rem,3.5vw,3rem)}

/* Ueberschrift mittig ueber der Liste, Punkte als Karten nebeneinander (Kunde 2026-10-26, Variante A): Ueber uns (Lehrer, Schueler) und Buch-Baustein "So lernst du damit bei uns" – statt leerer linker Spalte */
.list-center > :first-child{text-align:center;margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.list-center .numlist,.list-center .checks{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.list-center li{flex:0 1 calc((100% - 2rem) / 3)}
.list-center.cols-4 li{flex-basis:calc((100% - 3rem) / 4)}
.list-center .checks li{padding:1.05rem 1.3rem 1.05rem 3.4rem;background:var(--paper-2);border:1px solid var(--line);border-radius:20px}
.section-cream .list-center .checks li{background:rgba(255,253,251,.7)}
.list-center .checks li::before{left:1.1rem;top:1.15rem}
.list-center + .wrap .for-more{text-align:center}
@media (min-width:861px) and (max-width:1100px){.list-center li,.list-center.cols-4 li{flex-basis:calc((100% - 1rem) / 2)}}
@media (max-width:860px){.list-center li,.list-center.cols-4 li{flex-basis:100%}}

/* Seitenkoepfe optisch mittig (Kunde 2026-10-26: oben und unten gleich viel Luft). Text + Olivenzweig wirkten 3-6 px zu hoch, weil Oberlaengen/Zweig-Grafik nicht bis an ihre Boxen reichen -> Inhalt per Innenabstand nach unten verschoben, Kopfhoehe unveraendert. Ueber uns/Stimmen (Rahmen) waren schon gleich. */
body:not(.page-ueber-uns):not(.page-stimmen) .page-hero .book-frame{padding-top:14px;padding-bottom:10px}
@media(max-width:1024px){
 body:not(.page-ueber-uns):not(.page-stimmen) .page-hero .book-frame{padding-top:21px;padding-bottom:15px}
 body[class^="page-lehrmaterial/"]:not(.page-ueber-uns):not(.page-stimmen) .page-hero .book-frame{padding-top:20px;padding-bottom:16px}
}
/* FAQ-Seite: Abschluss kompakt in einer Zeile im zartrosa Kasten, Button rechts (Kunde 2026-10-26, Variante C) */
.page-haeufige-fragen #fragen{padding-bottom:0}
.faq-end{padding-top:clamp(2rem,3.5vw,2.6rem);padding-bottom:clamp(2.6rem,4.5vw,3.6rem)}
.faq-end-box{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.6rem;padding:1.2rem 1.6rem;background:var(--accent-wash);border:1px solid var(--accent-soft);border-radius:22px}
.faq-end h2{font-size:clamp(1.4rem,2.2vw,1.75rem);margin-bottom:.3em}
.faq-end p{margin:0}
.faq-end .btn{flex:none}
@media(max-width:640px){.faq-end-box{flex-direction:column;align-items:flex-start}}
/* Preisseite: weniger Abstand zwischen Seitenkopf und "Probestunde: gratis" (Kunde 2026-10-26, Variante D) */
.page-preise .page-hero + .section{padding-top:30px}
@media(max-width:560px){.page-preise .page-hero + .section{padding-top:20px}}
/* Fachbegriffe: kurze Erklaerung in Klammern, etwas heller (Kunde 2026-10-26, Variante B) */
.term-ex{color:var(--ink-soft)}
/* Unterrichte "Arabische Sprache": vier Kacheln, Arabisch gross oben, Deutsch darunter (Kunde 2026-10-26, Variante D; vorher Liste mit grosser Luecke) */
.subject-tiles ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.subject-tiles li,.subject-tiles li:last-child{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:.2rem;padding:1rem .6rem;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.subject-tiles li .ar{font-size:1.75rem;line-height:1.5}
.subject-tiles .term-ex{display:block;font-size:.92rem}
@media(max-width:860px){.subject-tiles ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.subject-tiles ul{gap:.7rem}.subject-tiles li,.subject-tiles li:last-child{padding:.9rem .35rem;font-size:1rem;hyphens:auto;overflow-wrap:break-word}}
/* Abschnitts-Koepfe mittig, wenn darunter etwas Symmetrisches folgt (Karten, Kacheln, Bilder, Pillen) – Kunde 2026-10-26.
   Zweispaltige Abschnitte (Text neben Bild/Liste) und die Angebotstabelle bleiben bewusst linksbuendig. */
.head-mid{margin-inline:auto;text-align:center}
.head-mid::after{margin-inline:auto;background-position:center}
.head-mid ~ p{text-align:center}
.head-mid ~ .bubbles{justify-content:center}
.head-mid + .chips{justify-content:center}
/* Unterrichte, Qurʾan-Abschnitt: Foto genau so hoch wie die linke Spalte, unten buendig mit dem Hadith-Kasten (Kunde 2026-10-26, Variante C);
   Hinweis "Ob du ihn Koran ..." mittig ueber die ganze Breite darunter, mit Herz-Linie unter dem Satz (Kunde 2026-10-26, Variante C) */
#quran .quran-note{grid-column:1/-1;text-align:center}
#quran .quran-note .spelling-note{margin:0;font-size:1rem}
#quran .quran-note .heart-line{justify-content:center;margin-top:.45rem}
@media(min-width:1025px){
 #quran .split{align-items:stretch;row-gap:1.2rem}
 #quran .split-photo{position:relative}
 #quran .split-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}

/* Unterrichte, Kinderunterricht & Nachhilfe: Bausteine bilden das Wort اقرأ (iqraʾ – lies!), von rechts nach links (Kunde 2026-10-26, Variante B) */
.kid-art{width:100%;aspect-ratio:4/3;border-radius:var(--radius);background:var(--accent-soft);display:grid;place-items:center;padding:1rem}
.kid-word{display:grid;justify-items:center;gap:1.1rem}
.kid-blocks{display:flex;gap:.6rem;direction:rtl}
.kb{--s:clamp(2.9rem,11vw,4.8rem);display:grid;place-items:center;width:var(--s);aspect-ratio:1;border-radius:18px;font-family:var(--font-ar);font-size:calc(var(--s) * .62);line-height:1;padding-bottom:.16em;color:#fff;transform:rotate(var(--r,0deg));box-shadow:inset 0 -6px 0 rgba(0,0,0,.14),0 12px 20px -12px rgba(26,53,82,.5)}
.k-blue{background:var(--blue)}.k-berry{background:var(--accent)}.k-white{background:#fffdfb;color:var(--accent)}.k-soft{background:var(--blue-soft);color:var(--blue-ink)}
.kid-cap{margin:0;font-family:var(--font-hand);font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--blue-ink);line-height:1.2;text-align:center}
.kid-cap small{display:block;font-family:var(--font);font-size:.85rem;color:var(--ink-soft);margin-top:.2rem}
@media(max-width:420px){.kb{border-radius:14px}.kid-blocks{gap:.45rem}}
/* Unterrichte "Unsere Angebote": zwei kleine Karten statt Tabelle (Kunde 2026-10-26, Variante B; alle Faecher gelten fuer Frauen, Kinder und Maenner); Titel als farbiger Kopf wie die Brief-Karte (Variante D) */
.offer-cards{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem;max-width:820px;margin-inline:auto}
.offer-card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:0 1.4rem 1.1rem;overflow:hidden}
.offer-card h3{font-size:1.15rem;margin:0 -1.4rem .8rem;padding:.7rem 1.4rem .6rem;background:var(--blue-soft);color:var(--blue-ink)}
.offer-card.ask h3{background:var(--accent-soft);color:var(--accent-deep)}
.offer-card ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1rem}
.offer-card li{position:relative;padding-left:1.5rem;font-weight:600;color:var(--blue-ink)}
.offer-card li::before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:900}
.offer-card.ask{background:var(--accent-wash);border-color:var(--accent-soft)}
.offer-card.ask ul{grid-template-columns:1fr}
.offer-card.ask li::before{content:"\2022"}
.offer-card .star,.offer-note .star{color:var(--accent);font-weight:800;margin-left:.1em}
/* Hinweis unter beiden Karten als zartrosa Leiste (Kunde 2026-10-26, Fassung 4); Sternchen verbindet ihn mit Islamische Themen und Nachhilfe */
.offer-note{margin:1rem auto 0;width:fit-content;max-width:100%;padding:.6rem 1rem;text-align:center;font-size:.98rem;font-weight:600;color:var(--blue-ink);background:var(--accent-wash);border:1px solid var(--accent-soft);border-radius:14px}
.offer-note .star{margin:0 .15em 0 0}
@media(max-width:640px){.offer-cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){.offer-card ul{grid-template-columns:minmax(0,1fr)}}
/* Unterrichte: Angebots-Uebersicht oben als helle Einleitungs-Karte auf hellem Grund; danach wechseln die Flaechen Creme (Arabisch) / hell (Qurʾan) / Creme (Kinder) – Kunde 2026-10-26, Variante B */
.offers-top .wrap{max-width:980px;background:#fffdfb;border:1px solid var(--line);border-radius:28px;padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,3vw,2.4rem);box-shadow:0 12px 28px -14px rgba(26,53,82,.25)}
#kinder .split-art{background:var(--paper-2)}
/* Abschluss auf Studium und den vier Buchseiten: zartrosa Kasten in einer Zeile, Buttons rechts – wie der Abschluss der FAQ-Seite (Kunde 2026-10-26, Variante B; ersetzt den kraeftigen lila .cta-Block samt Eck-Ornament) */
/* Abstand ueber und unter dem Kasten gleich (Kunde 2026-10-26): oben weniger, unten mehr; gleich viel Luft oben und unten; steht davor ein heller Abschnitt (Studium), entfaellt dessen Abstand unten */
.cta-box{padding-block:clamp(2.25rem,5vw,4.6rem)}
.section:not(.section-cream):has(+ .cta-box){padding-bottom:0}
.cta-box .wrap{max-width:980px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem 2rem;padding:1.4rem 1.8rem;background:var(--accent-wash);border:1px solid var(--accent-soft);border-radius:22px}
.cta-box h2{grid-column:1;font-size:clamp(1.4rem,2.2vw,1.75rem);margin:0}
.cta-box p{grid-column:1;color:var(--ink-soft);font-size:1rem;margin:0}
.cta-box .btn-row{grid-column:2;grid-row:1/3;margin:0;flex-wrap:nowrap}
@media(max-width:760px){.cta-box .wrap{grid-template-columns:minmax(0,1fr);padding:1.2rem 1.2rem}.cta-box .btn-row{grid-column:1;grid-row:auto;margin-top:.8rem;flex-wrap:wrap}}
/* Regel (Kunde 2026-10-26): der letzte Abschnitt vor dem Creme-Footer ist NIE Creme. Steht davor schon ein heller Abschnitt,
   bleibt der letzte hell und wird durch eine feine Linie in der Mitte getrennt, darueber und darunter gleich viel Luft
   (Kontakt, Preise, Lehrmaterial; Variante A – ersetzt die kurz eingebaute Karte) */
.section:has(+ .end-divided){padding-bottom:0}
.end-divided{padding-top:0}
.end-divided::before{content:"";display:block;width:140px;height:1px;background:var(--accent-mid);margin:calc(clamp(2.4rem,5vw,4.6rem) / 1.6) auto}
.end-divided > .wrap-narrow{text-align:center}/* Preise "Zeiten & Bezahlung" mittig mit drei Karten (Kunde 2026-10-26, wie .list-center); Button darunter mittig */
.list-center + .wrap .btn-row{justify-content:center}
/* Seitenende ohne Inhalt unter dem Kopf (Lehrmaterial "Eigene Materialien"): kein Zusatzabstand unter der Kopfgruppe (Kunde 2026-10-26) */
.end-divided .section-head:last-child{margin-bottom:0}
.end-divided .section-head:last-child > :last-child{margin-bottom:0}