/* Erzeugt von tools/seo-build.py -- Leistungs- und Standortseiten.
   Nutzt die Tokens aus style.css (--accent, --outline, --text-*). */

/* Die Mittelspalte. Bisher gab es dafuer ueberhaupt keine Regel: die
   Startseite bringt ihre eigene .container-Definition im Inline-CSS mit,
   die erzeugten Seiten hatten dadurch weder Hoechstbreite noch
   Innenabstand. Auf dem Handy begann jede Ueberschrift bei x=0, also
   direkt an der Bildschirmkante. */
.container { width: 100%; max-width: 1200px; margin-inline: auto;
             padding-inline: 1.25rem; box-sizing: border-box; }
@media (min-width: 700px) { .container { padding-inline: 1.75rem; } }

.brotkrumen { padding: 1rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.brotkrumen a { color: var(--text-secondary); text-decoration: none; }
.brotkrumen a:hover { color: var(--accent); text-decoration: underline; }
.brotkrumen__pfeil { opacity: 0.5; }

.seo-hero { padding: 3rem 0 2.5rem; }
.seo-hero h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 1rem;
               color: var(--text-primary); }
.seo-hero__lead { font-size: 1.15rem; line-height: 1.7; color: var(--text-secondary);
                  max-width: 62ch; margin: 0 0 1.75rem; }
.seo-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.seo-btn { display: inline-flex; align-items: center; justify-content: center;
           padding: 0.8rem 1.5rem; border-radius: 999px; font-weight: 600;
           text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.seo-btn--primary { background: var(--accent); color: #04121a;
                    box-shadow: 0 8px 24px var(--accent-dim); }
.seo-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--accent-glow); }
.seo-btn--ghost { border: 1px solid var(--outline); color: var(--text-primary); }
.seo-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.seo-block { padding: 3rem 0; }
.seo-block--alt { background: rgba(255, 255, 255, 0.02);
                  border-block: 1px solid var(--outline); }
.seo-block h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0 0 1.9rem;
                color: var(--text-primary); }
.seo-block { padding: 3.5rem 0; }
.seo-schmal { max-width: 68ch; margin-inline: auto; text-align: center; }
.seo-schmal p { color: var(--text-secondary); line-height: 1.8; font-size: 1.12rem;
                margin-inline: auto; }
.seo-block--alt .seo-schmal h2 { text-align: center; }
/* Listen und Zwischenueberschriften bleiben linksbuendig -- zentrierte
   Aufzaehlungen sind schwer zu lesen. */
.seo-schmal h3, .seo-schmal ul, .seo-schmal .seo-liste { text-align: left; }
.seo-schmal h3 { color: var(--text-primary); margin: 2rem 0 0.75rem; font-size: 1.05rem; }

.seo-karten { display: grid; gap: 1.25rem;
              grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 1040px) {
  .seo-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seo-karten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.seo-karte { background: var(--bg-card); border: 1px solid var(--outline);
             border-radius: var(--border-radius); padding: 1.35rem; }
.seo-karte h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--text-primary); }
.seo-karte p { margin: 0; color: var(--text-secondary); line-height: 1.65; font-size: 0.95rem; }
.seo-karte--link { text-decoration: none; display: block;
                   transition: border-color 0.2s, transform 0.2s; }
.seo-karte--link:hover { border-color: var(--accent); transform: translateY(-2px); }

.seo-liste { list-style: none; padding: 0; margin: 0;
             display: flex; flex-wrap: wrap; gap: 0.6rem; }
.seo-liste a { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px;
               border: 1px solid var(--outline); color: var(--text-secondary);
               text-decoration: none; font-size: 0.9rem; }
.seo-liste a:hover { border-color: var(--accent); color: var(--accent); }

.seo-cta { padding: 3.5rem 0; text-align: center; }
.seo-cta h2 { margin: 0 0 0.75rem; color: var(--text-primary); }
.seo-cta p { color: var(--text-secondary); max-width: 58ch; margin: 0 auto 1.75rem;
             line-height: 1.7; }
.seo-cta .seo-hero__cta { justify-content: center; }

/* FAQ -- gleiche Klassen wie auf der Startseite, damit es identisch aussieht. */
.faq-list { max-width: 860px; margin-inline: auto;
             display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: var(--bg-card); border: 1px solid var(--outline);
            border-radius: var(--border-radius); overflow: hidden; }
.faq-q { cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.25rem;
         font-weight: 600; color: var(--text-primary); position: relative; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: ""; position: absolute; right: 1.25rem; top: 50%;
                width: 9px; height: 9px; margin-top: -6px;
                border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
                transform: rotate(45deg); transition: transform 0.25s ease; }
.faq-item[open] .faq-q::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-a { padding: 0 1.25rem 1.2rem; }
.faq-a p { margin: 0; color: var(--text-secondary); line-height: 1.7; }

/* Fusszeile mit Spalten -- traegt die interne Verlinkung auf jeder Seite. */
.seo-footer { border-top: 1px solid var(--outline); margin-top: 2rem;
              padding: 2.5rem 0 1.5rem; }
.seo-footer__grid { display: grid; gap: 2rem;
                    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.seo-footer h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
                 color: var(--text-secondary); margin: 0 0 0.9rem; }
.seo-footer ul { list-style: none; padding: 0; margin: 0; }
.seo-footer li { margin-bottom: 0.5rem; }
.seo-footer a { color: var(--text-primary); text-decoration: none; font-size: 0.92rem; }
.seo-footer a:hover { color: var(--accent); }
.seo-footer__kontakt li { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }
.seo-footer__unten { margin-top: 2rem; padding-top: 1.25rem;
                     border-top: 1px solid var(--outline);
                     color: var(--text-secondary); font-size: 0.85rem; }
.seo-footer__unten a { color: var(--text-secondary); }

/* Mega-Menue. Baut auf .dropdown-menu aus style.css auf und verbreitert es. */
header.index-style-header .dropdown-menu--mega {
  min-width: min(1240px, calc(100vw - 2rem));
  left: 50%; transform: translateX(-50%); padding: 1.25rem;
}
.mega-grid { display: grid; gap: 1.5rem;
             grid-template-columns: repeat(3, minmax(0, 1fr)) 1.15fr; }
.mega-spalte h3, .mega-info h3 { font-size: 0.72rem; text-transform: uppercase;
             letter-spacing: 0.09em; color: var(--text-secondary); margin: 0 0 0.7rem; }
.mega-spalte ul { list-style: none; padding: 0; margin: 0; }
.mega-spalte li { margin-bottom: 0.15rem; }
.mega-spalte a { display: block; padding: 0.5rem 0.6rem; border-radius: 8px;
                 text-decoration: none; transition: background 0.15s; }
.mega-spalte a:hover, .mega-spalte a:focus-visible {
                 background: rgba(255, 255, 255, 0.06); outline: none; }
.mega-name { display: block; color: var(--text-primary); font-size: 0.92rem; font-weight: 600; }
.mega-teaser { display: block; color: var(--text-secondary); font-size: 0.8rem;
               margin-top: 0.1rem; }
.mega-info { border-left: 1px solid var(--outline); padding-left: 1.25rem; }
.mega-info p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6;
               margin: 0 0 0.9rem; }
.mega-kontakt { list-style: none; padding: 0; margin: 0 0 1rem; }
.mega-kontakt a { color: var(--text-primary); text-decoration: none; font-size: 0.88rem; }
.mega-kontakt a:hover { color: var(--accent); }
/* Nur-Links-Variante: Seiten mit eigener Fusszeile bekommen die Spalten davor. */
.seo-footer--nurlinks { margin-top: 0; padding-bottom: 0.5rem; }
/* Kachel, deren Seite das Einbetten verbietet: gleiche Optik, aber Link. */
.project-showcase-play--extern { text-decoration: none; }

/* -- Eigene Profile -------------------------------------------------------- */
.profil-raster { display: grid; gap: 1rem;
                 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 640px; }
.profil-karte { display: flex; align-items: center; gap: 0.9rem;
                padding: 1.1rem 1.25rem; border: 1px solid var(--outline);
                border-radius: var(--border-radius); background: var(--bg-card);
                text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.profil-karte:hover { border-color: var(--accent); transform: translateY(-2px); }
.profil-karte .sym { width: 26px; height: 26px; flex: 0 0 26px; color: var(--accent); }
.profil-karte__text { display: flex; flex-direction: column; min-width: 0; }
.profil-karte__netz { color: var(--text-primary); font-weight: 600; font-size: 0.98rem; }
.profil-karte__name { color: var(--text-secondary); font-size: 0.86rem; }

/* -- Verweis von den Leistungs-Tabs auf die Unterseite ---------------------
   Der Tab bleibt ein Umschalter, der Pfeil daneben fuehrt zur Seite. */
.feat-tab-zeile { position: relative; display: block; }
.feat-tab-zeile .feat-tab { width: 100%; padding-right: 5.5rem; }
.feat-tab-mehr {
  position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--outline, rgba(255,255,255,0.12));
  color: var(--text-secondary, #94a3b8); background: transparent;
  font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}
.feat-tab-zeile:hover .feat-tab-mehr,
.feat-tab-zeile:focus-within .feat-tab-mehr,
.feat-tab-zeile .feat-tab.is-active ~ .feat-tab-mehr { opacity: 1; }
.feat-tab-mehr:hover { color: var(--accent, #06B6D4); border-color: var(--accent, #06B6D4); }
@media (max-width: 700px) {
  .feat-tab-mehr { opacity: 1; position: static; transform: none;
                   display: inline-block; margin: 0 0 0.75rem 3.2rem; }
  .feat-tab-zeile .feat-tab { padding-right: 1rem; }
}

/* -- Leistungsliste auf der Startseite ------------------------------------- */
.leistungen-alle { margin-top: 2.5rem; padding-top: 1.75rem;
                   border-top: 1px solid var(--outline, rgba(255,255,255,0.08)); }
.leistungen-alle__titel { margin: 0 0 1rem; font-size: 0.74rem; font-weight: 600;
                          letter-spacing: 0.13em; text-transform: uppercase;
                          color: var(--text-secondary, #94a3b8); }

/* -- Bild auf Leistungsseiten ---------------------------------------------- */
/* 980px waren zu dominant: bei 3:2 ergibt das ueber 650px Hoehe und das Bild
   uebernimmt die Seite. Es illustriert, es ist nicht der Inhalt. */
.seo-bild { margin: 0 auto; max-width: 660px; }
.seo-bild img { display: block; width: 100%; height: auto;
                border: 1px solid var(--outline); border-radius: var(--border-radius); }
.seo-bild figcaption { margin-top: 0.9rem; text-align: center;
                       color: var(--text-secondary); font-size: 0.88rem;
                       line-height: 1.6; }

/* -- Ablauf in vier Schritten ----------------------------------------------
   Zwei Spalten statt drei: bei vier Karten stuende sonst eine allein in der
   zweiten Reihe. Die Nummer sitzt als eigenes Element neben dem Text, damit
   die Reihenfolge auf einen Blick lesbar ist. */
.ablauf-spur { list-style: none; margin: 0; padding: 0; display: grid;
               gap: 1.4rem 1.8rem;
               grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
               /* Die Linie ragt bewusst in die Spaltenluecke; am Rand des
                  Containers wird sie abgeschnitten statt die Seite zu
                  verbreitern. */
               overflow: hidden; }
.ablauf-schritt { position: relative; padding-top: 3rem; }
.ablauf-schritt::before { content: ""; position: absolute; top: 1.15rem;
  left: 2.9rem; right: -1.8rem; height: 1px;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.5), rgba(255, 255, 255, 0.07)); }
.ablauf-schritt:last-child::before { display: none; }
.ablauf-schritt__nr { position: absolute; top: 0; left: 0;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid;
  place-items: center; font-weight: 700; font-size: 0.95rem;
  font-variant-numeric: tabular-nums; color: var(--accent);
  background: var(--bg-deep); border: 1px solid rgba(6, 182, 212, 0.55); }
.ablauf-schritt h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--text-primary); }
.ablauf-schritt p { margin: 0; color: var(--text-secondary); line-height: 1.65;
                    font-size: 0.93rem; }
@media (max-width: 640px) {
  /* Einspaltig muss die Linie senkrecht laufen, sonst zeigt sie ins Leere. */
  .ablauf-spur { gap: 1.6rem; }
  .ablauf-schritt { padding: 0 0 0 3.4rem; }
  .ablauf-schritt::before { top: 2.5rem; bottom: -1.6rem; left: 1.15rem;
    right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.5), rgba(255, 255, 255, 0.07)); }
  .ablauf-spur { overflow: visible; }
}

/* -- Nachhaltigkeit auf der Hosting-Seite ----------------------------------
   Eine Tafel statt drei loser Karten: der Abschnitt soll sich als Beleg
   lesen, nicht als weiteres Verkaufsargument. Der Akzent ist gruen und
   nicht das Cyan der Seite -- das setzt ihn ab, ohne laut zu werden. */
.gruen-block { padding: 3rem 0; }
.gruen-tafel {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr);
  gap: 2.5rem; align-items: center;
  background: linear-gradient(150deg, rgba(52, 211, 153, 0.07), transparent 62%),
              var(--bg-card);
  border: 1px solid var(--outline); border-radius: var(--border-radius);
  padding: 2.5rem;
}
.gruen-auge { display: inline-block; font-size: 0.72rem; font-weight: 600;
              letter-spacing: 0.16em; text-transform: uppercase;
              color: #34d399; margin-bottom: 0.7rem; }
.gruen-text h2 { margin: 0 0 0.9rem; font-size: clamp(1.4rem, 3vw, 1.9rem);
                 color: var(--text-primary); }
.gruen-text > p { margin: 0 0 1.3rem; color: var(--text-secondary);
                  line-height: 1.75; max-width: 62ch; }

/* Kurze Belege als Chips -- Standort und Rechtslage auf einen Blick. */
.gruen-marken { list-style: none; margin: 0 0 1.6rem; padding: 0;
                display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gruen-marken li { font-size: 0.8rem; padding: 0.35rem 0.8rem;
                   border: 1px solid var(--outline); border-radius: 999px;
                   color: var(--text-secondary); }

/* Die Zahl traegt, der Text erklaert. */
.gruen-zahlen { margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1.25rem;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gruen-zahl { border-top: 1px solid rgba(52, 211, 153, 0.35); padding-top: 0.8rem; }
.gruen-zahl dt { font-size: 1.35rem; font-weight: 700; color: #34d399;
                 font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
.gruen-zahl dd { margin: 0; font-size: 0.88rem; line-height: 1.6;
                 color: var(--text-secondary); }

.gruen-hinweis { margin: 0; color: var(--text-secondary); font-size: 0.82rem;
                 line-height: 1.6; max-width: 60ch; }

/* -- Zertifikate als Dokument ----------------------------------------------
   Die erste Seite des PDF wird gezeigt, nicht nur sein Dateiname. Wer den
   Beleg sehen will, sieht ihn sofort; das PDF liegt trotzdem dahinter. */
.gruen-beleg { grid-column: 1 / -1; margin-top: 2.25rem;
               padding-top: 1.75rem; border-top: 1px solid var(--outline); }
.gruen-beleg__titel { margin: 0 0 1.1rem; font-size: 0.72rem; font-weight: 600;
                      letter-spacing: 0.16em; text-transform: uppercase;
                      color: var(--text-secondary); }
.gruen-urkunden { list-style: none; margin: 0; padding: 0; display: grid;
                  gap: 1.25rem;
                  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.urkunde a { display: flex; gap: 1.1rem; align-items: flex-start;
             text-decoration: none; padding: 0.9rem; border-radius: 12px;
             border: 1px solid var(--outline); background: rgba(255,255,255,0.02);
             transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.urkunde a:hover { border-color: rgba(52, 211, 153, 0.6);
                   background: rgba(52, 211, 153, 0.06);
                   transform: translateY(-2px); }
/* Weisses Blatt auf dunklem Grund: das Dokument soll wie Papier wirken. */
.urkunde__blatt { flex: 0 0 auto; width: 86px; border-radius: 4px;
                  overflow: hidden; background: #fff; line-height: 0;
                  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.urkunde__blatt img { display: block; width: 100%; height: auto; }
.urkunde__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.urkunde__titel { color: var(--text-primary); font-weight: 700; font-size: 0.98rem; }
.urkunde__quelle { color: #34d399; font-size: 0.82rem; font-weight: 600; }
.urkunde__meta { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.55; }
.urkunde__oeffnen { margin-top: 0.45rem; color: var(--text-secondary);
                    font-size: 0.78rem; font-weight: 600; }
.urkunde__oeffnen::after { content: " ↗"; }
.urkunde a:hover .urkunde__oeffnen { color: #34d399; }


.gruen-siegel {
  justify-self: center; width: 172px; height: 172px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 0.15rem;
  border: 2px solid rgba(52, 211, 153, 0.55);
  background: radial-gradient(circle at 50% 35%,
              rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.04) 70%);
}
.gruen-siegel__zahl { font-size: 2rem; font-weight: 800; color: #34d399;
                      line-height: 1; }
.gruen-siegel strong { font-size: 0.75rem; letter-spacing: 0.1em;
                       text-transform: uppercase; color: var(--text-primary);
                       font-weight: 600; }
.gruen-siegel__ort { font-size: 0.72rem; color: var(--text-secondary); }

@media (max-width: 860px) {
  .gruen-tafel { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.75rem; }
  .gruen-siegel { grid-row: 1; width: 132px; height: 132px; justify-self: start; }
  .gruen-siegel__zahl { font-size: 1.6rem; }
}


/* -- Praxisbeispiele -------------------------------------------------------
   Der Beleg der Systemseite. Er steht dort, wo auf den uebrigen
   Leistungsseiten die Referenzkacheln stehen, und hat deshalb deren Gewicht:
   Tafel statt Textkarte, Logo und Art oben, unten das Konkrete -- beim
   Kunden die Fristen, bei uns selbst der Inhalt eines Kundenordners. */
:root[data-theme="light"] .praxis-karte__logo .pd-ondark { display: none; }
:root[data-theme="light"] .praxis-karte__logo .pd-light { display: block; }

/* Fristen: Datum links, Sache rechts -- als Liste liest man die drei
   Stichtage in Sekunden, im Fliesstext gar nicht. */
@media (max-width: 520px) {
  .praxis-fristen li { grid-template-columns: 1fr; }
}


/* Nicht an den Kartenboden schieben: bei ungleich langen Karten riss das
   eine Luecke mitten in die kuerzere. */

/* -- Google-Bewertungen ---------------------------------------------------- */
.bew-block { padding: 1rem 0 4rem; }
.bew-raster { display: grid; gap: 1.25rem; margin-top: 2.5rem;
              grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.bew-raster--einzeln { grid-template-columns: minmax(0, 640px); margin-top: 0; }
.bew-karte { margin: 0; padding: 1.6rem; background: var(--bg-card);
             border: 1px solid var(--outline); border-radius: var(--border-radius);
             display: flex; flex-direction: column; gap: 0.9rem; }
.bew-logo { display: block; width: 132px; height: 34px;
            object-fit: contain; object-position: left center;
            opacity: 0.92; }
.bew-karte blockquote { margin: 0; flex: 1; }
.bew-karte blockquote p { margin: 0; color: var(--text-secondary);
                          line-height: 1.7; font-size: 0.95rem; }
.bew-karte blockquote p::before { content: "„"; }
.bew-karte blockquote p::after { content: "“"; }
.bew-karte figcaption { display: flex; align-items: center; gap: 0.7rem;
                        flex-wrap: wrap; padding-top: 0.9rem;
                        border-top: 1px solid var(--outline); }
.bew-sterne { color: #fbbf24; letter-spacing: 1px; font-size: 0.95rem; }
.bew-name { color: var(--text-primary); font-weight: 600; font-size: 0.92rem; }

/* -- Kundenstimmen als Bento-Raster ----------------------------------------
   Der Effekt stammt aus einer React/Framer-Motion-Vorlage und ist hier mit
   reinem CSS nachgebaut: Weichzeichner plus Versatz nach oben, gestaffelt je
   Karte. Ausgeloest wird er von dem .reveal-Beobachter, der ohnehin laeuft --
   kein zusaetzliches Skript. */
.bento-block { padding: 3.5rem 0 4.5rem; border-top: 1px solid var(--outline); }
.bento-kopf { text-align: center; max-width: 62ch; margin: 0 auto 2.75rem; }
.bento-kopf__auge { display: inline-block; font-size: 0.72rem; font-weight: 600;
                    letter-spacing: 0.16em; text-transform: uppercase;
                    color: var(--accent); margin-bottom: 0.75rem; }
.bento-kopf h2 { margin: 0 0 0.8rem; font-size: clamp(1.6rem, 4vw, 2.3rem);
                 color: var(--text-primary); }
.bento-kopf p { margin: 0; color: var(--text-secondary); line-height: 1.7; }
.bento-kopf__note { display: inline-flex; align-items: center; gap: 0.5rem;
                    margin-top: 1.1rem; padding: 0.35rem 0.9rem;
                    border: 1px solid var(--outline); border-radius: 999px;
                    font-size: 0.82rem; color: var(--text-primary); }
.bento-kopf__stern { color: #fbbf24; letter-spacing: 1px; }

.bento-raster { display: grid; gap: 1rem;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                align-items: start; }
.bento-spalte { display: grid; gap: 1rem; }

.bento-karte {
  position: relative; overflow: hidden; margin: 0;
  padding: 1.5rem; border-radius: 16px;
  border: 1px solid var(--outline); background: var(--bg-card);
  display: flex; flex-direction: column; gap: 1.1rem;
  /* Ausgangszustand des Effekts */
  opacity: 0; transform: translateY(-20px); filter: blur(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease,
              border-color 0.25s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.visible .bento-karte { opacity: 1; transform: none; filter: blur(0); }
/* Ohne JavaScript sind die Karten sofort da statt unsichtbar. */
html:not(.js) .bento-karte { opacity: 1; transform: none; filter: none; }
.bento-karte:hover { border-color: var(--accent); }

.bento-karte blockquote { margin: 0; flex: 1; }
.bento-karte blockquote p { margin: 0; color: var(--text-secondary);
                            line-height: 1.7; font-size: 0.95rem; }
.bento-karte blockquote p::before { content: "„"; }
.bento-karte blockquote p::after { content: "“"; }
.bento-karte figcaption { display: flex; align-items: center; gap: 0.9rem;
                          padding-top: 1rem; border-top: 1px solid var(--outline); }
.bento-karte__logo { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 12px;
                     display: grid; place-items: center; padding: 0.4rem;
                     background: rgba(255, 255, 255, 0.06); }
.bento-karte__logo img { display: block; max-width: 100%; max-height: 100%;
                         width: auto; height: auto; object-fit: contain; }
.bento-karte__wer { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bento-karte__name { color: var(--text-primary); font-weight: 600; font-size: 0.95rem; }
.bento-karte__stern { color: #fbbf24; font-size: 0.82rem; letter-spacing: 1px; }

/* Akzentkarte */
.bento-karte--akzent { background: linear-gradient(160deg,
                       rgba(6, 182, 212, 0.16), rgba(6, 182, 212, 0.05));
                       border-color: rgba(6, 182, 212, 0.35); }
.bento-karte--akzent blockquote p { color: var(--text-primary); }

/* Hervorgehobene Karte mit Gitterlinien -- aus der Vorlage uebernommen */
.bento-karte--hervor { background: #101318; }
.bento-karte--hervor blockquote p { color: var(--text-primary); font-size: 1rem; }
.bento-karte__muster {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 50px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
          mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}
.bento-karte--hervor > *:not(.bento-karte__muster) { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .bento-karte { transition: none; opacity: 1; transform: none; filter: none; }
}

/* -- Logo-Wand auf der Referenzen-Seite ------------------------------------
   Kacheln statt frei schwebender Bilder: die Logos haben sehr
   unterschiedliche Formate, erst ein gleich grosser Rahmen bringt Ruhe. */
.logo-wand-block { padding: 3rem 0 4rem; }
.logo-wand__kopf { text-align: center; max-width: 62ch; margin: 0 auto 2.75rem; }
.logo-wand__auge { display: inline-block; font-size: 0.72rem; font-weight: 600;
                   letter-spacing: 0.16em; text-transform: uppercase;
                   color: var(--accent); margin-bottom: 0.75rem; }
.logo-wand__kopf h2 { margin: 0 0 0.8rem; font-size: clamp(1.6rem, 4vw, 2.3rem);
                      color: var(--text-primary); }
.logo-wand__kopf p { margin: 0; color: var(--text-secondary); line-height: 1.7; }
.logo-wand__zahl { display: inline-block; margin-top: 1.1rem; padding: 0.35rem 0.9rem;
                   border: 1px solid var(--outline); border-radius: 999px;
                   font-size: 0.8rem; color: var(--text-secondary); }

.logo-wand { list-style: none; margin: 0; padding: 0;
             display: grid; gap: 1rem;
             /* Etwas breitere Zellen als zuvor: die Angleichung ueber die
                Flaeche richtet sich nach dem breitesten Schriftzug, und der
                braucht Platz, damit die uebrigen Logos nicht schrumpfen. */
             grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
             /* 70px Grundmass: alle Logos ausser dem sehr breiten
                Schriftzug SIN DECADE bleiben darunter. Der eine stoesst
                an die Zellenbreite und wird von max-width sauber
                gebremst -- besser, als wegen eines Ausreissers alle
                uebrigen zu verkleinern. */
             --logo-basis: 70px; }
.logo-wand li {
  display: grid; place-items: center; min-height: 132px; padding: 1.1rem;
  background: var(--bg-card); border: 1px solid var(--outline);
  border-radius: var(--border-radius);
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.logo-wand li:hover { border-color: var(--accent); transform: translateY(-3px);
                      background: rgba(255, 255, 255, 0.04); }
/* max-width als Notbremse: wird eine Spalte doch einmal schmaler als das
   breiteste Logo, schrumpft object-fit das Bild sauber mit, statt dass es
   aus der Kachel laeuft. */
.logo-wand img { display: block; max-width: 100%; max-height: none;
                 width: calc(var(--logo-basis) * var(--v, 1));
                 height: calc(var(--logo-basis) / var(--v, 1));
                 object-fit: contain;
                 opacity: 0.92; transition: opacity 0.25s, transform 0.25s; }
@media (max-width: 560px) {
  .logo-wand { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
               --logo-basis: 50px; }
  .logo-wand li { min-height: 104px; }
}
.logo-wand li:hover img { opacity: 1; transform: scale(1.04); }
.logo-wand .pd-light { display: none; }
:root[data-theme="light"] .logo-wand .pd-ondark { display: none; }
:root[data-theme="light"] .logo-wand .pd-light { display: block; }
@media (max-width: 640px) {
  .logo-wand { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.75rem; }
  .logo-wand li { min-height: 92px; padding: 0.8rem; }
  .logo-wand img { max-height: 40px; }
}

/* -- Bewertungs-Slider einrahmen -------------------------------------------
   Der Slider selbst bleibt unveraendert, er bekommt nur eine Buehne: eigener
   Grund, Rahmen und ein Akzentschimmer, damit der Abschnitt Gewicht bekommt. */
#bewertungen { position: relative; padding: 3.5rem 0 4.5rem;
               border-top: 1px solid var(--outline); }
#bewertungen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 0%,
              rgba(6, 182, 212, 0.10) 0%, transparent 65%);
}
#bewertungen > * { position: relative; }
#bewertungen .section-head { text-align: center; }
#bewertungen a[href*="google"], #bewertungen .srt-mehr {
  color: var(--accent); text-decoration: none; font-weight: 600;
}
#bewertungen a[href*="google"]:hover { text-decoration: underline; }


/* -- Kundenstimme ---------------------------------------------------------- */
.zitat { max-width: 62ch; margin: 0 auto; padding: 2rem;
         border: 1px solid var(--outline); border-radius: var(--border-radius);
         background: var(--bg-card); position: relative; }
.zitat blockquote { margin: 0; }
.zitat blockquote p { margin: 0; font-size: 1.12rem; line-height: 1.7;
                      color: var(--text-primary); }
.zitat blockquote p::before { content: "„"; }
.zitat blockquote p::after { content: "“"; }
.zitat figcaption { margin-top: 1.1rem; display: flex; flex-wrap: wrap;
                    gap: 0.5rem; align-items: baseline;
                    color: var(--text-secondary); font-size: 0.9rem; }
.zitat figcaption strong { color: var(--accent); font-weight: 600; }
.zitat figcaption span::before { content: "· "; }

/* -- Referenz-Kacheln ------------------------------------------------------
   Screenshot statt iframe: mehrere der gezeigten Seiten setzen
   X-Frame-Options und liessen sich gar nicht einbetten. */
.ref-raster { display: grid; gap: 1.5rem;
              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ref-karte h3 { margin: 1rem 0 0.35rem; font-size: 1.05rem; color: var(--text-primary); }
.ref-karte p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }
.ref-karte__rahmen { position: relative; display: block; overflow: hidden;
                     border: 1px solid var(--outline); border-radius: var(--border-radius);
                     background: var(--bg-card); text-decoration: none;
                     transition: border-color 0.2s, transform 0.2s; }
.ref-karte__rahmen:hover { border-color: var(--accent); transform: translateY(-2px); }
.ref-karte__leiste { display: flex; align-items: center; gap: 0.6rem;
                     padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--outline);
                     background: rgba(255, 255, 255, 0.04); }
.ref-karte__punkte { display: inline-flex; gap: 4px; }
.ref-karte__punkte i { width: 8px; height: 8px; border-radius: 50%;
                       background: var(--outline); }
.ref-karte__url { font-size: 0.78rem; color: var(--text-secondary);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-karte__rahmen img { display: block; width: 100%; height: auto;
                         aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }
.ref-karte__hinweis { position: absolute; right: 0.7rem; bottom: 0.7rem;
                      padding: 0.35rem 0.8rem; border-radius: 999px;
                      background: var(--accent); color: #04121a;
                      font-size: 0.78rem; font-weight: 600;
                      opacity: 0; transform: translateY(4px);
                      transition: opacity 0.2s, transform 0.2s; }
.ref-karte__rahmen:hover .ref-karte__hinweis,
.ref-karte__rahmen:focus-visible .ref-karte__hinweis { opacity: 1; transform: translateY(0); }

/* -- Logo-Laufband (Muster: Weigola) --------------------------------------
   Zwei identische Spuren nebeneinander; die Animation laeuft von 0 auf -50 %.
   Ist die erste Spur durch, steht die zweite exakt an ihrer Stelle -- dadurch
   wirkt es endlos, ohne dass JavaScript nachhelfen muss. */
.laufband { padding: 2.5rem 0; }
.laufband__titel {
  text-align: center; margin: 0 0 1.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-secondary, #94a3b8);
}
.laufband__fenster {
  position: relative; display: flex; overflow: hidden;
  /* overflow-x wird auf dem Handy zu auto, siehe unten -- so laesst sich
     das Band auch von Hand weiterschieben. */
  /* Weiche Kanten, damit die Logos aus- und einblenden statt abgeschnitten
     zu wirken. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.laufband__spur {
  display: flex; align-items: center; flex: 0 0 auto;
  /* Breite ausrechnen statt den Browser schaetzen lassen.
     WebKit meldete die Spur mit 3345 statt 3552 Pixeln -- 207 zu wenig fuer
     24 Kacheln a 148 Pixel. Die zweite Spur setzte auf diesem falschen Wert
     auf und schob sich ueber die erste; auf dem iPhone lagen dadurch drei
     Logos uebereinander. min-width: max-content half nicht, weil WebKit auch
     max-content falsch berechnet. Die Zellenzahl steht als --zellen im
     Markup, der Rest ist Multiplikation und stimmt in jeder Engine. */
  width: calc(var(--zellen, 24) * var(--zelle-breite));
  min-width: max-content;
  list-style: none; margin: 0; padding: 0;
  /* 28s ist keine Geschmacksentscheidung, sondern gemessen: das Vorbild laeuft
     mit rund 130 Pixeln je Sekunde auf dem Handy und 174 auf dem Laptop. Bei
     unseren Spurbreiten (3552px mobil, 4800px am Laptop) trifft ein einziger
     Wert beides. Vorher standen dort 75s -- und weil die Kacheln mobil
     schmaler sind, legte das Band dort bei gleicher Dauer weniger Weg zurueck:
     47 Pixel je Sekunde, langsamer als am Laptop mit 64. */
  animation: laufband 28s linear infinite;
}
/* Zellenmass wie beim Vorbild: jede Kachel ist gleich breit und gleich hoch,
   das Logo wird hineingepasst. Davor bekam jedes Logo dieselbe *Flaeche*
   (--logo-basis im Quadrat, verteilt ueber das Seitenverhaeltnis) -- rechnerisch
   sauber, optisch nicht: ein breiter Schriftzug stand dann 22 Pixel hoch neben
   einem 58 Pixel hohen Signet. Ueber die feste Hoehe stehen jetzt alle Logos
   gleich hoch, denn keines unserer Logos ist breiter als 148/52 des eigenen
   Seitenverhaeltnisses; ein kuenftiges breiteres wird von max-width gefasst
   und bleibt mittig in der Zelle. */
.laufband__spur {
  --zelle-breite: 200px;
  --zelle-hoehe: 64px;
  --zelle-polster: 26px;
  --logo-hoehe: 52px;
}
.laufband__spur li {
  /* Einzelschreibweise statt Kurzform: Safari verwirft `flex: 0 0 var(...)`
     komplett, die Zellen fielen dadurch auf flex: 0 1 auto zurueck und
     schrumpften -- auf dem iPhone lagen die Logos uebereinander. */
  flex-grow: 0; flex-shrink: 0; flex-basis: var(--zelle-breite);
  display: grid; place-items: center;
  padding-inline: var(--zelle-polster); height: var(--zelle-hoehe);
}
.laufband__spur img {
  display: block;
  width: auto; height: var(--logo-hoehe);
  max-width: 100%; max-height: var(--logo-hoehe);
  object-fit: contain; opacity: 0.85; transition: opacity 0.25s;
}
/* Jede Marke liegt in zwei Fassungen vor (dunkler/heller Grund). Sichtbar ist
   immer nur eine. Die Originalregeln waren auf .pd-logo gescopet -- die Klasse
   gibt es im Laufband nicht mehr, deshalb hier neu. Zwei Klassen im Selektor,
   damit die Regel schwerer wiegt als .laufband__spur img. */
.laufband .pd-light { display: none; }
:root[data-theme="light"] .laufband .pd-ondark { display: none; }
:root[data-theme="light"] .laufband .pd-light { display: block; }
.laufband__fenster:hover .laufband__spur { animation-play-state: paused; }
.laufband__spur img:hover { opacity: 1; }
@keyframes laufband { from { transform: translateX(0); } to { transform: translateX(-100%); } }


/* ---------------------------------------------------------------------
   Aufklappende Teamkarte -- derselbe Effekt wie auf der Startseite.
   Die Startseite bringt ihn inline mit und benutzt dort eigene Token
   (--surface, --text-muted ...), die es auf den erzeugten Seiten nicht
   gibt. Deshalb stehen die Werte hier fest, mit var(...)-Rueckfall auf
   die vorhandenen Token -- so sieht der Effekt ueberall gleich aus und
   bricht nicht, wenn eine Seite andere Namen benutzt.
   --------------------------------------------------------------------- */
.team-karte { cursor: pointer; }
.team-open {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.9rem auto 0;
  padding: 0.5rem 1.15rem; background: none;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  color: var(--text-secondary, #9ca3af); font: inherit; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.team-open:hover { border-color: var(--accent, #06B6D4); color: var(--accent, #06B6D4); }
.team-open svg { width: 15px; height: 15px; }

.tec-overlay {
  position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  opacity: 0; transition: opacity 0.3s ease;
}
.tec-overlay.show { opacity: 1; }
.tec-wrap { position: fixed; inset: 0; z-index: 1210; display: grid;
            place-items: center; padding: 1.1rem; pointer-events: none; }
.tec-card {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh;
  overflow-y: auto; background: #131318;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); pointer-events: auto;
  scrollbar-width: none; transform-origin: center center;
}
.tec-card::-webkit-scrollbar { display: none; }
.tec-fade { transition: opacity 0.28s ease; }
.tec-card.growing .tec-fade { opacity: 0; }
.tec-img-wrap { position: relative; }
.tec-img-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 84px;
  background: linear-gradient(to top, #131318, transparent); pointer-events: none;
}
.tec-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 46vh;
  object-fit: contain; object-position: center; border-radius: 22px 22px 0 0;
}
.tec-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff; cursor: pointer; transition: background 0.18s, transform 0.18s;
}
.tec-close:hover { background: var(--accent, #06B6D4); color: #04252a; transform: scale(1.06); }
.tec-close svg { width: 20px; height: 20px; transform: rotate(45deg); }
.tec-body { padding: 1.75rem 2rem 2rem; }
.tec-role { color: var(--text-secondary, #9ca3af); font-size: 1rem; font-weight: 600; margin: 0 0 0.2rem; }
.tec-name { font-size: 2rem; color: var(--text-primary, #fff); margin: 0 0 1.1rem; font-weight: 700; }
.tec-bio { color: var(--text-secondary, #9ca3af); font-size: 1rem; line-height: 1.7; margin: 0 0 1.6rem; }
.tec-socials { display: flex; gap: 0.65rem; }
.tec-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09); color: var(--accent, #06B6D4);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.tec-socials a:hover { background: rgba(6, 182, 212, 0.12);
                       border-color: var(--accent, #06B6D4); transform: translateY(-2px); }
.tec-socials svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .tec-body { padding: 1.4rem 1.4rem 1.7rem; }
  .tec-name { font-size: 1.6rem; }
  .tec-img { max-height: 38vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tec-card, .tec-overlay, .tec-fade { transition: none !important; }
}


/* Auf grossen Bildschirmen mehr Breite nutzen.
   Gemessen bei 1470 Pixeln Fensterbreite: der Inhalt endete bei 1200 Pixeln,
   links und rechts blieben je 135 Pixel schwarz -- waehrend Vergleichsseiten
   randlos wirken. Der Deckel steigt deshalb ab 1360 Pixeln auf 1400.
   Nicht weiter: der Hero ist zweispaltig, die Textspalte waechst mit, und
   ueber rund 700 Pixel wird Fliesstext schwer zu lesen. Das Hero-Foto waechst
   mit, sonst entstuende rechts eine neue Luecke statt der alten. */
@media (min-width: 1360px) {
  body .container { max-width: 1400px; }
  body .hero-figur { max-width: 600px; }
}


/* ---------------------------------------------------------------------
   Randloser Hero (Vorschau).
   Aufbau wie beim Vergleichsprojekt: Bildebene ganz hinten, dunkler
   Schleier darueber, Inhalt obenauf. Die Breite entsteht dadurch nicht
   ueber einen breiteren Behaelter -- der Inhalt bleibt bei 1400 -- sondern
   dadurch, dass das Foto ueber die volle Fensterbreite laeuft.
   Der Schleier ist links dichter als rechts: links steht der Text, rechts
   sollen die beiden zu sehen sein.
   --------------------------------------------------------------------- */
body #home.hero-breit { position: relative; isolation: isolate; overflow: hidden; }
body #home.hero-breit .hero__bild {
  position: absolute; inset: 0; z-index: -2;
}
body #home.hero-breit .hero__bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 28%;
}
body #home.hero-breit .hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(10,10,12,.94) 0%, rgba(10,10,12,.86) 38%,
                    rgba(10,10,12,.42) 68%, rgba(10,10,12,.30) 100%),
    linear-gradient(to bottom, rgba(10,10,12,.55) 0%, rgba(10,10,12,.15) 40%,
                    rgba(10,10,12,.80) 100%);
}
/* Die rechte Spalte entfaellt -- das Foto ist jetzt der Hintergrund. */
body #home.hero-breit .hero-figur { display: none; }
body #home.hero-breit .container { grid-template-columns: minmax(0, 1fr); }
body #home.hero-breit .hero-text { max-width: 680px; }
@media (max-width: 860px) {
  body #home.hero-breit .hero__bild img { object-position: 58% 22%; }
  body #home.hero-breit .hero__schleier {
    background: linear-gradient(to bottom, rgba(10,10,12,.72) 0%,
                rgba(10,10,12,.55) 35%, rgba(10,10,12,.92) 100%);
  }
  body #home.hero-breit .hero-text { max-width: none; }
}


/* ---------------------------------------------------------------------
   Breiter aufgebaut -- gemessen im Vergleich mit dem Referenzprojekt.
   1) Menueschrift auf volles Weiss: 86 Prozent ergaben 8,1:1 Kontrast,
      das Vorbild kommt mit reinem Weiss auf 19:1. Bei 15 Pixeln macht
      das den Unterschied zwischen "lesbar" und "muehsam".
   2) Das Logoband laeuft ueber die volle Fensterbreite statt im 1400er
      Behaelter zu stecken. Der Trick mit 50vw und negativem Rand bricht
      es aus dem Behaelter aus, ohne das Markup zu aendern.
   3) Ab 1600 Pixeln darf der Inhalt auf 1560 wachsen.
   --------------------------------------------------------------------- */
.kopf { --k-text: rgba(255, 255, 255, 0.97); }
.hauptnav__link { color: #fff; }

.laufband__fenster {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
@media (min-width: 1600px) {
  body .container { max-width: 1560px; }
  body .kopf__innen { max-width: calc(1560px + var(--k-gutter) * 2); }
  /* Drei Klassen im Selektor: die 540px-Regel steht weiter unten in der
     Datei und gewinnt sonst nach Quellreihenfolge. */
  body #home .container .hero-figur { max-width: 660px; }
}
/* Der Schleier links war mit 94 Prozent so dicht, dass Lukas dahinter
   verschwand. 78 Prozent lassen ihn durch und halten die Schrift noch
   ueber 4,5:1 -- nachgemessen, nicht geschaetzt. */
body #home.hero-breit .hero__schleier {
  background:
    linear-gradient(to right, rgba(10,10,12,.78) 0%, rgba(10,10,12,.62) 34%,
                    rgba(10,10,12,.34) 64%, rgba(10,10,12,.26) 100%),
    linear-gradient(to bottom, rgba(10,10,12,.42) 0%, rgba(10,10,12,.12) 40%,
                    rgba(10,10,12,.72) 100%);
}
body #home.hero-breit .hero__bild img { object-position: center 22%; }

/* Wischhinweis unter dem Bewertungsband. Nur auf dem Handy, weil nur dort
   gewischt wird -- das Skript legt ihn an und nimmt ihn wieder weg. */
.band-hinweis {
  display: none; align-items: center; justify-content: center; gap: 0.45rem;
  width: max-content; margin: 0.9rem auto 0; padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #9ca3af);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  transition: opacity 0.45s ease;
}
.band-hinweis.weg { opacity: 0; }
.band-hinweis svg { width: 15px; height: 15px; animation: bandwink 1.9s ease-in-out infinite; }
@keyframes bandwink {
  0%, 100% { transform: translateX(-2px); }
  50%      { transform: translateX(2px); }
}
@media (max-width: 860px) { .band-hinweis { display: flex; } }
@media (prefers-reduced-motion: reduce) { .band-hinweis svg { animation: none; } }

/* Wischbare Baender auf dem Handy: statt der transform-Animation wird der
   Container wirklich gescrollt (siehe wischbandStarten in effekte.js).
   Die Klasse setzt das Skript -- ohne JavaScript bleibt die Animation. */
@media (max-width: 860px) {
  /* Zwei Klassen im Selektor: .bewband__fenster setzt weiter unten in der
     Datei ein overflow:hidden, das sonst gewinnt. */
  .laufband__fenster.band-wischbar,
  .bewband__fenster.band-wischbar {
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .band-wischbar::-webkit-scrollbar { display: none; }
  .band-wischbar .laufband__spur,
  .band-wischbar .bewband__spur { animation: none;  min-width: max-content; }
}

/* Wer Bewegung reduziert haben moechte, bekommt ein ruhiges Band. */
@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
  .laufband__fenster { overflow-x: auto; }
  .laufband__spur[aria-hidden="true"] { display: none; }
}
@media (max-width: 700px) {
  .laufband__spur {
    --zelle-breite: 148px; --zelle-hoehe: 52px;
    --zelle-polster: 18px; --logo-hoehe: 40px;
  }
}


.seo-gruppe-lead { color: var(--text-secondary); line-height: 1.75; max-width: 68ch;
                   margin: -0.9rem 0 1.6rem; font-size: 1rem; }
.mega-btn { display: inline-block; padding: 0.55rem 1rem; border-radius: 999px;
            background: var(--accent); color: #04121a; font-weight: 600;
            font-size: 0.85rem; text-decoration: none; }


/* == Bewegung und Tiefe ====================================================
   Die Seiten standen technisch sauber, aber still: nichts erschien, nichts
   reagierte. Was hier dazukommt, ist das, was man von einer Agenturseite
   erwartet -- und nichts, was den Seitenaufbau bremst. Alles laeuft ueber
   opacity/transform (GPU), nichts ueber Layout. Wer Bewegung abgeschaltet
   hat, sieht alles sofort und ruhig. */

/* Ohne JavaScript gibt es keinen Beobachter, der .visible setzt -- dann
   muss alles von Anfang an da sein. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

/* Feine Koernung ueber dem Dunkel -- gibt der Flaeche Tiefe statt Plastik. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.main-wrap { position: relative; z-index: 1; }

/* Hero-Schein driftet -- langsam genug, dass man es spuert, nicht sieht. */
.seo-hero__aura { will-change: transform; animation: aura-drift 14s ease-in-out infinite alternate; }
@keyframes aura-drift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 6%, 0) scale(1.08); }
}
.hero-vorzeile i { animation: punkt-puls 2.6s ease-in-out infinite; }
@keyframes punkt-puls {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-dim); }
  50%      { box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.08); }
}

/* Hero-Inhalt: kommt beim Laden von unten, in drei Stufen. */
.js .seo-hero .hero-vorzeile, .js .seo-hero h1, .js .seo-hero__lead,
.js .seo-hero__cta, .js .hero-fakten {
  animation: auftauchen 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.js .seo-hero h1 { animation-delay: 0.08s; }
.js .seo-hero__lead { animation-delay: 0.16s; }
.js .seo-hero__cta { animation-delay: 0.24s; }
.js .hero-fakten { animation-delay: 0.34s; }
@keyframes auftauchen {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Gestaffeltes Erscheinen der Karten innerhalb eines Abschnitts. Der
   Abschnitt selbst kommt ueber .reveal aus style.css; die Kinder folgen
   im Abstand von 70 ms. */
.js .reveal .stufe { opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.visible .stufe { opacity: 1; transform: none; }
.reveal.visible .stufe:nth-child(2) { transition-delay: 0.07s; }
.reveal.visible .stufe:nth-child(3) { transition-delay: 0.14s; }
.reveal.visible .stufe:nth-child(4) { transition-delay: 0.21s; }
.reveal.visible .stufe:nth-child(5) { transition-delay: 0.28s; }
.reveal.visible .stufe:nth-child(6) { transition-delay: 0.35s; }
.reveal.visible .stufe:nth-child(n+7) { transition-delay: 0.42s; }

/* Die Vorzeile waechst ihren Strich beim Erscheinen. */
.js .reveal .seo-eyebrow::before { transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
.js .reveal.visible .seo-eyebrow::before { transform: scaleX(1); }

/* Zeitstrahl: die Linie zeichnet sich von links nach rechts. */
.js .reveal .ablauf-schritt::before { transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s ease 0.25s; }
.js .reveal.visible .ablauf-schritt::before { transform: scaleX(1); }
.js .reveal.visible .ablauf-schritt:nth-child(2)::before { transition-delay: 0.45s; }
.js .reveal.visible .ablauf-schritt:nth-child(3)::before { transition-delay: 0.65s; }

/* Lichtpunkt, der der Maus ueber die Karten folgt. Die Position liefert
   effekte.js als --mx/--my je Karte; ohne Maus bleibt alles wie es ist. */
.licht { position: relative; overflow: hidden; }
.licht::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(6, 182, 212, 0.13), transparent 60%);
}
.licht:hover::after { opacity: 1; }
.licht > * { position: relative; z-index: 1; }
.prob-karte.licht > .prob-karte__nr { z-index: 0; }

/* Karten heben sich mit Schein an, Referenzrahmen bekommt Tiefe. */
.umf-karte, .fakt, .weiter-karte, .leist-karte, .seo-karte, .prob-karte, .praxis-karte {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s, box-shadow 0.28s, background 0.28s; }
.umf-karte:hover, .fakt:hover, .leist-karte:hover, .seo-karte--link:hover, .praxis-karte:hover {
  transform: translateY(-4px); border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 18px 40px -18px rgba(6, 182, 212, 0.35), 0 10px 30px -14px rgba(0, 0, 0, 0.6); }
.ref-karte__rahmen { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                                 border-color 0.3s, box-shadow 0.3s; }
.ref-karte__rahmen:hover { transform: translateY(-5px);
  box-shadow: 0 30px 60px -24px rgba(6, 182, 212, 0.4), 0 20px 40px -20px rgba(0, 0, 0, 0.7); }

/* Knoepfe: Glanz laeuft einmal durch, der Pfeil rutscht nach. */
.seo-btn { position: relative; overflow: hidden; }
.seo-btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; }
.seo-btn--primary:hover::after { left: 130%; }
.seo-btn--primary:hover { transform: translateY(-2px) scale(1.02); }

/* Zaehlende Zahlen bekommen feste Breite, damit nichts springt. */
.zaehler { font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.6ch; }

/* Tafel "Wie wir das loesen": Rand leuchtet leicht atmend. */
.loesung { animation: rand-atmen 6s ease-in-out infinite; }
@keyframes rand-atmen {
  0%, 100% { border-color: rgba(6, 182, 212, 0.28); }
  50%      { border-color: rgba(6, 182, 212, 0.5); }
}

/* Wer Bewegung abgeschaltet hat oder ohne Maus arbeitet: alles ruhig. */
@media (prefers-reduced-motion: reduce) {
  .seo-hero__aura, .hero-vorzeile i, .loesung { animation: none !important; }
  .js .seo-hero .hero-vorzeile, .js .seo-hero h1, .js .seo-hero__lead,
  .js .seo-hero__cta, .js .hero-fakten { animation: none !important; opacity: 1; }
  .js .reveal .stufe { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .reveal .seo-eyebrow::before, .js .reveal .ablauf-schritt::before { transform: none !important; transition: none !important; }
  .seo-btn--primary::after { display: none; }
}
@media (hover: none) { .licht::after { display: none; } }

@media (max-width: 900px) {
  header.index-style-header .dropdown-menu--mega {
    min-width: 0; left: 0; transform: none; padding: 0.5rem;
  }
  .mega-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .mega-info { border-left: 0; border-top: 1px solid var(--outline);
               padding-left: 0; padding-top: 0.9rem; }
}

/* == Leistungsseiten: Rhythmus =============================================
   Ausgangslage: zehn Abschnitte, jeder aufgebaut wie der davor -- eine h2,
   darunter drei graue Karten mit je einem Absatz. Inhaltlich richtig, zu
   lesen aber wie ein Formular, und die Referenzen gingen darin unter.

   Jeder Abschnitt bekommt deshalb eine eigene Form: Ziffern fuer die
   Ausgangslage, eine Tafel fuer die Loesung, Haken fuer den Umfang, Zahlen
   fuer die Fakten, einen Zeitstrahl fuer den Ablauf -- und die Referenzen
   eine grosse Kachel statt einer von dreien.
   ------------------------------------------------------------------------ */

.seo-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem;
               margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 700;
               letter-spacing: 0.14em; text-transform: uppercase;
               color: var(--accent); }
.seo-eyebrow::before { content: ""; width: 20px; height: 1px;
                       background: currentColor; opacity: 0.6; }

.seo-kopf { margin: 0 0 2rem; }
.seo-kopf h2 { margin: 0; }
.seo-kopf .seo-gruppe-lead { margin: 0.7rem 0 0; max-width: 62ch; }
.seo-kopf--reihe { display: flex; flex-wrap: wrap; gap: 1rem 2rem;
                   align-items: flex-end; justify-content: space-between; }
.seo-kopf--reihe > div { min-width: 0; }
.seo-btn--klein { padding: 0.55rem 1.1rem; font-size: 0.85rem; }

/* -- Hero: Schein, Vorzeile, drei Zahlen ---------------------------------- */
.seo-hero { position: relative; overflow: hidden; padding: 3.25rem 0 3rem; }
.seo-hero > .container { position: relative; z-index: 1; }
/* Der Schein hatte sichtbare Kanten: der Verlauf sass bei 25 Prozent mit
   50 Prozent Radius, reichte also bis minus 25 Prozent -- und der Hero
   schneidet mit overflow:hidden ab. Auf dem Handy lagen diese Kanten
   ausserhalb des Bildschirms, auf dem Laptop stand da ein Rechteck.

   Zwei Massnahmen: der Verlauf sitzt jetzt mittig (50 Prozent) mit einem
   Radius unter 50 Prozent, wird also von sich aus durchsichtig, bevor er
   den Rand erreicht. Zusaetzlich blendet eine Maske die Flaeche zu allen
   Seiten aus -- damit kann an keiner Kante mehr etwas stehenbleiben, egal
   wie breit das Fenster ist. */
.seo-hero__aura { position: absolute; left: -20%; right: -20%; top: -45%;
                  height: 520px; pointer-events: none;
                  background: radial-gradient(42% 55% at 50% 55%,
                              rgba(6, 182, 212, 0.22), transparent 72%);
                  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%,
                              #000 30%, transparent 100%);
                  mask-image: radial-gradient(50% 50% at 50% 50%,
                              #000 30%, transparent 100%); }
.hero-vorzeile { display: inline-flex; align-items: center; gap: 0.6rem;
                 margin: 0 0 1rem; padding: 0.4rem 0.9rem 0.4rem 0.75rem;
                 border: 1px solid var(--outline); border-radius: 999px;
                 background: rgba(255, 255, 255, 0.03);
                 font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
                 color: var(--text-secondary); }
.hero-vorzeile i { width: 6px; height: 6px; border-radius: 50%;
                   background: var(--accent);
                   box-shadow: 0 0 0 3px var(--accent-dim); }
.hero-fakten { list-style: none; display: flex; flex-wrap: wrap;
               gap: 1.2rem 2.75rem; margin: 2.25rem 0 0; padding: 1.4rem 0 0;
               border-top: 1px solid var(--outline); }
.hero-fakten li { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-fakten strong { font-size: 1.45rem; line-height: 1.1;
                      letter-spacing: -0.02em; color: var(--text-primary);
                      font-variant-numeric: tabular-nums; }
.hero-fakten span { font-size: 0.83rem; color: var(--text-secondary); }

/* -- Ausgangslage: Geisterziffer statt vierter grauer Karte --------------- */
.prob-raster { display: grid; gap: 1.1rem;
               grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.prob-karte { position: relative; overflow: hidden; padding: 1.5rem 1.35rem 1.35rem;
              border: 1px solid var(--outline);
              border-top: 2px solid rgba(248, 113, 113, 0.5);
              border-radius: var(--border-radius);
              background: linear-gradient(180deg, rgba(255, 255, 255, 0.045),
                                          rgba(255, 255, 255, 0.012)); }
.prob-karte__nr { position: absolute; top: -0.75rem; right: 0.5rem;
                  font-size: 3.6rem; font-weight: 800; line-height: 1;
                  letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.055);
                  font-variant-numeric: tabular-nums; }
.prob-karte h3 { position: relative; margin: 0 0 0.45rem; font-size: 1.02rem;
                 color: var(--text-primary); }
.prob-karte p { position: relative; margin: 0; color: var(--text-secondary);
                line-height: 1.65; font-size: 0.94rem; }

/* -- Loesung: eine Tafel, kein weiterer Fliesstext ------------------------ */
.loesung { position: relative; max-width: 76ch; margin-inline: auto;
           padding: 2.6rem 2.2rem; text-align: center; border-radius: 18px;
           border: 1px solid rgba(6, 182, 212, 0.3);
           background: radial-gradient(120% 150% at 50% 0%,
                       rgba(6, 182, 212, 0.13), rgba(255, 255, 255, 0.02) 62%);
           box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32); }
.loesung .seo-eyebrow { margin-bottom: 0.5rem; }
.loesung h2 { margin: 0 0 0.9rem; }
.loesung p { margin: 0 auto; max-width: 62ch; color: var(--text-secondary);
             font-size: 1.08rem; line-height: 1.8; }

/* -- Umfang: abgehakt, zwei Spalten -------------------------------------- */
.umf-raster { display: grid; gap: 0.85rem;
              grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
@media (min-width: 900px) { .umf-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.umf-karte { display: flex; gap: 0.9rem; padding: 1.15rem 1.25rem;
             border: 1px solid var(--outline); border-radius: var(--border-radius);
             background: var(--bg-card);
             transition: border-color 0.2s, transform 0.2s; }
.umf-karte:hover { border-color: rgba(6, 182, 212, 0.42); transform: translateY(-2px); }
.umf-karte .haken { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 0.1rem;
                    fill: none; stroke: var(--accent); stroke-width: 2.4;
                    stroke-linecap: round; stroke-linejoin: round; }
.umf-karte h3 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--text-primary); }
.umf-karte p { margin: 0; color: var(--text-secondary); font-size: 0.93rem;
               line-height: 1.6; }

/* -- Fakten: vier Zahlen statt drei Absaetzen ---------------------------- */
.fakten-raster { display: grid; gap: 1rem;
                 grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fakt { padding: 1.5rem 1.3rem; border: 1px solid var(--outline);
        border-radius: var(--border-radius); background: var(--bg-card); }
.fakt__zahl { display: block; margin-bottom: 0.55rem; line-height: 1;
              font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800;
              letter-spacing: -0.03em; color: var(--accent);
              font-variant-numeric: tabular-nums; }
.fakt h3 { margin: 0 0 0.35rem; font-size: 0.97rem; color: var(--text-primary); }
.fakt p { margin: 0; color: var(--text-secondary); font-size: 0.89rem; line-height: 1.6; }

/* -- Referenzen: eine grosse Kachel, zwei kleine -------------------------- */
/* Der Referenzabschnitt ist das Schaustueck der Seite und darf etwas mehr
   Luft haben als ein Textabschnitt. */
.ref-block { padding: 4rem 0 4.25rem; }
.ref-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.4rem; }
.ref-karte { grid-column: span 6; display: flex; flex-direction: column; gap: 0.95rem; }
@media (min-width: 900px) {
  .ref-karte { grid-column: span 3; }
  .ref-karte--drittel { grid-column: span 2; }
  .ref-karte--gross { grid-column: span 6; display: grid; align-items: center;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem;
    padding: 1.35rem; border-radius: 20px; border: 1px solid var(--outline);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.075),
                                rgba(255, 255, 255, 0.02)); }
}
/* Solange der Screenshot-Dienst noch nicht geliefert hat, steht hier eine
   Flaeche statt eines weissen Lochs. */
.ref-karte__bild { display: block; overflow: hidden;
                   background: linear-gradient(135deg, rgba(255, 255, 255, 0.05),
                                               rgba(255, 255, 255, 0.015)); }
.ref-karte__rahmen img { aspect-ratio: 16 / 10; transition: transform 0.5s ease; }
.ref-karte__rahmen:hover img,
.ref-karte__rahmen:focus-visible img { transform: scale(1.04); }
.ref-karte--gross .ref-karte__rahmen img { aspect-ratio: 16 / 9.4; }
/* Der Hinweis war nur beim Ueberfahren zu sehen -- auf dem Handy also nie. */
.ref-karte__hinweis { opacity: 1; transform: none; background: rgba(4, 18, 26, 0.82);
                      color: var(--text-primary); backdrop-filter: blur(6px);
                      border: 1px solid rgba(6, 182, 212, 0.45);
                      transition: background 0.2s, color 0.2s; }
.ref-karte__rahmen:hover .ref-karte__hinweis,
.ref-karte__rahmen:focus-visible .ref-karte__hinweis {
  background: var(--accent); color: #04121a; }
.ref-karte__info { display: flex; flex-direction: column; align-items: flex-start;
                   gap: 0.55rem; }
.ref-karte__logo { display: flex; align-items: center; height: 32px; }
.ref-karte__logo img { display: block; height: 32px; width: auto; max-width: 180px;
                       object-fit: contain; opacity: 0.92; }
.ref-karte h3 { margin: 0; font-size: 1.05rem; color: var(--text-primary); }
.ref-karte--gross h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -0.01em; }
.ref-karte--gross .ref-karte__info p { font-size: 1rem; line-height: 1.7; }
.ref-karte__mehr { display: inline-flex; align-items: center; gap: 0.4rem;
                   margin-top: 0.2rem; font-size: 0.85rem; font-weight: 600;
                   color: var(--accent); text-decoration: none; }
.ref-karte__mehr:hover { text-decoration: underline; }
.ref-karte__mehr i { font-style: normal; transition: transform 0.2s; }
.ref-karte__mehr:hover i { transform: translate(2px, -2px); }

/* -- Vorschaubild im Browserrahmen --------------------------------------- */
/* Direkt unter dem Hero: dort waere die volle Abschnittshoehe eine Luecke. */
.seo-block--bild { padding-top: 0.5rem; }
.seo-bild { max-width: 900px; }
.seo-bild__rahmen { display: block; overflow: hidden;
                    border: 1px solid var(--outline); border-radius: 14px;
                    background: var(--bg-card);
                    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); }
.seo-bild__leiste { display: flex; align-items: center; gap: 0.6rem;
                    padding: 0.55rem 0.8rem;
                    border-bottom: 1px solid var(--outline);
                    background: rgba(255, 255, 255, 0.045); }
.seo-bild__rahmen img { border: 0; border-radius: 0; }

/* -- Rueckfall: altes Ablauf-Raster --------------------------------------
   Nur noch fellbach.html und ludwigsburg.html benutzen es. Beide werden
   nicht mehr erzeugt (sie fehlen in LOCATIONS) und stehen weder in der
   Navigation noch in der Sitemap. Solange sie erreichbar sind, sollen sie
   nicht kaputt aussehen. */
.ablauf-raster { display: grid; gap: 1.25rem;
                 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 1040px) { .ablauf-raster { grid-template-columns: repeat(2, 1fr); } }
.ablauf-karte { display: flex; gap: 1.1rem; align-items: flex-start;
                background: var(--bg-card); border: 1px solid var(--outline);
                border-radius: var(--border-radius); padding: 1.5rem; }
.ablauf-karte__nr { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
                    display: grid; place-items: center;
                    border: 1px solid var(--accent); color: var(--accent);
                    font-weight: 700; font-size: 1rem;
                    font-variant-numeric: tabular-nums; }
.ablauf-karte h3 { margin: 0.35rem 0 0.5rem; font-size: 1.05rem;
                   color: var(--text-primary); }
.ablauf-karte p { margin: 0; color: var(--text-secondary); line-height: 1.7;
                  font-size: 0.95rem; }

/* -- Schmale Schirme: Fliesstext linksbuendig -----------------------------
   Zentriert liest sich ein Absatz nur, solange er zwei, drei Zeilen hat.
   Auf dem Handy werden aus derselben Tafel neun Zeilen, bei denen jede
   Zeile woanders anfaengt -- das Auge verliert den Zeilenanfang. Die
   Ueberschriften bleiben mittig, nur der Text rueckt nach links. */
/* == Handy: dichter setzen ================================================
   Kurze Bausteine vertragen zwei oder drei Spalten. Nur dort, wo der Inhalt
   Breite braucht -- Screenshots, Bewertungstexte, Umfangskarten mit zwei
   Zeilen Text -- bleibt es bei einer Spalte. */
@media (max-width: 640px) {
  /* Abschnitte: 56 px oben und unten sind Desktop-Mass. */
  .seo-block { padding: 2.25rem 0; }
  .ref-block, .praxis-block { padding: 2.5rem 0 2.75rem; }
  .seo-hero { padding: 2rem 0 2.25rem; }
  .seo-cta { padding: 2.25rem 0; }
  .seo-kopf { margin-bottom: 1.4rem; }

  /* Vier kurze Zahlen brauchen keine vier Reihen. */
  .fakten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .fakt { padding: 1.1rem 0.9rem; }
  .fakt__zahl { font-size: 1.9rem; margin-bottom: 0.35rem; }
  .fakt h3 { font-size: 0.88rem; }
  .fakt p { font-size: 0.82rem; }

  /* Raster enger stellen, Karten etwas flacher. */
  .prob-raster, .umf-raster, .weiter-raster, .leist-raster,
  .seo-karten, .praxis-raster { gap: 0.7rem; }
  .prob-karte { padding: 1.15rem 1.1rem 1.05rem; }
  .umf-karte { padding: 0.9rem 1rem; }
  .seo-karte, .leist-karte { padding: 1.1rem; }
  .ref-raster { gap: 1rem; }
  .ref-karte { gap: 0.7rem; }
  .ablauf-spur { gap: 1.1rem; }

  /* Gemessen auf einer Ortsseite bei 390px: die sechs Karten unter "SEO,
     Social Media und Systeme" waren allein 1015 Pixel hoch, die sechs
     Nachbarorte 544, die zwei Teamkarten 860. Zusammen ein Viertel der
     Seite -- ohne dass mehr draufsteht. */
  .seo-block { padding: 1.9rem 0; }
  .seo-kopf { margin-bottom: 1.15rem; }
  .seo-karte, .leist-karte { padding: 0.95rem 1rem; }
  .seo-karte p, .leist-karte p { font-size: 0.88rem; line-height: 1.55; }
  .seo-karte h3, .leist-karte h3 { margin-bottom: 0.3rem; }
  .ablauf-spur { gap: 0.85rem; }
  .faq-list button { padding-block: 0.85rem; }


  /* Die Fusszeile stand auf jeder Seite 1241 px hoch untereinander. */
  .seo-footer { padding: 1.75rem 0 1.25rem; margin-top: 1.5rem; }
  .seo-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr));
                      gap: 1.25rem 1rem; }
  .seo-footer li { margin-bottom: 0.35rem; }
  .seo-footer a, .seo-footer__kontakt li { font-size: 0.86rem; }
  .seo-footer__unten { margin-top: 1.25rem; padding-top: 1rem; }
}

/* Die Startseite bringt ihre Abschnittspolster im eigenen Inline-CSS mit
   (56 px oben und unten, zwoelf Abschnitte). Das Stylesheet steht vor dem
   Inline-Block, deshalb hier ueber body + id, sonst gewinnt das Inline-CSS. */
@media (max-width: 640px) {
  body section#home, body section#hosting, body section#kundenprojekt,
  body section#relaunch-weigola, body section#erstgespraech,
  body section#leistungen, body section#walk-ins, body section#referenzen,
  body section#bewertungen, body section#team, body section#faq,
  body section#kontakt { padding-top: 1.9rem; padding-bottom: 1.9rem; }

  /* Gemessen bei 390px: zehn Abschnittskoepfe kosten zusammen 1726 Pixel,
     allein 400 davon ihr Abstand nach unten. */
  body .section-head { margin-bottom: 1.4rem; }

  /* Das Formular hatte sieben Felder mit je 18px Abstand und grosszuegiger
     Innenhoehe -- 990 Pixel fuer sieben Eingaben. */
  body #kontakt .form-group { margin-bottom: 0.7rem; }
  body #kontakt .form-group label { margin-bottom: 0.25rem; font-size: 0.85rem; }
  body #kontakt input, body #kontakt select, body #kontakt textarea {
    padding-block: 0.6rem; }
  body #kontakt textarea { min-height: 5.5rem; }

  /* Bewertungsband und Reels: Polster, nicht Inhalt. */
  body .srt-content { padding-block: 1.1rem; }
  body .feat-panel-left { padding-block: 1.1rem; }
  body .feat-panel-lead { margin-bottom: 0.9rem; }
  body .feat-panel-title { margin-bottom: 0.5rem; }
  body .feat-panel-right { padding-top: 0.6rem; }
}

/* Logos: drei je Reihe statt zwei. Bei 24 Logos sind das acht Reihen
   statt zwoelf. Das Grundmass schrumpft mit, damit nichts gequetscht wird. */
@media (max-width: 560px) {
  .logo-wand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem;
               --logo-basis: 42px; }
  .logo-wand li { min-height: 74px; padding: 0.5rem; }
  .logo-wand-block { padding: 2rem 0 2.5rem; }
  .logo-wand__kopf { margin-bottom: 1.6rem; }
}

@media (max-width: 640px) {
  .loesung p, .seo-schmal p, .seo-cta p { text-align: left; }
  .loesung { padding: 2rem 1.35rem; }
  .seo-kopf .seo-gruppe-lead { max-width: none; }

  /* Dieselbe Regel fuer die von Hand gebauten Seiten. Deren Absaetze erben
     die Zentrierung nur vom Elternteil -- und geerbte Ausrichtung hat keine
     Spezifitaet. Eine direkte Regel auf den Absatz schlaegt sie daher, ohne
     dass das Inline-CSS dieser Seiten angefasst werden muss und ohne
     !important. Gemessen: bis zu sieben zentrierte Zeilen am Stueck, bei
     denen jede woanders anfaengt. */
  .hero-sub, .hero-desc, .section-lead,
  .hero-inner > p, .section-inner > p,
  .team-card > p, .mission-card > p, .value-card > p,
  .commitment-box > p, .vision-quote > p, .join-band > p,
  .cta-section .container > p { text-align: left; }
}

/* -- Ortsverweise im Vorspann der Startseite ------------------------------
   Drei unterstrichene Woerter in einer Zeile wirken wie ein Fehler. Eine
   feine Akzentlinie zeigt genauso, dass da etwas anklickbar ist. */
.hero-sub a, .seo-hero__lead a, .seo-schmal p a, .seo-gruppe-lead a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(6, 182, 212, 0.45);
  transition: color 0.2s, border-color 0.2s; }
.hero-sub a:hover, .seo-hero__lead a:hover, .seo-schmal p a:hover,
.seo-gruppe-lead a:hover, .hero-sub a:focus-visible,
.seo-hero__lead a:focus-visible, .seo-schmal p a:focus-visible,
.seo-gruppe-lead a:focus-visible { color: var(--accent);
  border-bottom-color: var(--accent); }

.ort-liste__titel { margin: 1.75rem 0 0.8rem; font-size: 0.95rem;
                    color: var(--text-primary); }
.ort-liste a { font-size: 0.86rem; padding: 0.35rem 0.75rem; }


/* -- Der Kunde aus dem Ort ------------------------------------------------
   Das staerkste Argument einer Standortseite: nicht "wir arbeiten in der
   Region", sondern "die Seite von X hier im Ort ist von uns". Deshalb eine
   eigene Tafel mit Akzentrand, direkt unter dem Hero. */
.lokal-block { padding-top: 0.5rem; }
.lokal { display: grid; gap: 1.75rem; align-items: center;
         padding: 1.6rem; border-radius: 20px;
         border: 1px solid rgba(6, 182, 212, 0.4);
         background: radial-gradient(120% 140% at 0% 0%,
                     rgba(6, 182, 212, 0.13), rgba(255, 255, 255, 0.02) 60%);
         box-shadow: 0 24px 60px -28px rgba(6, 182, 212, 0.5); }
@media (min-width: 900px) {
  .lokal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.25rem;
           padding: 2rem; }
}
.lokal__text h2 { margin: 0 0 0.7rem; font-size: clamp(1.35rem, 3vw, 2rem);
                  line-height: 1.2; }
.lokal__text p { margin: 0 0 0.7rem; color: var(--text-secondary); line-height: 1.7; }
.lokal__satz { color: var(--text-primary) !important; font-weight: 500; }
.lokal__fuss { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
               margin-top: 1.1rem; }
.lokal__fuss .ref-karte__logo { height: 30px; }
.lokal__fuss .ref-karte__logo img { height: 30px; }
.lokal__bild { display: block; }
.lokal__bild img { aspect-ratio: 16 / 10; }

/* -- Bewertungen als Laufband --------------------------------------------
   Zehn Bewertungen untereinander waren auf dem Handy ueber 3000 Pixel hoch.
   Als Band kosten sie eine feste Hoehe. Zwei Spuren, Animation 0 -> -100 %:
   ist die erste durch, steht die zweite an ihrer Stelle. */
.bewband { margin-top: 1.5rem; }
.bewband__fenster { display: flex; gap: 1rem; overflow: hidden;
                    -webkit-mask-image: linear-gradient(90deg, transparent,
                      #000 6%, #000 94%, transparent);
                    mask-image: linear-gradient(90deg, transparent,
                      #000 6%, #000 94%, transparent); }
.bewband__spur { display: flex; gap: 1rem; margin: 0; padding: 0;
                 list-style: none; flex: 0 0 auto;
                 animation: bewband 90s linear infinite; }
@keyframes bewband { from { transform: translate3d(0, 0, 0); }
                     to { transform: translate3d(-100%, 0, 0); } }
.bewband__fenster:hover .bewband__spur { animation-play-state: paused; }
.bewband__karte { flex: 0 0 auto; width: 380px; padding: 1.25rem;
                  border: 1px solid var(--outline); border-radius: var(--border-radius);
                  background: var(--bg-card); display: flex; flex-direction: column;
                  gap: 0.7rem; }
.bewband__karte blockquote { margin: 0; }
.bewband__karte p { margin: 0; color: var(--text-secondary); font-size: 0.9rem;
                    line-height: 1.6; }
.bewband__karte figcaption { display: flex; flex-direction: column; gap: 0.15rem;
                             margin-top: auto; }
@media (max-width: 640px) { .bewband__karte { width: 300px; padding: 1rem; } }
@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung wird aus dem Band eine Reihe zum Wischen. */
  .bewband__spur { animation: none; }
  .bewband__spur[aria-hidden="true"] { display: none; }
  .bewband__fenster { overflow-x: auto; }
}

/* Der Titel des Logobands laeuft randlos -- auf schmalen Schirmen braucht
   er trotzdem Luft, sonst klebt er an der Kante. */
.laufband__titel { padding-inline: 1.25rem; }

/* -- Referenz-Slider ------------------------------------------------------
   Namen links, die Live-Website rechts. Uebernommen vom Muster der
   Startseite, hier mit den Tokens des gemeinsamen Stylesheets statt mit
   deren Inline-Variablen. */
.hslider { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem;
           align-items: center; margin-top: 0.5rem; }
.hslider-names { list-style: none; margin: 0; padding: 0;
                 display: flex; flex-direction: column; gap: 0.1rem; }
.hs-name { font-size: clamp(1.05rem, 2.4vw, 1.75rem); font-weight: 800;
           text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.2;
           color: var(--text-primary); opacity: 0.26; cursor: pointer;
           user-select: none; padding: 0.1rem 0;
           transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease; }
.hs-name.is-active { opacity: 1; color: var(--accent); transform: translateX(10px); }
.hs-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px;
                         opacity: 1; }
@media (hover: hover) {
  .hs-name:hover { opacity: 0.6; }
  .hs-name.is-active:hover { opacity: 1; }
}
.hslider-stage { position: relative; display: block; aspect-ratio: 16 / 11;
                 border-radius: 16px; overflow: hidden;
                 border: 1px solid var(--outline); background: var(--bg-card);
                 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.hs-img { position: absolute; inset: 0; width: 100%; height: 100%;
          object-fit: cover; object-position: top center;
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
          transition: clip-path 0.7s cubic-bezier(0.33, 1, 0.68, 1); }
.hs-img.is-active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.hs-open { position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
           display: inline-flex; align-items: center; padding: 0.4rem 0.9rem;
           border-radius: 999px; background: var(--accent); color: #04121a;
           font-size: 0.8rem; font-weight: 700; }
@media (max-width: 880px) {
  .hslider { grid-template-columns: 1fr; gap: 1.25rem; }
  .hs-name { font-size: 1.05rem; }
  .hs-name.is-active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-img { transition: none; }
}

/* -- Uebersichtsseite: Leistungskacheln ---------------------------------- */
.leist-raster { display: grid; gap: 1rem;
                grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.leist-karte { position: relative; display: block; padding: 1.4rem 2.6rem 1.4rem 1.35rem;
               border: 1px solid var(--outline); border-radius: var(--border-radius);
               background: var(--bg-card); text-decoration: none;
               transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.leist-karte:hover { border-color: var(--accent); transform: translateY(-3px);
                     background: rgba(6, 182, 212, 0.05); }
.leist-karte .sym { flex: none; width: 24px; height: 24px; margin-bottom: 0.75rem;
                    color: var(--accent); }
.leist-karte h3 { margin: 0 0 0.3rem; font-size: 1.02rem; color: var(--text-primary); }
.leist-karte p { margin: 0; color: var(--text-secondary); font-size: 0.9rem;
                 line-height: 1.6; }
.leist-karte__pfeil { position: absolute; right: 1.1rem; top: 1.35rem;
                      color: var(--text-secondary);
                      transition: transform 0.2s, color 0.2s; }
.leist-karte:hover .leist-karte__pfeil { color: var(--accent); transform: translateX(3px); }

/* -- Was oft dazugehoert: Zeilen statt einer dritten Kartenreihe ---------- */
.weiter-raster { display: grid; gap: 0.8rem;
                 grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.weiter-karte { display: flex; align-items: center; gap: 0.85rem;
                padding: 1rem 1.1rem; border: 1px solid var(--outline);
                border-radius: var(--border-radius); background: var(--bg-card);
                text-decoration: none;
                transition: border-color 0.2s, transform 0.2s; }
.weiter-karte:hover { border-color: var(--accent); transform: translateY(-2px); }
.weiter-karte .sym { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent); }
.weiter-karte__text { display: flex; flex-direction: column; min-width: 0; }
.weiter-karte__text strong { color: var(--text-primary); font-size: 0.96rem;
                             font-weight: 600; }
.weiter-karte__text span { color: var(--text-secondary); font-size: 0.84rem; }
.weiter-karte__pfeil { margin-left: auto; color: var(--text-secondary);
                       transition: transform 0.2s, color 0.2s; }
.weiter-karte:hover .weiter-karte__pfeil { color: var(--accent); transform: translateX(3px); }

/* -- Wer wir sind ---------------------------------------------------------
   Zwei Karten nebeneinander, ab 640px untereinander. Das Bild ist rund und
   fest 96px, damit unterschiedlich zugeschnittene Portraits gleich wirken. */
.team-raster { display: grid; gap: 1rem;
               grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.team-karte { padding: 1.6rem 1.4rem; border: 1px solid var(--outline);
              border-radius: var(--border-radius); background: var(--bg-card);
              transition: border-color 0.2s, transform 0.2s; }
.team-karte:hover { border-color: var(--accent); transform: translateY(-2px); }
.team-karte__bild { display: block; width: 96px; height: 96px; margin-bottom: 1rem;
                    border-radius: 50%; object-fit: cover;
                    border: 1px solid var(--outline); }
.team-karte h3 { margin: 0 0 0.2rem; font-size: 1.06rem; color: var(--text-primary); }
.team-karte__rolle { margin: 0 0 0.7rem; font-size: 0.82rem; font-weight: 600;
                     letter-spacing: 0.06em; text-transform: uppercase;
                     color: var(--accent); }
.team-karte__text { margin: 0 0 1.1rem; color: var(--text-secondary);
                    font-size: 0.94rem; line-height: 1.7; }
.team-karte__links { display: flex; gap: 0.5rem; }
.team-karte__links a { display: inline-flex; align-items: center; justify-content: center;
                       width: 36px; height: 36px; border-radius: 10px;
                       border: 1px solid var(--outline); color: var(--text-secondary);
                       transition: border-color 0.2s, color 0.2s, background 0.2s; }
.team-karte__links a:hover { border-color: var(--accent); color: var(--accent);
                             background: rgba(6, 182, 212, 0.08); }
.team-karte__links .sym { width: 18px; height: 18px; }
.team-fuss { margin: 1.4rem 0 0; }
/* Das Teamfoto steht ueber den beiden Karten. width/height im Markup plus
   aspect-ratio hier: so steht die Hoehe fest, bevor das Bild geladen ist,
   und beim Nachladen rutscht nichts. */
/* Steht auf unser-team.html unter dem Absatz im Seitenkopf -- Abstand
   nach oben, nach unten sorgt das Polster des Abschnitts. */
.team-bild { display: block; width: 100%; height: auto; max-width: 760px;
             margin: 1.6rem auto 0;
             aspect-ratio: 1600 / 1071; object-fit: cover; border-radius: 16px;
             border: 1px solid var(--outline, rgba(255, 255, 255, 0.12)); }
@media (max-width: 640px) { .team-bild { margin-top: 1.1rem; border-radius: 12px; } }

/* Handy: Nachbarorte zweispaltig, Teamkarte quer. Der Block steht bewusst
   hier unten -- weiter oben, im allgemeinen 640px-Block, stand er vor den
   Grundregeln darueber und wurde von ihnen ueberschrieben. */
@media (max-width: 640px) {
  .weiter-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .weiter-karte { padding: 0.8rem 0.7rem; gap: 0.55rem; }
  .weiter-karte .sym { flex: 0 0 18px; width: 18px; height: 18px; }
  .weiter-karte__pfeil { display: none; }
  .weiter-karte__text strong { font-size: 0.88rem; }
  .weiter-karte__text span { font-size: 0.74rem; }

  .team-raster { gap: 0.7rem; }
  .team-karte { display: grid; grid-template-columns: 64px minmax(0, 1fr);
                align-items: center; gap: 0 0.9rem; padding: 1.15rem 1.1rem; }
  .team-karte__bild { grid-column: 1; grid-row: 1 / span 2;
                      width: 64px; height: 64px; margin: 0; align-self: start; }
  .team-karte h3 { grid-column: 2; grid-row: 1; align-self: end; font-size: 1rem; }
  .team-karte__rolle { grid-column: 2; grid-row: 2; margin: 0.15rem 0 0;
                       align-self: start; font-size: 0.76rem; }
  .team-karte__text { grid-column: 1 / -1; margin: 0.85rem 0; font-size: 0.9rem;
                      line-height: 1.6; }
  .team-karte__links { grid-column: 1 / -1; }
  .team-karte__links a { width: 34px; height: 34px; }
  .team-fuss { margin-top: 1.1rem; }
}

/* -- Schluss-Aufruf als Tafel -------------------------------------------- */
.seo-cta__tafel { position: relative; overflow: hidden; padding: 3rem 2rem;
                  border: 1px solid rgba(6, 182, 212, 0.28); border-radius: 20px;
                  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035),
                                              rgba(255, 255, 255, 0.01)); }
.seo-cta__aura { position: absolute; inset: -60% -20% auto; height: 320px;
                 pointer-events: none;
                 background: radial-gradient(50% 60% at 50% 70%,
                             rgba(6, 182, 212, 0.22), transparent 70%); }
.seo-cta__tafel > * { position: relative; }
@media (max-width: 620px) { .seo-cta__tafel { padding: 2.2rem 1.2rem; } }

/* unser-team.html gibt seinen Karten 300px Mindestbreite. Bei 320px
   Fensterbreite bleiben nach dem Polster nur 272 -- die Seite liess sich
   dadurch 4 Pixel zur Seite schieben. Stand frueher weiter oben und ist
   bei derselben Ersetzung wie das Band-CSS verlorengegangen. */
@media (max-width: 400px) {
  body .team-grid { grid-template-columns: minmax(0, 1fr); }
  body .team-card { min-width: 0; }
}

/* -- Vorteilskaesten im Hero --------------------------------------------
   Zwei gleiche Spuren, Animation von 0 auf -100 Prozent: ist die erste
   durch, steht die zweite genau an ihrer Stelle. Am Laptop ist die zweite
   ausgeblendet -- ohne diese Zeile steht jeder Kasten zweimal da.

   Der Block stand frueher weiter oben und ist bei einer Ersetzung des
   Wischreihen-CSS mit weggefallen; seitdem hatte das Band gar keine
   Gestaltung mehr. Er steht deshalb hier unten, wo ihn keine
   Bereichsersetzung mehr trifft. */
.hb-band > .hero-benefits[aria-hidden="true"] { display: none; }
@media (max-width: 640px) {
  body .hb-band {
    display: flex; gap: 0.7rem; overflow: hidden; position: relative;
    margin: 1.5rem -1.25rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  body .hb-band > .hero-benefits[aria-hidden="true"] { display: flex; }
  body .hb-band .hero-benefits {
    display: flex; gap: 0.7rem; flex: 0 0 auto;
    margin: 0; padding: 0; list-style: none;
    animation: hb-lauf 30s linear infinite;
  }
  body .hb-band .hero-benefits li { flex: 0 0 auto; width: 200px; }
  @keyframes hb-lauf { from { transform: translate3d(0, 0, 0); }
                       to   { transform: translate3d(-100%, 0, 0); } }
  body .hb-band:hover .hero-benefits { animation-play-state: paused; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung zum Wischen, und die zweite Spur waere nur Dopplung. */
  body .hb-band .hero-benefits { animation: none; }
  body .hb-band > .hero-benefits[aria-hidden="true"] { display: none; }
}

/* -- Fragen-Kasten -------------------------------------------------------
   Drei Fragen, die vor einer Anfrage am haeufigsten im Weg stehen, direkt
   neben dem Formular. Bewusst klein: er soll das Formular nicht
   ueberstrahlen, sondern den letzten Zweifel wegnehmen. */
.fragen-kasten {
  margin-top: 1.6rem; padding: 1.15rem 1.25rem;
  border: 1px solid var(--outline, rgba(255, 255, 255, 0.12));
  border-radius: 14px; background: rgba(255, 255, 255, 0.03);
  text-align: left;
}
.fragen-kasten h4 { margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 600;
                    letter-spacing: 0.13em; text-transform: uppercase;
                    color: var(--accent, #06b6d4); }
.fragen-kasten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.fragen-kasten li a { color: var(--text-secondary, #94a3b8); text-decoration: none;
                      font-size: 0.9rem; line-height: 1.5;
                      display: inline-flex; gap: 0.45rem; }
.fragen-kasten li a::before { content: "?"; color: var(--accent, #06b6d4);
                              font-weight: 700; flex: 0 0 auto; }
.fragen-kasten li a:hover { color: var(--text-primary, #fff); }
.fragen-kasten__alle { display: inline-block; margin-top: 0.85rem; font-size: 0.85rem;
                       font-weight: 600; color: var(--accent, #06b6d4);
                       text-decoration: none; }
.fragen-kasten__alle::after { content: " 92"; }
.seo-cta__tafel .fragen-kasten { max-width: 420px; margin-inline: auto; margin-top: 2rem; }

/* "freiwillig" gehoert an das Feld, nicht in eine Fussnote -- sonst fuellt
   es niemand aus, weil unklar ist, ob es sein muss. */
.form-optional { font-weight: 400; opacity: 0.7; font-size: 0.86em; }

.seo-karte--link h3 { display: flex; align-items: center; gap: 0.55rem; }
.seo-karte--link h3 .sym { flex: 0 0 19px; width: 19px; height: 19px;
                           color: var(--accent); }
@media (max-width: 640px) {
  .klapp__kopf .sym { flex: 0 0 18px; width: 18px; height: 18px; color: var(--accent); }
}

/* -- Belege der Systemseite ----------------------------------------------
   Winkelhock und das eigene CRM sind die einzigen zwei Belege, die es dort
   gibt -- vorher standen sie als schmale Karten nebeneinander und lasen
   sich wie Randnotizen. Jetzt hat jedes eine volle Tafel: links der Fall,
   rechts das Konkrete. */
.praxis-raster { display: grid; gap: 1.1rem; }
/* Jede Marke liegt in zwei Fassungen vor, sichtbar ist immer nur eine. Die
   alte Regel hing an .praxis-karte__logo -- nach der Umbenennung standen
   beide uebereinander. */
.praxis-tafel__logo .pd-light { display: none; }
:root[data-theme="light"] .praxis-tafel__logo .pd-ondark { display: none; }
:root[data-theme="light"] .praxis-tafel__logo .pd-light { display: block; }
.praxis-tafel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem;
  padding: 1.9rem 1.7rem; border: 1px solid var(--outline);
  border-radius: var(--border-radius); background: var(--bg-card);
}
@media (min-width: 860px) {
  .praxis-tafel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
                  gap: 2.6rem; align-items: center; padding: 2.2rem 2rem; }
}
.praxis-tafel__kopf { display: flex; align-items: center; gap: 0.85rem;
                      margin-bottom: 1rem; }
.praxis-tafel__logo img { display: block; width: 104px; height: 30px;
                          object-fit: contain; object-position: left center; }
.praxis-tafel__art { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em;
                     text-transform: uppercase; color: var(--accent);
                     padding: 0.25rem 0.6rem; border-radius: 999px;
                     border: 1px solid rgba(6, 182, 212, 0.32); }
.praxis-tafel h3 { margin: 0 0 0.6rem; font-size: 1.3rem; color: var(--text-primary);
                   line-height: 1.3; }
.praxis-tafel__text > p { margin: 0 0 0.9rem; color: var(--text-secondary);
                          font-size: 0.97rem; line-height: 1.7; }
.praxis-tafel__quelle { margin: 0; font-size: 0.82rem; color: var(--text-secondary);
                        opacity: 0.75; }
.praxis-detail__titel { margin: 0 0 0.9rem; font-size: 0.72rem; font-weight: 600;
                        letter-spacing: 0.13em; text-transform: uppercase;
                        color: var(--text-secondary); }

/* Zeitstrahl der gesetzlichen Fristen: Punkte auf einer Linie, damit die
   Abfolge sichtbar wird und nicht nur dasteht. */
.praxis-strahl { list-style: none; margin: 0; padding: 0 0 0 1.5rem;
                 position: relative; display: grid; gap: 1.1rem; }
.praxis-strahl::before { content: ""; position: absolute; left: 5px; top: 6px;
                         bottom: 6px; width: 1px;
                         background: linear-gradient(to bottom,
                           var(--accent), rgba(6, 182, 212, 0.15)); }
.praxis-strahl li { position: relative; }
.praxis-strahl li::before { content: ""; position: absolute; left: -1.5rem; top: 5px;
                            width: 11px; height: 11px; border-radius: 50%;
                            background: var(--bg-card);
                            border: 2px solid var(--accent); }
.praxis-strahl__wann { display: block; font-weight: 700; font-size: 0.95rem;
                       color: var(--text-primary); }
.praxis-strahl__was { display: block; margin-top: 0.15rem; font-size: 0.88rem;
                      line-height: 1.6; color: var(--text-secondary); }

/* Inhalt eines Kundenordners als beschriftete Felder. */
.praxis-felder { list-style: none; margin: 0; padding: 0;
                 display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                 gap: 0.55rem; }
@media (min-width: 520px) and (max-width: 859px) {
  .praxis-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.praxis-felder li { display: flex; align-items: center; gap: 0.55rem;
                    padding: 0.7rem 0.75rem; border-radius: 12px;
                    border: 1px solid var(--outline);
                    background: rgba(255, 255, 255, 0.025);
                    font-size: 0.88rem; color: var(--text-primary); }
.praxis-felder .sym { flex: 0 0 17px; width: 17px; height: 17px; color: var(--accent); }

@media (max-width: 640px) {
  .praxis-tafel { padding: 1.4rem 1.2rem; gap: 1.2rem; }
  .praxis-tafel h3 { font-size: 1.15rem; }
}

/* -- Ortsseiten: Foto im Hero, wie auf der Startseite --------------------
   Ab 1000px zweispaltig, Text links, wir rechts; darunter gestapelt. Die
   Zahlenleiste laeuft ueber beide Spalten. Das Foto bringt seine weichen
   Kanten aus .hero-foto mit -- derselbe Zuschnitt und derselbe
   Schwarzpunkt wie auf der Startseite, damit es auch hier nicht als
   Rechteck aufsitzt. */
.seo-hero__figur { margin: 1.75rem auto 0; max-width: 340px; }
@media (min-width: 1000px) {
  .seo-hero--foto .container {
    display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: 1.25rem 3rem; align-items: center;
  }
  .seo-hero--foto .seo-hero__text { grid-column: 1; }
  .seo-hero--foto .seo-hero__figur {
    grid-column: 2; margin: 0; max-width: 480px; justify-self: end;
  }
  .seo-hero--foto .hero-fakten { grid-column: 1 / -1; }
}

/* Laufbaender von Hand wischbar, nicht nur laufend. Der Selbstlauf haelt
   beim Anfassen an, dafuer sorgt baenderStarten() in effekte.js.
   Steht bewusst hier unten: weiter oben kam die Regel vor der Grundregel
   von .bewband__fenster, und die setzt overflow:hidden -- bei gleicher
   Spezifitaet gewinnt die spaetere, also blieb das Bewertungsband starr. */
@media (max-width: 700px) {
  /* Kein waagrechtes Scrollen: siehe baenderStarten() in effekte.js.
     Stattdessen haelt ein Tipp das Band an. */
  .laufband__fenster, .bewband__fenster { position: relative; cursor: pointer; }
  .laufband__fenster.band-steht::after,
  .bewband__fenster.band-steht::after,
  .hb-band.band-steht::after {
    content: "angehalten 4 nochmal tippen";
    position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
    padding: 0.18rem 0.6rem; border-radius: 999px;
    background: rgba(0, 0, 0, 0.66); color: #e2e8f0;
    font-size: 0.68rem; letter-spacing: 0.03em; pointer-events: none; z-index: 2;
  }
}

/* -- Bewertungen als Coverflow -------------------------------------------
   Fuenf Karten auf einer gedachten Kreisbahn: die mittlere frontal, die
   Nachbarn nach hinten gedreht. Bewegt wird nur transform und opacity,
   damit die Animation auf der Grafikkarte laeuft und kein Layout anstoesst.
   Die Karten bleiben im Dokument -- der Text ist vollstaendig da und wird
   nur optisch beschnitten (line-clamp), damit Suchmaschinen und
   Vorlesewerkzeuge die ganze Bewertung bekommen. */
.cf {
  /* Die Masse sind gemessen, nicht geschaetzt: die laengste Bewertung hat
     632 Zeichen und braucht bei 480px Kartenbreite 575 Pixel Hoehe, bei
     Handybreite 696. Alle Karten bekommen dieselbe Hoehe -- so steht die
     Buehne still, egal welche Bewertung vorne ist, und nichts verschiebt
     sich beim Weiterschalten. */
  --cf-breite: 480px; --cf-hoehe: 580px;
  --cf-nah: 380px; --cf-fern: 690px;
  position: relative; padding: 1rem 0 0;
  /* Die aeusseren Karten stehen absichtlich ueber der Behaelterbreite --
     ohne diesen Schnitt wuchs die Seite seitlich mit und liess sich auf dem
     Handy 516 Pixel weit zur Seite schieben. Die weichen Kanten lassen sie
     auslaufen, statt sie hart abzuhacken. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.cf__buehne {
  position: relative; height: var(--cf-hoehe); touch-action: pan-y;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px; margin-bottom: 1.6rem;
}
.cf__karte {
  position: absolute; width: var(--cf-breite); height: var(--cf-hoehe);
  display: flex; flex-direction: column; gap: 0.7rem;
  margin: 0; padding: 1.6rem 1.4rem;
  border: 1px solid var(--outline); border-radius: 18px;
  background: var(--bg-card);
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              filter 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.8s;
  /* Standard: aussen, unsichtbar, nicht anklickbar. */
  transform: translateX(0) scale(0.4); opacity: 0; z-index: 0;
  pointer-events: none;
}
.cf__karte--m2 { transform: translateX(calc(var(--cf-fern) * -1)) scale(0.68) rotateY(38deg);
                 opacity: 0.38; z-index: 10; filter: brightness(0.6); pointer-events: auto;
                 cursor: pointer; }
.cf__karte--m1 { transform: translateX(calc(var(--cf-nah) * -1)) scale(0.84) rotateY(24deg);
                 opacity: 0.65; z-index: 20; filter: brightness(0.78); pointer-events: auto;
                 cursor: pointer; }
.cf__karte--mitte { transform: translateX(0) scale(1) rotateY(0deg);
                    opacity: 1; z-index: 30; filter: none; pointer-events: auto;
                    border-color: rgba(6, 182, 212, 0.38);
                    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
                                0 0 34px rgba(6, 182, 212, 0.16); }
.cf__karte--p1 { transform: translateX(var(--cf-nah)) scale(0.84) rotateY(-24deg);
                 opacity: 0.65; z-index: 20; filter: brightness(0.78); pointer-events: auto;
                 cursor: pointer; }
.cf__karte--p2 { transform: translateX(var(--cf-fern)) scale(0.68) rotateY(-38deg);
                 opacity: 0.38; z-index: 10; filter: brightness(0.6); pointer-events: auto;
                 cursor: pointer; }

.cf__logo { display: block; width: 128px; height: 32px; object-fit: contain;
            object-position: left center; }
.cf__sterne { color: #fbbf24; font-size: 0.95rem; letter-spacing: 0.12em; }
/* Vollstaendig, nicht beschnitten. Das overflow:auto ist nur ein Netz --
   bei groesserer Schrift im Browser oder einer kuenftig laengeren Bewertung
   bleibt der Text erreichbar, statt abgeschnitten zu werden. */
.cf__text { flex: 1 1 auto; min-height: 0; margin: 0; overflow-y: auto;
            color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6;
            overscroll-behavior: contain; }
.cf__text p { margin: 0; }
.cf__wer { display: flex; align-items: center; gap: 0.5rem;
           padding-top: 0.9rem; border-top: 1px solid var(--outline);
           color: var(--text-primary); font-weight: 600; font-size: 0.95rem; }

.cf__steuer { display: flex; align-items: center; justify-content: center;
              gap: 0.75rem; }
.cf__pfeil { display: inline-flex; align-items: center; justify-content: center;
             width: 44px; height: 44px; border-radius: 50%;
             border: 1px solid var(--outline); background: var(--bg-card);
             color: var(--text-primary); cursor: pointer;
             transition: border-color 0.2s, color 0.2s, transform 0.2s; }
.cf__pfeil:hover { border-color: var(--accent); color: var(--accent); }
.cf__pfeil:active { transform: scale(0.94); }
.cf__pfeil svg { width: 18px; height: 18px; }
.cf__punkte { display: flex; align-items: center; gap: 8px; }
.cf__punkt { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
             background: rgba(255, 255, 255, 0.24); cursor: pointer;
             transition: width 0.3s, background 0.3s; }
.cf__punkt[aria-current="true"] { width: 26px; background: var(--accent); }
.cf__fuss { margin: 1.6rem 0 0; text-align: center; }

@media (max-width: 900px) {
  .cf { --cf-breite: 420px; --cf-hoehe: 620px; --cf-nah: 300px; --cf-fern: 540px; }
}
@media (max-width: 640px) {
  /* Auf dem Handy passt neben der Karte nur noch eine Kante -- die zweite
     Reihe wandert ganz raus, sonst klebt alles uebereinander. */
  /* Naeher herangeholt: bei 76vw blieb von der Nachbarkarte ein 25 Pixel
     breiter Streifen stehen, das las sich als Fehler statt als Karussell.
     Die zweite Reihe steht bewusst ganz ausserhalb. */
  .cf { --cf-breite: min(340px, 92vw); --cf-hoehe: 700px;
        --cf-nah: 64vw; --cf-fern: 120vw; }
  .cf__karte { padding: 1.25rem 1.15rem; }
  .cf__text { font-size: 0.88rem; line-height: 1.55; }
  .cf__pfeil { width: 40px; height: 40px; }
}

/* -- Kartenraster als Aufklapper (nur Handy) ------------------------------
   Gemessen bei 390px standen die beiden Karten-Raster einer Ortsseite
   untereinander 1.579 Pixel hoch. Als Wischreihe waren es 260 -- aber drei
   Anlaeufe haben gezeigt, dass die Geste sich nicht von selbst erklaert.
   Als Aufklapper sind es rund 420: alle Titel sofort sichtbar, der Text auf
   Tipp. Nichts zu wischen, nichts zu lernen. */
@media (max-width: 640px) {
  .klapp {
    display: block; border: 1px solid var(--outline);
    border-radius: var(--border-radius); overflow: hidden;
    background: var(--bg-card);
  }
  .klapp__zeile + .klapp__zeile { border-top: 1px solid var(--outline); }
  .klapp__kopf {
    display: flex; align-items: center; gap: 0.8rem; width: 100%;
    padding: 0.95rem 1rem; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 0.97rem; font-weight: 600; line-height: 1.4;
    color: var(--text-primary); text-align: left;
  }
  .klapp__kopf > span { flex: 1 1 auto; min-width: 0; }
  .klapp__pfeil { flex: 0 0 17px; width: 17px; height: 17px; color: var(--accent);
                  transition: transform 0.22s; }
  .klapp__kopf[aria-expanded="true"] .klapp__pfeil { transform: rotate(180deg); }
  .klapp__inhalt { padding: 0 1rem 1rem; }
  .klapp__inhalt p { margin: 0; color: var(--text-secondary);
                     font-size: 0.9rem; line-height: 1.65; }
  .klapp__link { display: inline-block; margin-top: 0.7rem; font-size: 0.88rem;
                 font-weight: 600; color: var(--accent); text-decoration: none; }
  .klapp__link::after { content: " →"; }
  /* Die Kartenrahmen selbst sind im Aufklapper ueberfluessig. */
  .klapp .seo-karte, .klapp .prob-karte,
  .klapp .leist-karte, .klapp .umf-karte { border: 0; padding: 0; background: none; }
}

/* Wer Bewegung reduziert haben moechte, bekommt trotzdem die Wischreihe --
   sie ist keine Animation, sondern eine Anordnung. */

/* Auf sehr schmalen Geraeten wird jede Zeile kuerzer, also braucht die
   laengste Bewertung mehr Zeilen: bei 320px fehlten ihr 28 Pixel. */
@media (max-width: 360px) { .cf { --cf-hoehe: 750px; } }

/* -- Hero der Startseite mit Foto ---------------------------------------- */
.hero-figur { margin: 1.75rem auto 0; max-width: 340px; }
.hero-foto {
  display: block; width: 100%; height: auto;
  /* Der Studiohintergrund des Fotos ist schwarz wie der Hero. Ohne Maske
     bleibt trotzdem ein Rechteck stehen, weil das Studiolicht den Grund
     aufhellt. Zwei Verlaeufe, verschnitten: links/rechts laeuft es zu den
     Raendern aus, oben ebenso, unten bleibt es stehen -- dort sind die
     beiden ohnehin vom Bildrand geschnitten, wie im Vorbild. Freistellen
     ist dafuer nicht noetig. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 20%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 96%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0%, #000 20%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (min-width: 1000px) {
  body #home .container {
    display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: 1.5rem 3rem; align-items: center; text-align: left;
  }
  body #home .hero-text { grid-column: 1; }
  body .hero-figur { grid-column: 2; margin: 0; max-width: 540px; justify-self: end; }
  /* Das Band ist seit dem Umbau der Behaelter der Rasterplatz, nicht mehr
     die Liste selbst -- ohne diese Zeile sass es am Laptop in der linken
     Spalte statt ueber beide. Die Liste bleibt mitgenannt, falls das
     Band einmal nicht da ist. */
  body #home .hb-band, body #home .hero-benefits {
    grid-column: 1 / -1; margin-top: 0.5rem;
  }
  body #home .hero-sub { margin-left: 0; margin-right: 0; max-width: 44ch; }
  body #home .hero-actions { justify-content: flex-start; }
  body #home .hero-trust { margin-left: 0; }
}

/* Wer Bewegung reduziert haben moechte, bekommt die Karten nebeneinander
   zum Wischen -- ohne Drehung, ohne Selbstlauf. */
@media (prefers-reduced-motion: reduce) {
  .cf__buehne { display: flex; height: auto; perspective: none;
                overflow-x: auto; gap: 1rem; justify-content: flex-start;
                scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
  .cf__karte { position: relative; transform: none !important; opacity: 1 !important;
               filter: none !important; pointer-events: auto !important;
               flex-grow: 0; flex-shrink: 0; flex-basis: var(--cf-breite);
               height: auto; min-height: var(--cf-hoehe);
               scroll-snap-align: center; transition: none; }
  .cf__steuer { display: none; }
}