/* Fassung C – Optik von A, Reihenfolge von B (Bewertung 06.10.2026). Ergänzt site.css, greift nur mit .c */
/* Kopf: Menü am Handy */
.c-menue { display: none; position: relative; }
.c-menue summary { list-style: none; cursor: pointer; font-weight: 600; padding: 7px 14px; border: 1px solid var(--linie); border-radius: var(--radius); }
.c-menue summary::-webkit-details-marker { display: none; }
.c-menue[open] summary { border-color: var(--text); }
.c-menue nav { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; display: grid; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 18px 40px -18px rgba(19, 35, 58, 0.35); padding: 6px; z-index: 120; }
.c-menue nav a { padding: 10px 12px; color: var(--text); text-decoration: none; border-radius: 6px; }
.c-menue nav a:hover { background: var(--flaeche); }
@media (max-width: 1040px) { .c .c-menue { display: block; margin-left: auto; } .c .kopf .anmelden { margin-left: 14px; } }
@media (max-width: 480px) { .c .kopf .innen { gap: 12px; } .c .kopf .anmelden { margin-left: 4px; font-size: 0.92rem; } .c-menue summary { padding: 6px 11px; } }
/* Unter 360 px passt „Anmelden" nicht mehr neben Wortmarke und Menü (ragte 27 px über den Rand, die Seite ließ sich
   seitlich schieben) – dort steht es im Menü. */
.c-menue nav a.c-menue-anmelden { display: none; }
@media (max-width: 360px) { .c .kopf .anmelden { display: none; } .c-menue nav a.c-menue-anmelden { display: block; } }

/* Erster Bildschirm: das Studio größer, mit drei Beschriftungen */
.c .c-hero { padding-top: clamp(32px, 4.5vw, 56px); }
.c .c-hero .innen { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); }
.c .c-hero h1 { font-size: clamp(2rem, 3.1vw, 2.6rem); }
.c-frei { margin-top: 14px; font-size: 1.04rem; color: var(--text); font-weight: 500; padding-left: 30px; position: relative; max-width: 34em; }
.c-frei::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 3px solid var(--gruen); border-bottom: 3px solid var(--gruen); transform: rotate(-45deg); }
.c .c-hero .knoepfe { margin-top: 26px; }
.c-bild { margin-right: clamp(-48px, -3vw, 0px); }
.c-buehne { position: relative; }
.c-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
  background: var(--gruen); color: #fff; font: 700 0.95rem var(--sans); display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 6px 14px -4px rgba(19, 35, 58, 0.5); }
.c-pin1 { --x: 7%; --y: 30%; } .c-pin2 { --x: 22.3%; --y: 48%; } .c-pin3 { --x: 61.5%; --y: 50.5%; }
.c-legende { margin-top: 18px; max-width: 64%; }
@media (max-width: 920px) { .c-legende { max-width: 62%; } }
.c-legende ol { list-style: none; counter-reset: l; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.95rem; color: var(--text-leise); }
.c-legende li { counter-increment: l; display: flex; gap: 8px; align-items: center; }
.c-legende li::before { content: counter(l); width: 22px; height: 22px; border-radius: 50%; background: var(--gruen); color: #fff; font-weight: 700; font-size: 0.8rem; display: grid; place-items: center; flex: none; }
@media (max-width: 920px) { .c .c-hero .innen { grid-template-columns: 1fr; } .c-bild { margin-right: auto; } }
@media (max-width: 640px) { .c-bild { margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) { .c-legende { display: none; } }

/* Fakten: eine ruhige Zeile */
.c-fakten { padding: 22px 0; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.c-fakten ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.c-fakten li { position: relative; padding-left: 24px; font-size: 0.98rem; line-height: 1.4; }
.c-fakten li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2.5px solid var(--gruen); border-bottom: 2.5px solid var(--gruen); transform: rotate(-45deg); }

/* Beispielwoche: Desktop alle sechs, nur eine Pfeil-Ebene (die Folien); Handy: wischen */
.c .karussell-steuerung { display: none !important; }
@media (min-width: 1000px) { .c .woche-spur { gap: 16px; } .c .beitrag { flex: 0 0 calc((100% - 5 * 16px) / 6); } }
.c-wischen { display: none; margin-top: 4px; font-size: 0.85rem; color: var(--text-leise); }
@media (max-width: 999px) { .c-wischen { display: block; } }

/* Schaubilder: Abspielknopf in die freie obere Ecke */
.c .film-knopf { top: 10px; bottom: auto; }

/* Nachweis: Niederschrift antippbar */
.c-gross { display: block; cursor: zoom-in; }
.c-tipp { display: none; }
@media (max-width: 760px) { .c-tipp { display: inline; } }

/* Was sich ändert + KI in einem Abschnitt */
.c-ki { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--linie); }
.c-unter { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: 8px; }

/* Im Einsatz: ausgewogen */
.c .betrieb { max-width: none; }
.c .betrieb { grid-template-columns: 240px minmax(0, 1fr); }
.c .betrieb img { width: 240px; }
@media (max-width: 640px) { .c .betrieb { grid-template-columns: 1fr; } }