/* ===========================================================================
   GfV Startseite - Gestaltung der oeffentlichen Startseite
   umfrage.verwaltungsberatung.de
   ---------------------------------------------------------------------------
   JEDE Regel in dieser Datei haengt an "body.gfv-start". Diese Klasse setzt
   ausschliesslich views/layout_survey_list.twig. Damit kann die Datei das
   Aussehen eines Fragebogens auch dann nicht veraendern, wenn sie dort
   versehentlich geladen wuerde - geladen wird sie ohnehin nur aus dem
   Startseiten-Layout heraus (registerTemplateCssFile).

   KEINE VERBINDUNG NACH AUSSEN. Kein @import, kein url() auf einen fremden
   Host, keine Google Fonts. Die Schrift liegt als Datei im Theme.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Schrift: Space Grotesk, oertlich ausgeliefert.
   Das ist die gemessene Hausschrift von verwaltungsberatung.de (dort als
   SpaceGrotesk-Light-1.ttf / -Medium-1.ttf selbst gehostet, 19.08.2026).
   Variable Schrift 300-700, Teilmenge "latin" - deckt Umlaute, ss, Euro,
   Gedankenstrich und Anfuehrungszeichen ab. 22 KB, eine einzige Datei.
   Lizenz: SIL Open Font License 1.1, siehe ../files/SpaceGrotesk-OFL.txt
   font-display: swap - der Text ist sofort lesbar, auch bevor die Schrift da
   ist. Das ist hier wichtiger als ein sauberer Erstaufbau: wer mit einem
   Zettel in der Hand hier landet, soll lesen koennen.
--------------------------------------------------------------------------- */
@font-face {
    font-family: "GfV Space Grotesk";
    src: url("../files/SpaceGrotesk-latin-var.woff2") format("woff2-variations"),
         url("../files/SpaceGrotesk-latin-var.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Farben. Alle Werte an verwaltungsberatung.de gemessen (19.08.2026).
   Die Kontrastwerte stehen dabei, weil fuer die Auftraggeber BITV 2.0 gilt
   und WCAG AA damit Pflicht ist, nicht Kuer.
--------------------------------------------------------------------------- */
body.gfv-start {
    --gfv-navy:        #0d1259;  /* Baender, Fusszeile - Weiss darauf 16,8:1 */
    --gfv-navy-hell:   #282d58;  /* Ueberschriften auf Weiss        13,1:1 */
    --gfv-blau:        #1767b7;  /* Verweise auf Weiss               5,7:1 */
    --gfv-blau-gross:  #1d81c0;  /* NUR Grossschrift/Linien          4,2:1 */
    --gfv-akzent:      #e83564;  /* Keil, Linien, Fokusring - NIE hinter Text:
                                    Weiss darauf sind nur 4,1:1 */
    --gfv-text:        #1f2230;  /* Fliesstext auf Weiss            15,2:1 */
    --gfv-text-leise:  #4a4f63;  /* Nebentext auf Weiss              8,0:1 */
    --gfv-auf-navy:    #c9d3ea;  /* Nebentext auf Navy              11,2:1 */
    --gfv-flaeche:     #f4f6fb;
    --gfv-linie:       #d9dfee;
    --gfv-radius:      7px;      /* der Knopfradius der Vorlage */
}

/* ---------------------------------------------------------------------------
   Grundlage. Setzt bewusst gegen das geerbte Fruity-/Bootstrap-CSS an, ohne
   !important: "body.gfv-start x" ist spezifischer als deren Elementregeln.
--------------------------------------------------------------------------- */
body.gfv-start {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: var(--gfv-text);
    font-family: "GfV Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;      /* 18px wie die Vorlage */
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Das Mutter-Theme setzt "html, body { height: 100% }" (theme_apple.css).
       Damit waere der Koerper selbst der Rollbereich und die Seite liesse sich
       nicht wie gewohnt scrollen - gemessen am 19.08.2026. Hier waechst der
       Koerper wieder mit dem Inhalt.
       overflow-x: clip statt hidden: "hidden" wuerde die senkrechte Achse
       stillschweigend auf "auto" zwingen und den Fehler zurueckholen. */
    height: auto;
    min-height: 100%;
    overflow-x: clip;
}

body.gfv-start * { box-sizing: border-box; }

body.gfv-start .gfv-inhalt {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Fuer Screenreader da, fuer das Auge nicht. */
body.gfv-start .gfv-nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Bedienbarkeit ohne Maus. Ein sichtbarer, kontrastreicher Fokusring auf
   hellem UND dunklem Grund - der Akzentton erreicht gegen beides mehr als
   die geforderten 3:1 (Weiss 4,1:1 / Navy 4,1:1).
--------------------------------------------------------------------------- */
body.gfv-start a:focus-visible,
body.gfv-start button:focus-visible,
body.gfv-start [tabindex]:focus-visible {
    outline: 3px solid var(--gfv-akzent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   Kopfbereich: weisses Band, nur das Logo. Keine Navigation - es gibt hier
   nichts, wohin man navigieren koennte, und jeder zusaetzliche Verweis
   waere eine Abzweigung weg vom Fragebogen.
--------------------------------------------------------------------------- */
body.gfv-start .gfv-kopf {
    background: #ffffff;
    padding: 1.4rem 0;
}

body.gfv-start .gfv-kopf img {
    display: block;
    width: 261px;
    max-width: 70vw;
    height: auto;
}

/* ---------------------------------------------------------------------------
   Titelband. Navy mit diagonal beschnittener Unterkante - das Formmotiv der
   Vorlage. Der rosa Keil entsteht dadurch, dass das Band vor einer rosa
   Flaeche liegt; ohne clip-path (sehr alte Browser) bleibt schlicht ein
   ganzflaechig navyfarbenes Band stehen. Nichts wird unlesbar.
--------------------------------------------------------------------------- */
body.gfv-start .gfv-titelbereich {
    background: var(--gfv-akzent);
}

body.gfv-start .gfv-titelband {
    background: var(--gfv-navy);
    color: #ffffff;
    padding: 3.5rem 0 calc(3.5rem + 4.5vw) 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%);
}

body.gfv-start h1 {
    margin: 0 0 1rem 0;
    font-weight: 500;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: 0.01em;
    color: #ffffff;
}

body.gfv-start .gfv-vorspann {
    margin: 0;
    max-width: 44rem;
    font-size: clamp(1.05rem, 2.1vw, 1.3rem);
    line-height: 1.55;
    color: var(--gfv-auf-navy);
}

/* ---------------------------------------------------------------------------
   Hauptteil
--------------------------------------------------------------------------- */
body.gfv-start main {
    display: block;
    padding: 3.25rem 0 1rem 0;
}

body.gfv-start h2 {
    margin: 0 0 1.5rem 0;
    font-weight: 500;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.2;
    color: var(--gfv-navy-hell);
}

body.gfv-start h3 {
    margin: 0 0 0.35rem 0;
    font-weight: 500;
    font-size: 1.1875rem;
    line-height: 1.3;
    color: var(--gfv-navy-hell);
}

/* Zeilenlaenge. Ueber rund 80 Zeichen hinaus verliert das Auge die Zeile -
   fuer eine Seite, die jemand mit einem Zettel in der Hand liest, ist das der
   Unterschied zwischen ueberfliegen und suchen. */
body.gfv-start p { margin: 0 0 1rem 0; max-width: 46rem; }
body.gfv-start p:last-child { margin-bottom: 0; }

body.gfv-start a {
    color: var(--gfv-blau);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
body.gfv-start a:hover { color: var(--gfv-navy); }

/* Die Schritte 1-2-3. Eine echte <ol>, damit die Reihenfolge auch dann
   ankommt, wenn die Seite vorgelesen wird. */
body.gfv-start .gfv-schritte {
    list-style: none;
    counter-reset: gfvschritt;
    margin: 0 0 2.75rem 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

body.gfv-start .gfv-schritte > li {
    counter-increment: gfvschritt;
    position: relative;
    background: var(--gfv-flaeche);
    border-left: 5px solid var(--gfv-blau-gross);
    border-radius: var(--gfv-radius);
    padding: 1.35rem 1.5rem 1.35rem 4.6rem;
}

body.gfv-start .gfv-schritte > li::before {
    content: counter(gfvschritt);
    position: absolute;
    left: 1.35rem;
    top: 1.3rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--gfv-navy);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 2.2rem;
    text-align: center;
}

body.gfv-start .gfv-schritte p {
    margin: 0;
    color: var(--gfv-text);
    font-size: 1.0625rem;
}

/* Die Beispieladresse. Bewusst NICHT als Verweis - sie fuehrt nirgendwohin,
   die Zahl am Ende ist erfunden. Ein klickbarer Blindlink waere eine Falle.
   Eigene Zeile statt mitten im Satz: auf dem Telefon (390 px) ist die Adresse
   breiter als die Spalte und wurde dort abgeschnitten - gemessen 19.08.2026.
   overflow-wrap: anywhere bricht sie notfalls um; "break-word" allein reicht
   bei einer Zeichenkette ohne Leerzeichen nicht zuverlaessig. */
body.gfv-start .gfv-beispiel {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0.45rem 0;
    background: #ffffff;
    border: 1px solid var(--gfv-linie);
    border-radius: 4px;
    padding: 0.25em 0.55em;
    font-weight: 500;
    color: var(--gfv-navy-hell);
    /* Umbruch bevorzugt an dem <wbr> vor dem Schraegstrich (siehe Layout),
       damit die Nummer nicht mitten entzweigerissen wird; reicht die Breite
       auch dafuer nicht, bricht break-word notfalls doch. */
    word-break: normal;
    overflow-wrap: break-word;
}

/* Hinweiskasten: warum hier keine Liste steht. */
body.gfv-start .gfv-hinweis {
    border: 1px solid var(--gfv-linie);
    border-top: 4px solid var(--gfv-akzent);
    border-radius: var(--gfv-radius);
    padding: 1.35rem 1.5rem;
    margin: 0 0 2.75rem 0;
}

body.gfv-start .gfv-hinweis h2 {
    font-size: 1.1875rem;
    margin-bottom: 0.5rem;
}

body.gfv-start .gfv-hinweis p {
    color: var(--gfv-text-leise);
    font-size: 1.0625rem;
}

/* ---------------------------------------------------------------------------
   Kontaktband
--------------------------------------------------------------------------- */
body.gfv-start .gfv-kontakt {
    background: var(--gfv-flaeche);
    border-top: 1px solid var(--gfv-linie);
    padding: 2.75rem 0;
    margin-top: 1.5rem;
}

body.gfv-start .gfv-kontakt h2 { margin-bottom: 0.75rem; font-size: 1.375rem; }

body.gfv-start .gfv-adresse {
    display: inline-block;
    font-weight: 500;
    font-size: 1.1875rem;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Fusszeile
--------------------------------------------------------------------------- */
body.gfv-start .gfv-fuss {
    background: var(--gfv-navy);
    color: var(--gfv-auf-navy);
    padding: 2rem 0;
    font-size: 0.9375rem;
}

body.gfv-start .gfv-fuss p { margin: 0; }
body.gfv-start .gfv-fuss strong { color: #ffffff; font-weight: 500; }
body.gfv-start .gfv-fuss a { color: #ffffff; }

/* ---------------------------------------------------------------------------
   Hinweis ohne JavaScript. Die Seite braucht kein JavaScript; der Kasten
   sagt nur, dass es fuer den Fragebogen selbst gebraucht wird.
--------------------------------------------------------------------------- */
body.gfv-start .gfv-nojs {
    background: #fff6e5;
    border: 1px solid #e0b355;
    border-radius: var(--gfv-radius);
    padding: 1rem 1.25rem;
    margin: 0 0 2rem 0;
    font-size: 1rem;
    color: #4a3707;    /* auf #fff6e5 rund 9,6:1 */
}

/* ---------------------------------------------------------------------------
   Telefon und kleine Bildschirme
--------------------------------------------------------------------------- */
@media (max-width: 40rem) {
    body.gfv-start { font-size: 1.0625rem; }
    body.gfv-start .gfv-inhalt { padding: 0 1.15rem; }
    body.gfv-start .gfv-titelband { padding: 2.5rem 0 calc(2.5rem + 9vw) 0; }
    body.gfv-start .gfv-titelband,
    body.gfv-start .gfv-titelband {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9vw), 0 100%);
                clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9vw), 0 100%);
    }
    body.gfv-start main { padding-top: 2.75rem; }
    body.gfv-start .gfv-beispiel { font-size: 0.95rem; }
    body.gfv-start .gfv-schritte > li { padding: 1.15rem; }
    body.gfv-start .gfv-schritte > li::before {
        position: static;
        display: block;
        margin-bottom: 0.6rem;
    }
}

/* ---------------------------------------------------------------------------
   Papier. Wer die Seite ausdruckt, soll die Adresse mitbekommen.
--------------------------------------------------------------------------- */
@media print {
    body.gfv-start { font-size: 11pt; color: #000; }
    body.gfv-start .gfv-titelband { background: none; color: #000; -webkit-clip-path: none; clip-path: none; }
    body.gfv-start .gfv-titelbereich { background: none; }
    body.gfv-start h1, body.gfv-start .gfv-vorspann { color: #000; }
    body.gfv-start .gfv-fuss { background: none; color: #000; }
    body.gfv-start .gfv-fuss strong { color: #000; }
    body.gfv-start .gfv-nojs { display: none; }
}

/* ===========================================================================
   FEHLERSEITEN - Zusatz vom 19.08.2026 (views/layout_errors.twig)
   ---------------------------------------------------------------------------
   Die Fehlerseite traegt BEIDE Klassen: <body class="gfv-start gfv-fehler">.

   Warum "gfv-start" auch dort steht, obwohl es keine Startseite ist:
   Jede Regel oberhalb - Schrift, Farben, Baender, Schritte, Kontaktband,
   Fusszeile, Fokusring, Telefonansicht, Druckansicht - haengt an
   "body.gfv-start". Die Alternative waere gewesen, rund fuenfzig Selektoren
   auf "body.gfv-start, body.gfv-fehler" zu erweitern. Das haette jede
   einzelne Zeile der bereits abgenommenen Startseite angefasst, um NICHTS
   an ihr zu aendern - ein Diff, in dem ein Tippfehler nicht auffaellt.
   So bleibt oberhalb dieser Zeile jedes Zeichen unveraendert.

   Die Kapselung bleibt dabei vollstaendig: "gfv-start" setzen ausschliesslich
   die beiden Layoutdateien dieses Themes (layout_survey_list.twig und
   layout_errors.twig). Keine Fragebogenansicht setzt sie, und die config.xml
   laedt diese Datei nach wie vor auf keiner Seite mit.

   Alles unterhalb haengt zusaetzlich an "body.gfv-fehler" und kann die
   Startseite deshalb auch dann nicht erreichen, wenn dort einmal eine
   gleichnamige Klasse auftauchen sollte.
   =========================================================================== */

/* Der Weg zurueck. Kein Knopf im Sinne von <button> - es ist ein Verweis,
   und er wird auch als Verweis vorgelesen. Weiss auf Navy: 16,8:1. */
body.gfv-fehler .gfv-zurueck-zeile {
    margin: 2.25rem 0 0.5rem 0;
}

body.gfv-fehler .gfv-zurueck,
body.gfv-fehler .gfv-durchreichen .url-wrapper a {
    display: inline-block;
    background: var(--gfv-navy);
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.35;
    padding: 0.8rem 1.4rem;
    border-radius: var(--gfv-radius);
    /* 44 px hoch und breit genug fuer den Finger (WCAG 2.5.5). */
    min-height: 44px;
}

body.gfv-fehler .gfv-zurueck:hover,
body.gfv-fehler .gfv-durchreichen .url-wrapper a:hover {
    background: var(--gfv-navy-hell);
    color: #ffffff;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Der durchgereichte Kasten. Hier steht die Meldung, die LimeSurvey selbst
   erzeugt hat (abgelaufen, noch nicht gestartet, Zugangscode, Sitzung).
   Sie wird nur eingekleidet, nicht ersetzt - welche der Lagen es ist, laesst
   sich der Vorlage nicht zuverlaessig ansehen (siehe Kopf von
   layout_errors.twig).
--------------------------------------------------------------------------- */
body.gfv-fehler .gfv-durchreichen {
    border: 1px solid var(--gfv-linie);
    border-top: 4px solid var(--gfv-akzent);
    border-radius: var(--gfv-radius);
    padding: 1.5rem 1.6rem;
    margin: 0 0 1rem 0;
    background: var(--gfv-flaeche);
}

body.gfv-fehler .gfv-durchreichen p {
    margin: 0 0 0.9rem 0;
    font-size: 1.0625rem;
}
body.gfv-fehler .gfv-durchreichen p:last-child { margin-bottom: 0; }

body.gfv-fehler .gfv-durchreichen ul {
    margin: 0 0 0.9rem 0;
    padding-left: 1.2rem;
}
body.gfv-fehler .gfv-durchreichen ul.list-unstyled {
    list-style: none;
    padding-left: 0;
}

/* Bootstrap faerbt .text-danger. GEMESSEN am 19.08.2026 im laufenden Theme:
   2,95:1 auf unserer Flaeche #f4f6fb - weit unter den 4,5:1, die WCAG AA fuer
   Fliesstext verlangt und auf die BITV 2.0 verweist. #a4123c erreicht 7,1:1
   und bleibt erkennbar rot. Die Farbe ist ohnehin nicht der einzige Traeger
   der Aussage: die Meldung steht im Klartext daneben und traegt role="alert".

   HIER STEHT ALS EINZIGE STELLE DES THEMES EIN !important - und zwar
   notgedrungen: .text-danger ist eine Bootstrap-UTILITY, und die setzt ihre
   Farbe selbst mit !important. Ohne Gegenzug bleibt die Regel wirkungslos.
   Zuerst ohne gebaut, gemessen, wirkungslos gefunden, dann geaendert. */
body.gfv-fehler .gfv-durchreichen .text-danger {
    color: #a4123c !important;
    font-weight: 500;
}

body.gfv-fehler .gfv-durchreichen .url-wrapper {
    margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Papier. Auf einer ausgedruckten Fehlerseite ist der Weg zurueck als
   Adresse mehr wert als ein dunkler Kasten.
--------------------------------------------------------------------------- */
@media print {
    body.gfv-fehler .gfv-zurueck,
    body.gfv-fehler .gfv-durchreichen .url-wrapper a {
        background: none;
        color: #000;
        border: 1px solid #000;
        text-decoration: underline;
    }
    body.gfv-fehler .gfv-durchreichen { background: none; }
    body.gfv-fehler .gfv-durchreichen .text-danger { color: #000; }
}