/* CLUNIQ Manager — die Fläche der Verwaltungssoftware (Stand 07.10.2026).

   Aufbau: Auftakt mit Aufruf, Bereiche als Kacheln, abwechselnde
   Funktionszeilen mit Häkchen, Rollen, Preise, Fragen, Schluss mit «30 Tage
   testen». Die Farbwelt ist grün, die Schrift DM Sans, die Marke folgt dem
   Grund.

   Der eine Gedanke: Jede Behauptung steht neben einem Ausschnitt aus der
   echten Anwendung — aufgenommen im Beispielverein «SV 2026 Cluniq e.V.»,
   dessen Daten erfunden sind. Der Beweis steht neben dem Satz, nicht darunter.

   Gilt nur für /manager/. stil.css trägt weiter Kopf, Fuß, Knöpfe und die
   übrigen Seiten; diese Datei kommt danach und überschreibt nichts, was
   andere Seiten brauchen. Einheiten in px wie dort. Kein --ink-faint für
   Text (4,33:1), kein --green-500 für Bedeutung (2,62:1). */

:root{
  --mg-wald:var(--green-950);   /* Bühne: Auftakt, Bänder, Schluss */
  --mg-tanne:var(--green-900);
  --mg-gras:var(--green-800);   /* Knöpfe, Verweise, Häkchen */
  --mg-licht:var(--green-400);  /* Akzent nur auf Dunkel */
  --mg-minze:var(--green-soft);
  --mg-tau:var(--green-mist);
  --mg-papier:#fff;
  --mg-rand:#dfe7e0;            /* Haarlinie auf Minze und Weiß */
  --mg-schatten:0 1px 2px rgba(1,45,24,.06),0 14px 34px -14px rgba(1,45,24,.28);
  --mg-schatten-hoch:0 2px 4px rgba(1,45,24,.08),0 28px 60px -22px rgba(1,45,24,.42);
  --mg-ease:cubic-bezier(.16,1,.3,1);
}

/* Die Fläche ist weiß, nicht Creme: Auf den Manager-Seiten arbeitet man,
   und Bildschirmfotos der Anwendung (weiß) säßen auf Creme wie Aufkleber. */
body:has(> main .mg){background:var(--mg-papier)}
.mg{--abstand:96px}
.mg section{padding:var(--abstand) 0}
.mg .wrap{max-width:1200px}
.mg h1{font-weight:600;font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-.038em}
.mg h2{font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.032em;text-wrap:balance}
.mg h3{font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.018em}
.mg .lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;max-width:34em}
.mg p{text-wrap:pretty}
.mg .zahl,.mg table{font-variant-numeric:tabular-nums}
.mg ::selection{background:var(--green-400);color:var(--mg-wald)}

/* Abschnittskopf. Mittig nur, wo ein Überblick folgt (Bereiche, Rollen,
   Preise, Fragen); Funktionszeilen beginnen an der linken Kante. */
.mg-kopfzeile{max-width:760px;margin:0 0 48px}
.mg-kopfzeile.mittig{margin:0 auto 52px;text-align:center}
.mg-kopfzeile p{margin-top:16px;font-size:18px;color:var(--ink-soft)}
.mg-kopfzeile.mittig p{margin-left:auto;margin-right:auto;max-width:36em}

/* ── Icons (Lucide, ISC) ─────────────────────────────── */
.ic{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── Verweis mit Pfeil ───────────────────────────────── */
.mg-mehr{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--mg-gras);
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;
  transition:text-decoration-color .2s,gap .25s var(--mg-ease)}
.mg-mehr .ic{width:18px;height:18px;stroke-width:2.2}
.mg-mehr:hover{gap:12px;text-decoration-color:currentColor}

/* ── Häkchenliste ────────────────────────────────────── */
.mg-haken{list-style:none;display:grid;gap:11px;margin-top:24px}
.mg-haken li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:16px;line-height:1.5;color:var(--ink)}
.mg-haken li::before{content:"";width:22px;height:22px;margin-top:1px;border-radius:99px;
  background:var(--mg-gras) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.mg-haken li span{color:var(--ink-soft)}

/* ── Die Bühne: dunkler Grund mit Punktraster und zwei Lichtern ──
   Dieselbe Bühne wie Login und Schlussblock (stil.css .dunkel), hier als
   eigene Klasse, weil sie auch innen gerundet als Fläche dient. */
.mg-buehne{position:relative;background:var(--mg-wald);color:#fff;isolation:isolate}
.mg-buehne::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:.13;
  background-image:radial-gradient(rgba(255,255,255,.65) 1px,transparent 1px);background-size:24px 24px}
.mg-buehne::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(680px 560px at 100% 0%,rgba(45,112,51,.45),rgba(45,112,51,0) 62%),
             radial-gradient(520px 480px at 0% 100%,rgba(0,104,55,.32),rgba(0,104,55,0) 64%)}

/* ── Knöpfe auf der Bühne: weiß, wie im Schlussblock ── */
.mg-buehne .btn-primary{background:#fff;color:var(--mg-wald);border-color:#fff}
.mg-buehne .btn-primary:hover{background:var(--mg-minze);border-color:var(--mg-minze)}
.mg-buehne .mg-mehr{color:#fff}

/* ════════════════════════════════════════════════════════
   AUFTAKT (Startseite)
   ════════════════════════════════════════════════════════ */
.mg .mg-auftakt{padding:56px 0 40px}
.mg-auftakt .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.mg-auftakt h1 em{font-style:normal;color:var(--mg-gras)}
.mg-auftakt .lead{margin-top:24px}
.mg-taten{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.mg-taten .btn-gross{padding:17px 30px}
.mg-hinweis{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink-soft)}
.mg-hinweis span{display:inline-flex;align-items:center;gap:7px}
.mg-hinweis .ic{width:16px;height:16px;color:var(--mg-gras);stroke-width:2.4}

/* Das Foto über die ganze Breite (seit 08.10.2026): Der Laptop steht rechts
   am Seitenrand, links trägt der Abschnitt den Verlauf der linken Bildkante
   weiter — hellgrau, der grüne Schimmer an der Tischkante bei 60 %, heller
   Tisch darunter (in 2-%-Schritten an der Bildkante gemessen; gröber
   gestuft zeichnete sich an der Tischkante eine Naht ab) —, sodass es ohne Naht wie ein
   breites Bild wirkt. Die Bildkante blendet schräg aus: oben breit, unten
   schmal, weil dort die Ecke des Laptops sitzt. Text und Gerät überschneiden
   sich nie; unter 1300 px stehen sie untereinander. */
.mg .mg-auftakt.breit{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#e6e6e6 0%,#e6e7e7 2%,#e5e7e7 4%,#e4e6e6 6%,#e5e7e7 8%,#e5e5e5 10%,#e5e6e6 12%,#e5e6e6 22%,#e4e5e5 24%,#e4e5e5 26%,#e3e4e4 28%,#e1e3e3 30%,#e0e2e2 32%,#e0e2e2 34%,#dfe1e1 36%,#dfe1e1 38%,#dee0e0 40%,#dddfdf 42%,#dbdfde 44%,#dadedd 46%,#d8ddda 48%,#d5dcd8 50%,#d3dad5 52%,#d1d9d4 54%,#ced8d0 56%,#cad6cd 58%,#c7d5ca 60%,#dae1de 62%,#e1e6e5 64%,#e4e8e7 66%,#e7eaea 68%,#eaecec 70%,#eceeee 72%,#edefef 74%,#eeefef 76%,#eff1f1 78%,#f1f2f2 80%,#f2f3f3 82%,#f2f3f3 84%,#f2f4f4 86%,#f2f4f4 88%,#f4f5f5 90%,#f5f5f5 92%,#f4f5f5 94%,#f4f4f4 96%,#f3f4f4 100%)}
.mg-auftakt.breit .wrap{display:block;position:relative;z-index:1;width:100%;max-width:1360px}
.mg-auftakt-foto{position:relative}
.mg-auftakt-foto > picture img{display:block;width:100%;height:auto}
@media(min-width:1300px){
  .mg .mg-auftakt.breit{min-height:clamp(580px,42vw,720px);justify-content:center}
  .mg-auftakt.breit .wrap{padding-top:56px;padding-bottom:64px}
  .mg-auftakt-text{max-width:460px}
  .mg-auftakt-foto{position:absolute;top:0;right:0;bottom:0;aspect-ratio:1760/1116}
  .mg-auftakt-foto > picture img{height:100%;object-fit:cover;object-position:right center;
    /* Zwei Masken, beide müssen deckend sein: die schräge für den weichen
       Übergang oben, die gerade dafür, dass die Bildkante auch unten ganz
       durchsichtig beginnt — sonst zeichnete sie sich bei 1920 px ab. */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%),linear-gradient(105deg,transparent 0,#000 15%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 7%),linear-gradient(105deg,transparent 0,#000 15%);
    mask-composite:intersect}
}
/* Höchstens so breit (Abnahme 08.10.2026, 4K-Bildschirm): Über 1720 px
   wächst nur noch der Grund. Text und Laptop bleiben als Einheit in der
   Mitte, statt dass der Laptop am rechten Rand klebt und dazwischen eine
   Lücke entsteht. Rechts vom Foto trägt ::before den Verlauf der rechten
   Bildkante weiter (dort mit dem grünen Schimmer, ebenfalls gemessen), und
   die rechte Bildkante blendet in ihn aus. */
@media(min-width:1721px){
  .mg-auftakt-foto{right:calc((100% - 1720px) / 2)}
  /* Der Schimmer läuft nach rechts in den neutralen Grund aus, statt als
     Streifen bis an den Bildschirmrand zu reichen. */
  .mg .mg-auftakt.breit::before{content:"";position:absolute;top:0;bottom:0;right:0;width:calc((100% - 1720px) / 2 + 60px);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 60px,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 60px,transparent 100%);
    background:linear-gradient(180deg,#e7e8e8 0%,#e8e8e8 4%,#e6e8e8 6%,#e6e8e8 8%,#e5e7e7 10%,#e5e7e7 12%,#e3e8e5 14%,#e3e8e5 16%,#e3e8e4 18%,#e3e8e3 20%,#e2e9e2 22%,#e2e9e2 26%,#e1e9e2 28%,#e0eae2 30%,#e0eae3 32%,#e0eae2 34%,#deeae1 36%,#dbe9e0 38%,#dae9dd 40%,#d6e9da 42%,#d2e8d7 44%,#cee8d3 46%,#c9e8cf 48%,#c2e9ca 50%,#bbe8c5 52%,#b4e9c0 54%,#ace9ba 56%,#a4ebb4 58%,#9bedb0 60%,#8feea9 62%,#83f1a4 64%,#77f39d 66%,#71f49a 68%,#75f99c 70%,#70fb99 72%,#9bd5a8 74%,#a2d4ac 76%,#abd6b3 78%,#dfeae2 80%,#e1eae2 82%,#e3eae3 84%,#e5ece5 86%,#e7ece6 88%,#e7ece9 90%,#e7ecea 92%,#e8ecec 94%,#e9eceb 96%,#e8edec 100%)}
  .mg-auftakt-foto > picture img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%),linear-gradient(105deg,transparent 0,#000 15%),linear-gradient(270deg,transparent 0,#000 5%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%),linear-gradient(105deg,transparent 0,#000 15%),linear-gradient(270deg,transparent 0,#000 5%)}
}
/* Ausschnitte aus der Anwendung: weiße Karte, feiner Rand, weicher Schatten. */
.mg-fenster{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--mg-schatten-hoch);border:1px solid rgba(1,45,24,.10)}
.mg-fenster img{display:block;width:100%;height:auto}

/* Zettel: Ausschnitte, die als Lupe über einem Bild oder Fenster schweben. */
.mg-zettel{position:absolute;margin:0;background:#fff;border-radius:14px;box-shadow:var(--mg-schatten-hoch);
  border:1px solid rgba(1,45,24,.08);overflow:hidden}
.mg-zettel img{display:block;width:100%;height:auto}
.mg-zettel figcaption{padding:8px 12px 10px;font-size:12.5px;font-weight:600;color:var(--ink);border-top:1px solid var(--mg-rand);background:#fff}
/* Zwei Pop-outs treten aus dem Bildschirm des Fotos heraus: die
   Mitgliederakte über die linke Bildschirmkante in den freien Raum, das
   Portal oben rechts über den Rand. Lagen sie im Raum zwischen Text und
   Gerät, waren sie bei 1366–1440 px zu klein und berührten den Text.
   Prozentwerte beziehen sich aufs Foto (1760 × 1116), das im breiten wie im
   gestapelten Auftakt unbeschnitten steht; am Telefon (anderer Zuschnitt)
   entfallen sie. */
.mg-auftakt-foto .mg-zettel.z1{width:18%;left:33%;top:26%}
.mg-auftakt-foto .mg-zettel.z2{width:26%;left:63%;top:3%}
@media(max-width:640px){.mg-auftakt-foto .mg-zettel{display:none}}
@media(max-width:1299px){
  .mg .mg-auftakt.breit{background:#e6e7e7}
  .mg-auftakt.breit .wrap{order:1;padding-top:52px;padding-bottom:40px}
  .mg-auftakt-foto{order:2}
}
/* Gestapelt, aber noch breit: das große Bild in voller Breite, die Oberkante
   läuft weich in den Grund des Textblocks (dort ist das Foto am Rand etwas
   heller als #e6e7e7). Am Telefon der enge Zuschnitt ohne Blende — dort
   säße sie schon auf dem Bildschirmrand. */
@media(min-width:641px) and (max-width:1299px){
  .mg-auftakt-foto > picture img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%);mask-image:linear-gradient(180deg,transparent 0,#000 8%)}
}

/* Der eine Auftritt der Seite: Die Ausschnitte legen sich nacheinander auf
   die Bühne und atmen danach kaum merklich. Ohne JS und bei reduzierter
   Bewegung stehen sie still da. */
html.js .mg-auftakt .mg-zettel{opacity:0;transform:translateY(22px) scale(.97);filter:blur(4px)}
html.js .mg-auftakt.ist-da .mg-zettel{opacity:1;transform:none;filter:none;
  transition:opacity .9s var(--mg-ease),transform 1.1s var(--mg-ease),filter .9s var(--mg-ease)}
html.js .mg-auftakt.ist-da .mg-zettel.z1{transition-delay:.35s}
html.js .mg-auftakt.ist-da .mg-zettel.z2{transition-delay:.6s}
html.js .mg-auftakt.ist-da .mg-zettel.z3{transition-delay:.85s}
@keyframes mg-atmen{from{translate:0 0}to{translate:0 -6px}}
html.js .mg-auftakt.ruht .mg-zettel{animation:mg-atmen 5.5s ease-in-out infinite alternate}
html.js .mg-auftakt.ruht .mg-zettel.z2{animation-delay:-2s}
html.js .mg-auftakt.ruht .mg-zettel.z3{animation-delay:-3.6s}
@media(prefers-reduced-motion:reduce){
  html.js .mg-auftakt .mg-zettel{opacity:1;transform:none;filter:none;transition:none;animation:none}
}

/* Vier Tatsachen unter dem Auftakt — mit Zeichen statt Pillen. */
.mg-tatsachen{border-top:1px solid var(--mg-rand);border-bottom:1px solid var(--mg-rand);background:#fbfcfb}
.mg-tatsachen .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.mg-tatsachen div{display:flex;gap:14px;align-items:flex-start;padding:24px 22px}
.mg-tatsachen div+div{border-left:1px solid var(--mg-rand)}
.mg-tatsachen .ic{width:24px;height:24px;color:var(--mg-gras);margin-top:2px}
.mg-tatsachen b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.mg-tatsachen span{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.45;margin-top:3px}

/* ════════════════════════════════════════════════════════
   SZENEN — Vereinsalltag in fünf Momenten
   Jede Karte trägt einen echten Ausschnitt. Fotos aus dem Verein kommen
   später darunter: je Karte eine Zeile, z. B.
     .mg-szene.s-beitraege{--foto:url(/bilder/manager/verein/szene-beitraege.webp)}
   Die Datei muss vorher unter web/ liegen — eine fehlende liefert bei
   jedem Besuch eine 404, und kein Test bemerkt es.
   ════════════════════════════════════════════════════════ */
.mg-szenen{padding-top:72px!important}
.mg-szenen-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.mg-szenen-kopf .mg-kopfzeile{margin-bottom:40px}
.mg-band-steuer{display:flex;gap:10px;margin-bottom:44px;flex-shrink:0}
.mg-band-steuer[hidden]{display:none}
.mg-pfeiltaste{display:grid;place-items:center;width:48px;height:48px;border-radius:99px;border:1px solid var(--mg-rand);background:#fff;color:var(--mg-wald);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.mg-pfeiltaste:hover:not(:disabled){background:var(--mg-wald);border-color:var(--mg-wald);color:#fff}
.mg-pfeiltaste:disabled{opacity:.4;cursor:default}
.mg-pfeiltaste .ic{width:20px;height:20px;stroke-width:2.2}
/* 300 px je Karte: Bei 1160 px stehen drei und ein Teil der vierten da —
   genau so viel, dass man sieht: hier geht es weiter. Mit 1fr passten vier
   glatt hinein, und die fünfte bemerkte niemand. Schmaler als 300 px kämen
   die Zettel in den Karten unter 9 px an. */
.mg-szenen-band{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:4px 4px 22px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:#9fb5a5 transparent;
  /* Die letzte sichtbare Karte läuft weich aus, statt an der Spaltenkante
     mitten im Wort abzureißen (Abnahme 07.10.2026). */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
.mg-szenen-band:focus-visible{outline:2px solid var(--green-700);outline-offset:4px}
.mg-szene{position:relative;scroll-snap-align:start;min-height:340px;border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;
  background:var(--foto,none) center/cover no-repeat,var(--mg-tanne)}
.mg-szene::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1px);background-size:22px 22px}
.mg-szene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,26,14,0) 35%,rgba(12,26,14,.88) 100%)}
.mg-szene.ton-hell{background:var(--foto,none) center/cover no-repeat,var(--mg-gras)}
.mg-szene .mg-zettel{position:relative;z-index:1;margin:0 0 auto;width:100%;transform:rotate(-1.2deg);box-shadow:var(--mg-schatten-hoch)}
.mg-szene:nth-child(even) .mg-zettel{transform:rotate(1.1deg)}
.mg-szene p{position:relative;z-index:1;margin-top:22px;font-size:17px;font-weight:500;line-height:1.4}

/* ════════════════════════════════════════════════════════
   BAND — der Aufruf zwischendurch
   ════════════════════════════════════════════════════════ */
.mg-band{padding:46px 0!important}
.mg-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.mg-band h2{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.02em;max-width:24em;color:#fff}
.mg-band h2 em{font-style:normal;color:var(--mg-licht)}
.mg-band-tat{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.mg-band-tat small{font-size:13.5px;color:rgba(255,255,255,.74)}

/* ════════════════════════════════════════════════════════
   BEREICHE — sechs Kacheln auf EINEM Grund
   Bis zur Abnahme vom 07.10.2026 wechselten drei Töne schachbrettartig und
   jede Kachel trug eine große Zahl mit Etikett («6 Reiter je Akte») — das
   Kennzahlen-Kostüm ohne Kennzahl. Das Raster bleibt (die Logik des
   Vorbilds), das Kostüm geht.
   ════════════════════════════════════════════════════════ */
.mg-bereiche{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mg-kachel{position:relative;display:flex;flex-direction:column;min-height:0;padding:28px 28px 30px;border-radius:24px;
  color:var(--ink);background:var(--mg-minze);overflow:hidden;isolation:isolate;
  transition:transform .4s var(--mg-ease),box-shadow .4s var(--mg-ease)}
.mg-kachel:hover{transform:translateY(-4px);box-shadow:var(--mg-schatten);background:#fff}
.mg-kachel .mg-zeichen{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;color:var(--mg-gras)}
.mg-kachel .mg-zeichen .ic{width:26px;height:26px}
.mg-kachel h3{margin-top:26px;font-size:22px}
.mg-kachel p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.mg-kachel .mg-pfeil{position:absolute;right:24px;top:28px;color:var(--mg-gras);transition:transform .3s var(--mg-ease)}
.mg-kachel:hover .mg-pfeil{transform:translateX(4px)}
.mg-bereiche-fuss{margin-top:34px;text-align:center}

/* ════════════════════════════════════════════════════════
   FUNKTIONSZEILE — Text mit Häkchen, daneben der Beweis
   ════════════════════════════════════════════════════════ */
.mg-zeile .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:72px;align-items:center}
.mg-zeile.gespiegelt .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.mg-zeile.gespiegelt .mg-zeile-text{order:2}
.mg-zeile-text .lead{margin-top:18px;font-size:18px}
.mg-zeile-text .mg-mehr{margin-top:30px}
.mg-zeile-text .mg-tarif{margin-top:22px}
/* Der Beweis: Minzfläche, darauf das Fenster, ein Zettel ragt hinaus. */
.mg-beweis{position:relative;border-radius:28px;background:var(--mg-minze);padding:40px 0 40px 40px;isolation:isolate}
.mg-beweis::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(0,104,55,.22) 1px,transparent 1px);background-size:20px 20px;
  mask-image:linear-gradient(135deg,#000 0%,transparent 70%)}
.mg-beweis .mg-fenster{margin-right:-28px}
.mg-zeile.gespiegelt .mg-beweis{padding:40px 40px 40px 0}
.mg-zeile.gespiegelt .mg-beweis .mg-fenster{margin-right:0;margin-left:-28px}
.mg-beweis .mg-zettel{width:52%;right:-36px;bottom:-34px}
.mg-zeile.gespiegelt .mg-beweis .mg-zettel{right:auto;left:-36px}
.mg-beweis .mg-zettel.oben{bottom:auto;top:-30px}
/* Der Bildausschnitt im Fenster. Geschnitten wird IN DER DATEI, nicht hier
   (DESIGN.md: Bildschirmfotos haben ein Rohmaß): Jede Datei unter
   /bilder/manager/ zeigt nur den Teil der Anwendung, um den es geht, damit
   ihr Text bei ~600 px Breite noch um 9 px groß ankommt. Ein ganzes Fenster
   von 1440 px landete bei 5 px. */
.mg-ausschnitt{display:block}
.mg-ausschnitt img{display:block;width:100%;height:auto}
/* Wo der Zuschnitt eine Karte rechts schneidet, läuft das Bild aus statt
   abzubrechen — der Schnitt liest sich als «hier geht es weiter», nicht als
   Fehler (Abnahme 07.10.2026). */
.mg-ausschnitt.laeuft-aus img{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
/* Spiegelbild für den Beleg: links das angeschnittene Original, rechts die
   erkannten Angaben — der Schnitt durchs Original läuft ein. */
.mg-ausschnitt.laeuft-ein img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
/* Hochformat — Formular oder Telefon — steht mittig auf der Minzfläche,
   statt auf Spaltenbreite gezogen zu werden; ein Formular wüchse sonst auf
   900 px Höhe, ein Telefon auf Tischgröße. */
.mg-beweis.hoch,.mg-zeile.gespiegelt .mg-beweis.hoch{padding:40px;display:grid;justify-items:center}
.mg-beweis.hoch .mg-fenster,.mg-zeile.gespiegelt .mg-beweis.hoch .mg-fenster{margin:0;width:100%;max-width:400px}
.mg-beweis.hoch .mg-telefon{width:250px}
.mg-beweis-notiz{margin-top:16px;font-size:13px;color:var(--ink-soft)}

/* Kleine Tarifangabe als Satz. Bis zur Abnahme vom 07.10.2026 vier Pillen
   mit durchgestrichenem «Basic» — schwer zu lesen, und die letzte brach
   allein um. */
.mg-tarif{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.mg-tarif .ic{width:18px;height:18px;color:var(--mg-gras);margin-top:2px}
.mg-tarif b{color:var(--ink);font-weight:600}

/* ════════════════════════════════════════════════════════
   ALLES AN EINEM ORT — die sechs Bereiche um ein Gerät
   ════════════════════════════════════════════════════════ */
.mg-ort{border-radius:32px;background:var(--mg-tau);border:1px solid var(--mg-rand);padding:56px;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.mg-ort h2{font-size:clamp(28px,3vw,38px)}
.mg-ort p{margin-top:16px;font-size:17px;color:var(--ink-soft);max-width:30em}
.mg-ort .mg-mehr{margin-top:26px}
.mg-rad{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px}
.mg-rad ul{list-style:none;display:grid;gap:22px}
.mg-rad li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:var(--ink)}
.mg-rad ul:first-child li{flex-direction:row-reverse;text-align:right}
.mg-rad li i{display:grid;place-items:center;width:44px;height:44px;border-radius:99px;background:var(--mg-wald);color:var(--mg-licht);flex-shrink:0;
  box-shadow:0 0 0 6px var(--mg-tau),0 0 0 7px var(--mg-rand)}
.mg-rad li i .ic{width:21px;height:21px}
.mg-telefon{width:190px;border-radius:30px;padding:9px;background:#11201a;box-shadow:var(--mg-schatten-hoch)}
.mg-telefon img{display:block;width:100%;height:auto;border-radius:22px}

/* Drei Gründe unter dem Ort */
.mg-gruende{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mg-grund{border-radius:24px;background:#fff;border:1px solid var(--mg-rand);padding:30px;display:flex;flex-direction:column}
.mg-grund .mg-zeichen{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--mg-minze);color:var(--mg-gras)}
.mg-grund h3{margin-top:22px}
.mg-grund p{margin-top:10px;font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.mg-grund ul{list-style:none;margin-top:16px;display:grid;gap:7px;font-size:14.5px;color:var(--ink)}
.mg-grund li{display:flex;gap:9px;align-items:baseline}
.mg-grund li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:99px;background:var(--mg-gras);translate:0 -2px}
.mg-grund .mg-mehr{margin-top:auto;padding-top:22px}

/* ════════════════════════════════════════════════════════
   ROLLEN — eine Leiste, ein Feld
   Ohne JS stehen alle Rollen untereinander, jede mit Überschrift.
   ════════════════════════════════════════════════════════ */
.mg-rollen-wahl{display:none}
html.js .mg-rollen.bereit .mg-rollen-wahl{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.mg-rollen-wahl button{display:inline-flex;align-items:center;gap:10px;padding:11px 20px 11px 12px;border-radius:99px;
  border:1px solid var(--mg-rand);background:#fff;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.mg-rollen-wahl button i{display:grid;place-items:center;width:34px;height:34px;border-radius:99px;background:var(--mg-minze);color:var(--mg-gras)}
.mg-rollen-wahl button i .ic{width:18px;height:18px}
.mg-rollen-wahl button:hover{border-color:var(--mg-gras)}
.mg-rollen-wahl button[aria-selected="true"]{background:var(--mg-wald);border-color:var(--mg-wald);color:#fff}
.mg-rollen-wahl button[aria-selected="true"] i{background:rgba(255,255,255,.12);color:var(--mg-licht)}
.mg-rolle{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;
  border-radius:28px;padding:44px;background:var(--mg-tau);border:1px solid var(--mg-rand)}
.mg-rolle+.mg-rolle{margin-top:18px}
html.js .mg-rollen.bereit .mg-rolle+.mg-rolle{margin-top:0}
html.js .mg-rollen.bereit .mg-rolle[hidden]{display:none}
html.js .mg-rollen.bereit .mg-rolle{animation:mg-auf .5s var(--mg-ease)}
@keyframes mg-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.js .mg-rollen.bereit .mg-rolle{animation:none}}
.mg-rolle h3{font-size:26px;letter-spacing:-.025em}
.mg-rolle > div > p{margin-top:12px;font-size:16.5px;color:var(--ink-soft)}
.mg-rolle ol{list-style:none;display:grid;gap:14px;counter-reset:r}
.mg-rolle ol li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--mg-rand);font-size:15.5px;line-height:1.5}
.mg-rolle ol li i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--mg-minze);color:var(--mg-gras)}
.mg-rolle ol li b{display:block;font-size:16px;color:var(--ink)}
.mg-rolle ol li span{color:var(--ink-soft)}
.mg-rolle .mg-mehr{margin-top:22px}

/* ════════════════════════════════════════════════════════
   PREISE (kurz) — vier Tarife nebeneinander
   ════════════════════════════════════════════════════════ */
.mg-tarife{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mg-tarifkarte{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:28px 24px;background:#fff;border:1px solid var(--mg-rand)}
.mg-tarifkarte.empfohlen{background:var(--mg-wald);color:#fff;border-color:var(--mg-wald)}
.mg-tarifkarte .marke{position:absolute;top:-12px;left:24px;padding:4px 12px;border-radius:99px;background:var(--mg-licht);color:var(--mg-wald);font-size:12px;font-weight:700}
.mg-tarifkarte h3{font-size:19px}
.mg-tarifkarte .fuer{margin-top:4px;font-size:14px;color:var(--ink-soft)}
.mg-tarifkarte.empfohlen .fuer{color:rgba(255,255,255,.74)}
.mg-tarifkarte .preis{margin-top:22px;display:flex;align-items:baseline;gap:6px}
.mg-tarifkarte .preis b{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}
.mg-tarifkarte .preis span{font-size:14px;color:var(--ink-soft)}
.mg-tarifkarte.empfohlen .preis span{color:rgba(255,255,255,.74)}
.mg-tarifkarte .jahr{margin-top:6px;font-size:13.5px;color:var(--ink-soft)}
.mg-tarifkarte.empfohlen .jahr{color:rgba(255,255,255,.74)}
.mg-tarifkarte ul{list-style:none;margin-top:22px;padding-top:20px;border-top:1px solid var(--mg-rand);display:grid;gap:9px;font-size:14.5px}
.mg-tarifkarte.empfohlen ul{border-color:rgba(255,255,255,.14)}
.mg-tarifkarte li{display:flex;gap:9px;align-items:baseline}
.mg-tarifkarte li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:99px;background:var(--mg-gras);translate:0 -2px}
.mg-tarifkarte.empfohlen li::before{background:var(--mg-licht)}
.mg-tarife-fuss{margin-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:14.5px;color:var(--ink-soft)}

/* ════════════════════════════════════════════════════════
   FRAGEN — <details> ohne Klasse am <summary> zählen als FAQ
   (seitenkopf.py erzeugt daraus FAQPage-Daten).
   ════════════════════════════════════════════════════════ */
.mg-fragen{max-width:860px;margin:0 auto;display:grid;gap:12px}
.mg-fragen details{border-radius:18px;background:#fff;border:1px solid var(--mg-rand);transition:border-color .2s,box-shadow .3s}
.mg-fragen details:hover{border-color:#c9d8cc}
.mg-fragen details[open]{border-color:var(--mg-gras);box-shadow:var(--mg-schatten)}
.mg-fragen summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 24px;font-size:17px;font-weight:600;color:var(--ink)}
.mg-fragen summary::-webkit-details-marker{display:none}
.mg-fragen summary::after{content:"";flex-shrink:0;width:30px;height:30px;border-radius:99px;background:var(--mg-tau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006837' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .3s var(--mg-ease)}
.mg-fragen details[open] summary::after{transform:rotate(180deg)}
.mg-fragen summary:focus-visible{outline-offset:-3px;border-radius:18px}
.mg-fragen details p{padding:0 24px 22px;font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:44em}
.mg-fragen details p a{text-decoration:underline;text-underline-offset:3px}

/* ════════════════════════════════════════════════════════
   SCHLUSS — die letzte Bühne
   ════════════════════════════════════════════════════════ */
.mg-schluss{border-radius:32px;padding:72px 56px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end}
.mg-schluss h2{font-size:clamp(32px,4.2vw,54px);font-weight:500;letter-spacing:-.035em;color:#fff}
.mg-schluss h2 em{font-style:normal;color:var(--mg-licht)}
.mg-schluss p{margin-top:16px;font-size:17.5px;color:rgba(255,255,255,.78);max-width:30em}
.mg-schluss-tat{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.mg-schluss-tat small{font-size:14px;color:rgba(255,255,255,.76);line-height:1.5}
.mg-schluss-tat a.tel{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.mg-schluss-tat a.tel:hover{text-decoration-color:#fff}

/* ════════════════════════════════════════════════════════
   UNTERSEITEN — Kopf als eingesetzte Bühne
   Unter der dunklen Kopfzeile (#0c1a0e) verschmölze ein dunkler Kopf
   (1,19:1). Deshalb steht er als gerundete Fläche mit weißem Rand darum.
   ════════════════════════════════════════════════════════ */
.mg .mg-kopf{margin:14px 14px 0;border-radius:30px;padding:76px 0 84px;overflow:hidden}
.mg-kopf .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.mg-kopf.ohne-bild .wrap{grid-template-columns:minmax(0,1fr);max-width:900px;text-align:center}
.mg-kopf h1{color:#fff;font-size:clamp(38px,4.8vw,62px)}
.mg-kopf h1 em{font-style:normal;color:var(--mg-licht)}
.mg-kopf .lead{color:rgba(255,255,255,.80);margin-top:22px}
.mg-kopf.ohne-bild .lead{margin-left:auto;margin-right:auto}
.mg-kopf .mg-taten{margin-top:32px}
.mg-kopf.ohne-bild .mg-taten{justify-content:center}
.mg-kopf .mg-hinweis{color:rgba(255,255,255,.76)}
.mg-kopf .mg-hinweis .ic{color:var(--mg-licht)}
.mg-kopf .mg-pfad{display:flex;gap:8px;align-items:center;margin-bottom:22px;font-size:14px;color:rgba(255,255,255,.72)}
.mg-kopf .mg-pfad a{color:rgba(255,255,255,.86);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.mg-kopf .mg-pfad a:hover{color:#fff}
.mg-kopf .mg-fenster{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);transform-origin:left center}
.mg-kopf .mg-kopfbild{position:relative}
.mg-kopf .mg-kopfbild .mg-zettel{width:50%;left:-34px;bottom:-40px}
/* Schmal, wo das Fenster flach ist und der Zettel sonst die Zahlen darin verdeckte. */
.mg-kopf .mg-kopfbild .mg-zettel.schmal{width:40%}

/* Drei Vorteile ohne Kasten: Zeichen, Satz, Erklärung. */
.mg-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.mg-drei > div{border-top:2px solid var(--mg-gras);padding-top:24px}
.mg-drei .ic{width:30px;height:30px;color:var(--mg-gras);stroke-width:1.6}
.mg-drei h3{margin-top:18px;font-size:21px}
.mg-drei p{margin-top:10px;font-size:16px;color:var(--ink-soft);line-height:1.6}

/* Weitere Bereiche: eine Liste mit Haarlinien statt fünf Kacheln */
.mg-weitere{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px;border-top:1px solid var(--mg-rand)}
.mg-weitere a{display:grid;grid-template-columns:28px auto 1fr 20px;align-items:center;gap:14px;padding:18px 4px;border-bottom:1px solid var(--mg-rand);color:var(--ink);
  transition:background .2s,padding .3s var(--mg-ease)}
.mg-weitere a::after{content:"";width:18px;height:18px;justify-self:end;background:var(--mg-gras);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--mg-ease)}
.mg-weitere a:hover{background:var(--mg-tau);padding-left:12px}
.mg-weitere a:hover::after{transform:translateX(3px)}
.mg-weitere .ic{width:24px;height:24px;color:var(--mg-gras)}
.mg-weitere b{font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap}
.mg-weitere span{font-size:14.5px;color:var(--ink-soft);line-height:1.45}
.mg-weitere.zwei{grid-template-columns:1fr;border-top:1px solid var(--mg-rand)}

/* ════════════════════════════════════════════════════════
   VERGLEICH — die Funktionsliste als Tafel
   ════════════════════════════════════════════════════════ */
.mg-vergleich-huelle{position:relative;border-radius:24px;border:1px solid var(--mg-rand);background:#fff;overflow:auto;max-height:none}
.mg-vergleich{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:15px}
.mg-vergleich th,.mg-vergleich td{padding:13px 18px;border-bottom:1px solid #edf1ed;text-align:center;vertical-align:middle}
.mg-vergleich thead th{position:sticky;top:0;z-index:2;background:#fff;padding:22px 18px 18px;border-bottom:1px solid var(--mg-rand)}
.mg-vergleich thead th b{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.mg-vergleich thead th span{display:block;margin-top:4px;font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.mg-vergleich thead th.hervor{background:var(--mg-wald)}
.mg-vergleich thead th.hervor b{color:#fff}
.mg-vergleich thead th.hervor span{color:rgba(255,255,255,.76)}
.mg-vergleich td.hervor{background:#f6faf6}
.mg-vergleich th[scope="row"]{position:sticky;left:0;z-index:1;background:#fff;text-align:left;font-weight:500;color:var(--ink);min-width:260px}
.mg-vergleich tbody tr.gruppe th{padding:26px 18px 10px;text-align:left;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mg-gras);background:#fff;border-bottom:1px solid var(--mg-rand)}
.mg-vergleich .ja,.mg-vergleich .nein{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:99px}
.mg-vergleich .ja{background:var(--mg-gras);color:#fff}
.mg-vergleich .ja .ic{width:15px;height:15px;stroke-width:3}
.mg-vergleich .nein{color:#8a968d}
.mg-vergleich .nein::before{content:"";width:12px;height:2px;border-radius:2px;background:currentColor}
.mg-vergleich tbody tr:hover td,.mg-vergleich tbody tr:hover th[scope="row"]{background:var(--mg-tau)}
.mg-rollt{display:none;margin-bottom:12px;font-size:13.5px;color:var(--ink-soft);align-items:center;gap:8px}
.mg-rollt .ic{width:18px;height:18px;color:var(--mg-gras)}

/* Sprungmarken zu den Bereichen (nur innerhalb der Seite) */
.mg-sprung{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.mg-sprung a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:var(--mg-tau);border:1px solid var(--mg-rand);font-size:14.5px;font-weight:600;color:var(--ink)}
.mg-sprung a:hover{border-color:var(--mg-gras);color:var(--mg-gras)}
.mg-sprung .ic{width:17px;height:17px;color:var(--mg-gras)}

/* Kontakt: drei Wege */
.mg-wege{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mg-weg{border-radius:24px;padding:30px;background:var(--mg-tau);border:1px solid var(--mg-rand)}
.mg-weg .mg-zeichen{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fff;color:var(--mg-gras)}
.mg-weg h3{margin-top:20px}
.mg-weg p{margin-top:8px;font-size:15.5px;color:var(--ink-soft)}
.mg-weg a.gross{display:inline-block;margin-top:14px;font-size:20px;font-weight:600;color:var(--mg-gras);letter-spacing:-.01em}

/* Kontakt: Anschrift neben dem Satz; Personal: schlichte Tafel ohne Rad */
.mg-anschrift{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.mg-weitere.zwei{grid-template-columns:1fr 1fr}
/* In der halben Spalte von .mg-ort (Kontakt) untereinander — nebeneinander
   blieben dem Erklärtext 62–72 px, er brach Wort für Wort um. */
.mg-ort .mg-weitere.zwei{grid-template-columns:1fr}
.mg-ort.schlicht{grid-template-columns:1fr;padding:40px}
.mg-ort.schlicht h3{font-size:22px}
.mg-ort.schlicht p{margin-top:10px}

/* Schritte, wo die Reihenfolge stimmt (Anmeldung im Portal, Veranstaltung) */
.mg-schritte{list-style:none;counter-reset:s;display:grid;gap:14px;margin-top:18px}
.mg-schritte li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;column-gap:14px;align-items:start}
.mg-schritte li::before{content:counter(s);grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:99px;
  background:var(--mg-wald);color:var(--mg-licht);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.mg-schritte b{font-size:16px;color:var(--ink);line-height:1.35;padding-top:6px}
.mg-schritte span{font-size:15px;color:var(--ink-soft);line-height:1.5}
/* Regeln als Marken, z. B. die Mehrheiten bei Abstimmungen */
.mg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mg-chips span{padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--mg-rand);font-size:14.5px;font-weight:500;color:var(--ink)}

/* Ehrliche Notiz unter Bildern aus dem Beispielverein */
.mg-notiz{font-size:13px;color:var(--ink-soft)}

/* ════════════════════════════════════════════════════════
   SCHMALE SCHIRME
   ════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .mg-tatsachen .wrap{grid-template-columns:repeat(2,1fr)}
  .mg-tatsachen div:nth-child(3){border-left:0}
  .mg-tatsachen div:nth-child(n+3){border-top:1px solid var(--mg-rand)}
  .mg-tarife{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .mg-weitere{column-gap:32px}
  .mg-ort{grid-template-columns:minmax(0,1fr);padding:44px}
}
@media(max-width:980px){
  .mg{--abstand:80px}
  .mg-auftakt .wrap,.mg-kopf .wrap{grid-template-columns:1fr;gap:56px}
  .mg-zeile .wrap,.mg-zeile.gespiegelt .wrap{grid-template-columns:1fr;gap:48px}
  .mg-zeile.gespiegelt .mg-zeile-text{order:0}
  .mg-bereiche{grid-template-columns:repeat(2,1fr)}
  .mg-gruende,.mg-drei{grid-template-columns:1fr}
  .mg-gruende{gap:14px}
  .mg-rolle{grid-template-columns:1fr;gap:28px;padding:32px}
  .mg-schluss{grid-template-columns:1fr;padding:56px 36px}
  .mg-wege,.mg-anschrift{grid-template-columns:1fr}
  .mg-kopf .mg-kopfbild{margin-left:34px}
}
@media(max-width:900px){
  .mg-rollt{display:flex}
}
/* Am Telefon: Die Beschriftungsspalte nahm 300 von 358 px — von den Tarifen
   blieb ein Streifen. Jetzt umbricht sie bei 148 px, die Tarifspalten sind
   je 76 px breit, und zweieinhalb Tarife stehen nebeneinander. */
@media(max-width:640px){
  .mg-vergleich{min-width:0;width:auto;font-size:13.5px}
  .mg-vergleich th,.mg-vergleich td{padding:11px 8px}
  .mg-vergleich th[scope="row"]{min-width:148px;max-width:148px;white-space:normal;line-height:1.35;padding-left:14px}
  .mg-vergleich td,.mg-vergleich thead th:not(:first-child){min-width:76px;width:76px}
  .mg-vergleich thead th{padding:16px 6px 14px}
  .mg-vergleich thead th b{font-size:15px}
  .mg-vergleich thead th span{font-size:12px}
  .mg-szenen-kopf{display:block}
  .mg-band-steuer{margin:-20px 0 22px}
}
@media(max-width:640px){
  .mg{--abstand:64px}
  .mg .mg-auftakt{padding-top:36px}
  .mg-taten .btn{white-space:normal;text-align:center}
  /* Kein negativer Rand am Telefon: Der Seitenrand von 16 px gilt auch für
     Fenster und Zettel (Abnahme 07.10.2026). */
  .mg-tatsachen .wrap{grid-template-columns:1fr;padding:0}
  .mg-tatsachen div,.mg-tatsachen div+div{border-left:0;padding:18px var(--wrap-polster)}
  .mg-tatsachen div+div{border-top:1px solid var(--mg-rand)}
  .mg-bereiche,.mg-tarife,.mg-weitere,.mg-weitere.zwei{grid-template-columns:1fr}
  .mg-weitere a{grid-template-columns:24px 1fr 18px}
  .mg-weitere span{grid-column:2;margin-top:-10px}
  .mg-ort.schlicht{padding:28px 22px}
  .mg-kachel{min-height:0}
  .mg-szenen-band{grid-auto-columns:82%}
  .mg-szene{min-height:300px}
  .mg-beweis,.mg-zeile.gespiegelt .mg-beweis{padding:16px;border-radius:22px}
  .mg-beweis .mg-fenster,.mg-zeile.gespiegelt .mg-beweis .mg-fenster{margin:0}
  /* Am Telefon zeigt der Ausschnitt seine linke Seite in Lesegröße und läuft
     rechts aus dem Fenster — wie in DESIGN.md für die Startseite festgelegt. */
  .mg-beweis .mg-ausschnitt{overflow:hidden}
  .mg-beweis .mg-ausschnitt img{width:170%;max-width:none}
  .mg-beweis .mg-ausschnitt.laeuft-ein img{margin-left:-70%}
  .mg-beweis.hoch,.mg-zeile.gespiegelt .mg-beweis.hoch{padding:24px 16px}
  .mg-beweis.hoch .mg-ausschnitt img{width:100%}
  .mg-beweis.hoch .mg-telefon{width:220px}
  .mg-ort{padding:30px 22px;border-radius:24px}
  .mg-rad{grid-template-columns:1fr;justify-items:center}
  /* minmax(0,…): Sonst setzt «Personal & Lohn» mit Symbol die Mindestbreite,
     und bei 360 px lief der Abschnitt 7 px über den Rand. */
  .mg-rad ul{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:14px}
  .mg-rad ul:first-child{order:2}
  .mg-rad ul:last-child{order:3}
  .mg-rad ul:first-child li{flex-direction:row;text-align:left}
  .mg-telefon{width:170px}
  .mg-rolle{padding:24px 18px;border-radius:22px}
  .mg-schluss{padding:44px 22px;border-radius:24px}
  .mg .mg-kopf{margin:10px 10px 0;border-radius:24px;padding:52px 0 64px}
  .mg-kopf .mg-kopfbild{margin-left:0}
  .mg-kopf .mg-kopfbild .mg-ausschnitt{overflow:hidden;max-height:300px}
  .mg-kopf .mg-kopfbild .mg-ausschnitt img{width:165%;max-width:none}
  .mg-kopf .mg-kopfbild .mg-zettel{width:62%;left:8px}
  .mg-kopf .mg-kopfbild .mg-zettel.schmal{width:52%}
  .mg-band .wrap{flex-direction:column;align-items:flex-start}
  .mg-fragen summary{padding:18px;font-size:16px}
  .mg-fragen details p{padding:0 18px 20px}
}

/* ════════════════════════════════════════════════════════
   MANAGER-STARTSEITE — ein Gerüst (17.10.2026)
   «Etwas unstrukturiert» (Betreiber) war messbar: fünf linke Kanten,
   vier Überschriftengrößen, Abstände zwischen 24 und 96 px, und dieselben
   Funktionen drei- bis viermal. Die Wiederholungen sind aus dem Markup
   entfernt; hier steht das Gerüst. Es gilt nur für die Startseite des
   Managers (.mg-start) — die Unterseiten teilen sich dieses Stilblatt und
   bleiben, wie sie sind.
   - Eine linke Kante: Köpfe, Rollenwahl und Fragen links, keine Spiegelung.
     Der Auftakt behält seine breitere Kante; das Foto ist auf sie gerechnet,
     eine schmalere liefe auf großen Bildschirmen über den Laptop.
   - Eine Überschriftengröße, auch im Schluss.
   - Ein Abstand zwischen den Abschnitten (zweimal 80 px), enger innerhalb
     der vier Funktionszeilen (einmal 80 px) — sie sind eine Gruppe.
   ════════════════════════════════════════════════════════ */
.mg-start{--abstand:80px}
@media(max-width:640px){ .mg-start{--abstand:64px} }
.mg-start .mg-szenen{padding-top:var(--abstand)!important}
.mg-start .mg-zeile + .mg-zeile{padding-top:0}
html.js .mg-start .mg-rollen.bereit .mg-rollen-wahl{justify-content:flex-start}
.mg-start .mg-fragen{margin:0}
.mg-start .mg-schluss h2{font-size:clamp(30px,3.6vw,46px);font-weight:600;letter-spacing:-.032em}
/* Ohne Schmuck-Icons (Betreiber 17.10.2026: «sieht nach KI aus»). Es tragen
   Titel und Satz; Pfeile bleiben nur, wo sie auf eine andere Seite zeigen
   (Kacheln, «Mehr …») oder etwas bewegen (Szenen). Die Bausteine waren auf
   das Zeichen hin gebaut — hier der Ausgleich, nur für diese Seite. */
.mg-start .mg-kachel h3{margin-top:0;padding-right:36px}
.mg-start .mg-bereiche-fuss{text-align:left}
.mg-start .mg-rollen-wahl button{padding:11px 20px}
.mg-start .mg-rolle ol li{grid-template-columns:minmax(0,1fr)}
/* Tarif nur, wo er abweicht (17.10.2026): Vereinsleben ab Standard, Personal &
   Lohn nur in Unlimited. Die übrigen vier gibt es in jedem Tarif — das sagt
   ein Satz über den Kacheln, statt viermal dasselbe Etikett. Unten in der
   Kachel, damit Titel und Satz in allen sechs an derselben Stelle stehen. */
.mg-start .mg-tarif-hinweis{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--mg-gras)}