@charset "UTF-8";

/* =========================================================================
   main.css – Corporate Design Landeshauptstadt Stuttgart
   Für: impressum.html · datenschutz.html · hinweise-bilder-texte.html
        (sowie kandidatur.html)

   Alle Werte sind aus der Referenz abgeleitet:
     – Datenschutzerklärung _ Landeshauptstadt Stuttgart.html
     – style-DK6J-oPv.css   (stuttgart.de)

   Abbildung Referenz -> Zielseiten:
     .SP-Grid / .SP-Grid__main ....... body (Seitenränder + Textspalte)
     .SP-Headline--article ........... h1
     .SP-Headline--section ........... h2
     .SP-Headline--paragraph ......... h3
     .SP-Headline--subheading ........ h4/h5/h6
     .SP-Paragraph ................... p, ul, ol, li, table
     .SP-Separator--visible .......... hr
     .SP-AnchorList .................. ul.toc
     .SP-Box ......................... .highlight / .highlight-box
     .SP-LastUpdatedTimestamp ........ .date
     .SP-Paragraph (schlichter Absatz) .contact-box
     .SP-hasCheckmarks ............... ul.steps
     .SP-Paragraph__link + SPi-Sprite  Icon-Links (tel:, mailto:, _blank,
                                       .stuttgart-link, .stuttgart-links)

   Der Selektor-Präfix `body` ist bewusst minimal gehalten; er dient nur
   dazu, lokale <style>-Blöcke der Formularseite zu überschreiben.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Webfont "Merriweather Sans"
   Einbindung unverändert übernommen (keine Änderung an Dateien/Verlinkungen).
   Fehlen die Dateien, greift automatisch der System-Fallback-Stack.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Merriweather Sans';
    src: url('https://evoting.werdenktwas.de/upload/themes/survey/stuttgart_design_test2/files/MerriweatherSans-VariableFont_wght.ttf') format('truetype-variations'),
         url('https://evoting.werdenktwas.de/upload/themes/survey/stuttgart_design_test2/files/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather Sans';
    src: url('https://evoting.werdenktwas.de/upload/themes/survey/stuttgart_design_test2/files/MerriweatherSans-Italic-VariableFont_wght.ttf') format('truetype-variations'),
         url('https://evoting.werdenktwas.de/upload/themes/survey/stuttgart_design_test2/files/MerriweatherSans-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Design-Tokens (1:1 aus dem :root von stuttgart.de)
   ------------------------------------------------------------------------- */
:root {
    /* Farben */
    --color-white: #fff;
    --color-pampas: #f5f4f1;
    --color-pampas-darker: #efede8;
    --color-carrara: #eae8e3;
    --color-silver-chalice: #aeaeae;
    --color-dusty-gray: #949494;
    --color-dove-gray: #727272;
    --color-tundora: #4b4b4b;
    --color-mine-shaft: #323131;
    --color-black: #000;

    --color-accent: #ffb300;
    --color-accent-light: #ffb300;
    --color-accent-dark: #c28800;
    --color-accent-darker: #b88100;
    --color-accent-text: #26262c;

    --color-main: #26262c;
    --color-text: var(--color-main);

    /* Link-Unterstreichung (Referenz: 2px in Akzentfarbe) */
    --color-link-border: var(--color-accent);
    --color-link-border-hover: var(--color-accent);
    --sp-link-border: var(--color-link-border);
    --sp-link-border-hover: var(--color-link-border-hover);

    /* Pfeil-Icon = Original-Pfad aus <symbol id="SPi-link"> (viewBox 0 0 60 60).
       Der viewBox ist hier auf die Glyphe zugeschnitten (20 21.586 21.414 16.829),
       damit "mask-size: contain" die Groesse exakt trifft.
       Wird per mask eingefaerbt, nimmt also automatisch currentColor an. */
    --sp-icon-link: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='20%2021.586%2021.414%2016.829'%3E%3Cpath%20d='M37.586,29L31.586,23L33,21.586L41.414,30L33,38.414L31.586,37L37.586,31L20,31L20,29Z'/%3E%3C/svg%3E");
    /* Rendergroesse der Glyphe:
       Button: 1em    x scale(2.5) x (21.414/60 bzw. 16.829/60)
       Link:   1.25em x scale(2)   x (21.414/60 bzw. 16.829/60)  -> identisch */
    --sp-icon-link-w: .892em;
    --sp-icon-link-h: .701em;

    /* Telefon = <symbol id="SPi-phone"> (viewBox 0 0 60 60),
       zugeschnitten auf die Glyphe (19 18.5857864 23.4142136 23.4142136).
       Groesse: 1.25em x scale(2) x (23.4142136/60) = .976em */
    --sp-icon-phone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='19%2018.5857864%2023.4142136%2023.4142136'%3E%3Cpath%20d='M36,31.5857864%20L42.4142136,38%20L38.4142136,42%20L38,42%20C27.5067153,42%2019,33.4932847%2019,23%20L19,22.5857864%20L23,18.5857864%20L29.4142136,25%20L26.4142136,28%20L33,34.5857864%20L36,31.5857864%20Z%20M33,37.4142136%20L23.5857864,28%20L26.5857864,25%20L23,21.4142136%20L21.0048328,23.4093808%20C21.2190362,32.4729021%2028.5270979,39.7809638%2037.5906192,39.9951672%20L39.5857864,38%20L36,34.4142136%20L33,37.4142136%20Z'/%3E%3C/svg%3E");
    --sp-icon-phone-w: .976em;
    --sp-icon-phone-h: .976em;

    /* Neues Fenster = <symbol id="SPi-linkNewWindow"> (viewBox 0 0 60 60),
       zugeschnitten auf die Glyphe (19 18 24 24).
       Groesse: 1.25em x scale(2) x (24/60) = 1em */
    --sp-icon-link-new-window: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='19%2018%2024%2024'%3E%3Cpath%20d='M39.5857864,20%20L33,20%20L33,18%20L43,18%20L43,28%20L41,28%20L41,21.4142136%20L31.7071068,30.7071068%20L30.2928932,29.2928932%20L39.5857864,20%20Z%20M37,40%20L37,32%20L39,32%20L39,42%20L19,42%20L19,22%20L29,22%20L29,24%20L21,24%20L21,40%20L37,40%20Z'/%3E%3C/svg%3E");
    --sp-icon-link-new-window-w: 1em;
    --sp-icon-link-new-window-h: 1em;

    /* E-Mail = <symbol id="SPi-email"> (viewBox 0 0 128 128),
       zugeschnitten auf die Glyphe (3 19 122 90). Das Symbol ist auf
       einem engeren Raster gezeichnet als die 60er-Icons; die Groesse
       ist daher optisch auf deren Hoehe normiert (Seitenverhaeltnis
       122:90 bleibt erhalten). */
    --sp-icon-email: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='3%2019%20122%2090'%3E%3Cpath%20d='M122.73%2022.05A11%2011%200%200%200%20114.9%2019H13.07a11%2011%200%200%200-7.83%203.05C3.05%2024.09%203%2026.49%203%2029.33v70.24c0%203%20.23%205.6%202.73%207.72C7.78%20109%2010.85%20109%2013.62%20109h100.75c3.28%200%206.57-.27%208.85-2.63%201.85-1.91%201.78-4.45%201.78-7v-70c0-2.88-.11-5.31-2.27-7.32zM11.82%2027.77a3%203%200%200%201%201.8-.77h100.75a3.12%203.12%200%200%201%201.94.9%202.64%202.64%200%200%201%201%201.8c0%20.9%200%2011.7-10.17%2017.66q-13.41%209.77-27.82%2020.41l-2.44%201.91c-1.33%201-2.41%201.85-3.18%202.42s-1.8%201.23-3.08%202a19.23%2019.23%200%200%201-3.49%201.78c-1%20.38-4.1.59-3.13.59s-1.91-.21-3-.59a18.31%2018.31%200%200%201-3.49-1.78c-1.28-.8-2.3-1.47-3.08-2s-1.86-1.37-3.19-2.42-2.15-1.68-2.42-1.91Q34.39%2057.15%2021%2047.36a20.35%2020.35%200%200%201-10.17-18.3c.08-.62.48-.78.99-1.29zm31.74%2046.78c.63.48%201.23.93%201.8%201.39%202.32%201.82%204.2%203.24%205.67%204.25a32.7%2032.7%200%200%200%205.88%203.07A24.93%2024.93%200%200%200%2064%2084.8a24.47%2024.47%200%200%200%207-1.54%2031.82%2031.82%200%200%200%205.89-3.07c1.44-1%203.35-2.43%205.66-4.25.25-.2.52-.38.77-.58L110.94%20101H15.09zm44.38-3.35c6.58-5%2014.56-10.44%2024.27-17.35A39.44%2039.44%200%200%200%20117%2049.6v49.21zM15.79%2053.85q13.77%209.82%2023.33%2017L11%2097V49.6a38%2038%200%200%200%204.79%204.25z'/%3E%3C/svg%3E");
    --sp-icon-email-w: 1em;
    --sp-icon-email-h: .738em;

    /* Typografie */
    --font-family-base: "Merriweather Sans", sans-serif;

    /* Seitenrand = .SP-Grid (kleinste Stufe) */
    --page-gutter: 5.9vw;

    /* Max. Breite der zentrierten Inhaltsspalte (.survey-welcome, Ziel 2) */
    --welcome-max-width: 61.5rem;

    /* Vertikaler Rhythmus = .SP-Section / .SP-Text (mobile Stufe) */
    --space-section: calc(6.77vw + .5rem);
    --space-text: calc(5.8vw + .25rem);
}

/* -------------------------------------------------------------------------
   3. Grundgerüst  (= html / body / .SP-Grid / .SP-Grid__main)
   ------------------------------------------------------------------------- */
html {
    background-color: var(--color-white);
    color: var(--color-main);
    font: 400 100%/1.5 var(--font-family-base);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern", "liga", "clig", "calt";
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    overflow-y: scroll;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: calc(8px + 2.5vw);
    font-weight: 400;
    font-style: normal;
    line-height: 1.625;
    text-align: left;

    /* .SP-Article margin-top: 1rem / .SP-Section margin-bottom */
    margin: 0 auto;
    /*padding-block: 1rem var(--space-section);*/
    /*padding-inline: var(--page-gutter);*/
}

/* -------------------------------------------------------------------------
   4. Typografie – Skala und Abstände nach stuttgart.de
   ------------------------------------------------------------------------- */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-style: normal;
    font-weight: 700;
    text-align: left;
}

/* H1 = .SP-Headline--article */
body h1 {
    margin: 0 0 .5em;
    font-size: calc(15px + 4.7vw);
    line-height: 1.26667;
}

/* H2 = .SP-Headline--section (Abstand oben = .SP-Section margin-top) */
body h2 {
    clear: both;
    margin: var(--space-section) 0 .85em;
    font-size: calc(10px + 3.1vw);
    line-height: 1.2;
}

/* H3 = .SP-Headline--paragraph (Abstand oben = .SP-Text margin-bottom) */
body h3 {
    margin: var(--space-text) 0 .75em;
    font-size: calc(8px + 2.5vw);
    line-height: 1.375;
}

/* H4–H6 = .SP-Headline--subheading */
body h4,
body h5,
body h6 {
    margin: var(--space-text) 0 .5em;
    font-size: calc(8px + 2.5vw);
    line-height: 1.3125;
}

/* Direkt aufeinander folgende Überschriften: kein doppelter Abstand */
body h2 + h3,
body h2 + h4,
body h3 + h4 {
    margin-top: 0;
}

body > :first-child {
    margin-top: 0;
}

/* Absätze = .SP-Paragraph p */
body p {
    margin: 0 0 1em;
    text-align: left;
}

body p:empty {
    display: none;
}

body b,
body strong {
    font-weight: 700;
}

body em,
body i {
    font-style: italic;
}

/* -------------------------------------------------------------------------
   5. Links – Referenz: Textfarbe bleibt, 2px Akzent-Unterstreichung

   WICHTIG – Footer-Ausschluss:
   Saemtliche Link-Regeln dieses Stylesheets (Kapitel 5 und 8.6) tragen den
   Ausschluss  :not(:where(.footer, .footer *))  und greifen damit nicht auf
   Links innerhalb eines Containers mit der Klasse .footer – auch nicht in
   beliebig tief verschachtelten Elementen.

   Warum :not(:where(...)) und nicht :not(.footer *)?
   :where() hat per Definition die Spezifitaet 0 und vererbt diese an :not().
   Die Selektoren behalten damit exakt ihre bisherige Spezifitaet (z. B.
   `body a` = 0,0,2). Die Kaskade gegenueber Theme-Regeln (.fruity …) bleibt
   unveraendert -> keine Regressionen im Inhaltsbereich.
   ------------------------------------------------------------------------- */
body a:not(:where(.footer, .footer *)) {
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid var(--color-link-border);
    line-height: 1.15;
}

body a:not(:where(.footer, .footer *)):hover {
    border-bottom-color: var(--color-link-border-hover);
    animation: .5s flickering-link;
}

@keyframes flickering-link {
    0%   { border-bottom-color: var(--color-link-border); }
    50%  { border-bottom-color: transparent; }
    100% { border-bottom-color: var(--color-link-border-hover); }
}

/* -------------------------------------------------------------------------
   5.1 Footer – defensiver Reset (Guertel + Hosentraeger)

   Der Ausschluss oben verhindert bereits jede Vererbung aus main.css.
   Dieser Block neutralisiert zusaetzlich nur solche Eigenschaften, die
   dieses Stylesheet ueberhaupt setzt (Icon-Pseudoelement, nowrap, max-width,
   line-height, Flicker-Animation). Farbe, text-decoration und border werden
   bewusst NICHT angefasst, damit Theme-Regeln wie `.fruity .footer a`
   vollkommen unberuehrt bleiben. Kein !important, damit Theme-Selektoren
   mit hoeherer Spezifitaet weiterhin gewinnen.
   ------------------------------------------------------------------------- */
.footer a,
.footer a:hover,
.footer a:focus,
.footer a:active {
    max-width: none;
    line-height: inherit;
    white-space: normal;
    animation: none;
}

/* Icon-Pseudoelemente aus Kapitel 8.6 im Footer vollstaendig unterdruecken */
.footer a::before {
    content: none;
    -webkit-mask: none;
            mask: none;
}

:focus-visible {
    outline: 3px solid Highlight;
    outline: 3px auto -webkit-focus-ring-color;
    outline-offset: 5px;
}

/* -------------------------------------------------------------------------
   6. Listen = .SP-Paragraph ul/ol/li
   ------------------------------------------------------------------------- */
body ul,
body ol {
    margin: 0 0 1em;
    padding-left: 2.5rem;
    list-style: none;
    overflow: hidden;
}

body ul:last-child,
body ol:last-child {
    margin-bottom: 0;
}

body ul ul,
body ul ol,
body ol ul,
body ol ol {
    margin-top: 1.25em;
}

body ul li:not(:last-child) ul,
body ul li:not(:last-child) ol,
body ol li:not(:last-child) ul,
body ol li:not(:last-child) ol {
    margin-bottom: .25em;
}

body ul :last-child,
body ol :last-child {
    margin-bottom: 0;
}

body li {
    position: relative;
    margin-bottom: 1em;
    line-height: 1.575;
    list-style: none;
}

body li:last-child {
    margin-bottom: 0;
}

body li::before {
    position: absolute;
    top: -.125em;
    left: -2em;
    width: 2.5em;
    padding-left: .625em;
    padding-right: .3125em;
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.575;
    text-align: left;
}

body ul > li::before {
    content: "\25CF";               /* ● */
    top: 0;
    left: -2.125rem;
    font-size: .75em;
    line-height: 1.875;
}

body ol {
    counter-reset: numbers;
}

body ol > li::before {
    counter-increment: numbers;
    content: counter(numbers);
    top: unset;
    left: -.67em;
    width: auto;
    font-size: 1.125em;
    text-align: center;
    transform: translate(-70%, -5%);
}

/* -------------------------------------------------------------------------
   7. Trenner, Bilder, Tabellen
   ------------------------------------------------------------------------- */

/* hr = .SP-Separator--visible */
body hr {
    clear: both;
    height: 0;
    margin: 0 0 var(--space-text);
    padding: 0;
    border: 0;
    border-bottom: 3px solid var(--color-carrara);
}

body img {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
}

/* Tabellen = .SP-Paragraph table */
body table {
    width: 100%;
    margin: 0 0 1em;
    border: none;
    border-collapse: collapse;
}

body caption {
    margin: 1em 0;
    text-align: left;
    font-weight: 700;
}

body th,
body td {
    padding: 1em;
    border: 1px solid var(--color-white);
    text-align: left;
    vertical-align: top;
}

body th:first-child,
body td:first-child {
    border-left: none;
}

body th:last-child,
body td:last-child {
    border-right: none;
}

body th {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 700;
}

body table tbody tr:nth-child(even) td {
    background-color: var(--color-pampas);
}

body table tbody tr:nth-child(odd) td {
    background-color: var(--color-white);
}

/* -------------------------------------------------------------------------
   8. Seitenspezifische Komponenten der Zielseiten
   ------------------------------------------------------------------------- */

/* 8.1 Inhaltsverzeichnis = .SP-AnchorList
   Die Referenz stellt Ankerlisten ohne Kasten, Hintergrund oder Rahmen dar. */
body ul.toc {
    margin: 0 0 var(--space-section);
    padding: 0;
    list-style: none;
    overflow: visible;
}

body ul.toc > li {
    margin-bottom: 1em;
    line-height: 1.5;
}

body ul.toc > li:last-child {
    margin-bottom: 0;
}

body ul.toc > li::before {
    content: none;
}

/* 8.2 Kontaktangaben = schlichter Absatzblock (.SP-Paragraph)
   Die Referenz setzt Anschriften ohne Kasten oder Hintergrund. */
body .contact-box {
    margin: 0 0 1em;
}

body .contact-box > :first-child {
    margin-top: 0;
}

body .contact-box > :last-child {
    margin-bottom: 0;
}

/* 8.3 Hervorhebung = .SP-Box (umlaufender Rahmen in Akzentfarbe) */
body .highlight,
body .highlight-box {
    margin: 0 0 1em;
    padding: 1.5rem;
    border: 3px solid var(--color-accent);
    background: none;
    overflow: hidden;
}

body .highlight > :first-child,
body .highlight-box > :first-child {
    margin-top: 0;
}

body .highlight > :last-child,
body .highlight-box > :last-child {
    margin-bottom: 0;
}

/* 8.4 Stand-/Datumsangabe = .SP-LastUpdatedTimestamp */
body .date {
    margin: var(--space-section) 0 0;
    font-size: 1rem;
    font-style: italic;
}

body .date p {
    margin: 0;
}

/* 8.5 Checkmark-Liste (kandidatur.html) = .SP-hasCheckmarks */
body ul.steps {
    padding-top: .625em;
    padding-left: 4.375em;
}

body ul.steps > li {
    min-height: 2.75em;
    margin-bottom: 1em;
}

body ul.steps > li:last-child {
    min-height: 2.25em;
    margin-bottom: 0;
}

body ul.steps > li::before {
    content: "";
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    background-color: var(--color-pampas-darker);
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M40%2021.172L42.828%2024%2027%2039.828%2017.172%2030%2020%2027.172l7%207z%22%2F%3E%3C%2Fsvg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
}

/* 8.6 Icon-Links = .SP-Paragraph__link mit vorangestelltem Sprite-Symbol

   Die Referenz stellt jedem Link ein Symbol in currentColor voran
   (.SP-Paragraph__linkIcon) und unterstreicht nur den Text
   (.SP-Paragraph__linkText), nicht das Symbol.

   Da die Zielseiten kein inneres <span> um den Linktext haben, wird die
   Akzentlinie hier per text-decoration gezeichnet statt per border-bottom:
   text-decoration wird nicht in atomare Inline-Boxen vererbt, das
   inline-block-Symbol im ::before bleibt also automatisch frei von der
   Linie – und die Linie folgt korrekt jedem Zeilenumbruch (die Referenz
   erlaubt Umbrueche ueber .SP-Paragraph__linkText { white-space: normal }).
   Der text-underline-offset ist so gewaehlt, dass die Linie auf derselben
   Hoehe sitzt wie die border-bottom der uebrigen Links.

   Symbolzuordnung wie in der Referenz:
     href^="tel:"     -> SPi-phone
     href^="mailto:"  -> SPi-email
     target="_blank"  -> SPi-linkNewWindow
     .stuttgart-link  -> SPi-link (Pfeil, manuell gesetzt)
     .stuttgart-links -> SPi-link fuer alle Links im Container            */

a[href^="mailto:"]:not(:where(.footer, .footer *)),
a[href^="tel:"]:not(:where(.footer, .footer *)),
a[href^="#"]:not(:where(.footer, .footer *)),
a[target="_blank"]:not(:where(.footer, .footer *)),
.SP-NoBreak {
    white-space: nowrap;
}

a .SP-Link__text {
    white-space: normal;
}

body a.stuttgart-link:not(:where(.footer, .footer *)),
body .stuttgart-links a:not(.btn):not(.ls-language-changer-item):not(:where(.footer, .footer *)),
body a[target="_blank"]:not(.btn):not(:where(.footer, .footer *)),
body a[href^="tel:"]:not(.btn):not(:where(.footer, .footer *)),
body a[href^="mailto:"]:not(.btn):not(:where(.footer, .footer *)) {
    /* Pro Link ueberschreibbar, z. B. style="--sp-link-icon:url(...)" */
    --sp-link-icon:   var(--sp-icon-link);
    --sp-link-icon-w: var(--sp-icon-link-w);
    --sp-link-icon-h: var(--sp-icon-link-h);
    --sp-link-gap:    .43em;

    max-width: 100%;
    color: inherit;
    /* schlaegt `body a` sowie Theme-Regeln wie `.fruity .panel-body a`,
       die bei gleicher Spezifitaet spaeter geladen werden */
    border-bottom: 0 !important;
    text-decoration: underline;
    text-decoration-color: var(--sp-link-border);
    text-decoration-thickness: 2px;
    text-underline-offset: .15em;
    text-decoration-skip-ink: none;
    transition: text-decoration-color .3s;
}

/* Symbolwahl – nach der Basisregel, damit tel:/mailto: gegenueber
   target="_blank" gewinnen (ein mailto-Link mit _blank zeigt den Brief). */
body a[target="_blank"]:not(.btn):not(:where(.footer, .footer *)) {
    --sp-link-icon:   var(--sp-icon-link-new-window);
    --sp-link-icon-w: var(--sp-icon-link-new-window-w);
    --sp-link-icon-h: var(--sp-icon-link-new-window-h);
}

/* Der frueher noetige Workaround
       .footer a[target="_blank"] { --sp-link-icon: initial; … }
   entfaellt: die Variablen werden im Footer gar nicht mehr gesetzt. */

.fruity .footer a {
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.5s ease-in-out;
line-height: 1.2;
color:white;
}
.fruity .footer a:hover {
border-color: white;
color:white;
}


body a[href^="tel:"]:not(.btn):not(:where(.footer, .footer *)) {
    --sp-link-icon:   var(--sp-icon-phone);
    --sp-link-icon-w: var(--sp-icon-phone-w);
    --sp-link-icon-h: var(--sp-icon-phone-h);
}

body a[href^="mailto:"]:not(.btn):not(:where(.footer, .footer *)) {
    --sp-link-icon:   var(--sp-icon-email);
    --sp-link-icon-w: var(--sp-icon-email-w);
    --sp-link-icon-h: var(--sp-icon-email-h);
}

/* Symbol im Textfluss; display:inline-block haelt es aus der Unterstreichung */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    body a.stuttgart-link:not(:where(.footer, .footer *))::before,
    body .stuttgart-links a:not(.btn):not(.ls-language-changer-item):not(:where(.footer, .footer *))::before,
    body a[target="_blank"]:not(.btn):not(:where(.footer, .footer *))::before,
    body a[href^="tel:"]:not(.btn):not(:where(.footer, .footer *))::before,
    body a[href^="mailto:"]:not(.btn):not(:where(.footer, .footer *))::before {
        content: "";
        display: inline-block;
        width:  var(--sp-link-icon-w);
        height: var(--sp-link-icon-h);
        margin-right: var(--sp-link-gap);
        vertical-align: baseline;
        background-color: currentColor;
        -webkit-mask: var(--sp-link-icon) no-repeat center / contain;
                mask: var(--sp-link-icon) no-repeat center / contain;
    }
}

body a.stuttgart-link:not(:where(.footer, .footer *)):hover,
body .stuttgart-links a:not(.btn):not(.ls-language-changer-item):not(:where(.footer, .footer *)):hover,
body a[target="_blank"]:not(.btn):not(:where(.footer, .footer *)):hover,
body a[href^="tel:"]:not(.btn):not(:where(.footer, .footer *)):hover,
body a[href^="mailto:"]:not(.btn):not(:where(.footer, .footer *)):hover {
    text-decoration-color: var(--sp-link-border-hover);
    animation: .5s sp-flickering-underline;
}

@keyframes sp-flickering-underline {
    0%   { text-decoration-color: var(--sp-link-border); }
    50%  { text-decoration-color: transparent; }
    100% { text-decoration-color: var(--sp-link-border-hover); }
}

/* Bild-Links ausnehmen (kein Symbol, keine Linie) */
body a:has(> img):not(:where(.footer, .footer *)) {
    text-decoration: none;
    border-bottom: none;
}

body a:has(> img):not(:where(.footer, .footer *))::before {
    content: none;
}

/* Opt-out fuer einzelne Links: class="no-icon" */
body a.no-icon:not(:where(.footer, .footer *))::before {
    content: none;
}

/* -------------------------------------------------------------------------
   8.7 Welcome-Container horizontal zentrieren (Ziel 2)

   .survey-welcome wird als Blockelement mit begrenzter Breite mittig im
   Viewport ausgerichtet (margin-inline: auto -> links und rechts automatisch
   gleicher Abstand). Der Textinhalt bleibt ausdruecklich linksbuendig.
   Breite ueber --welcome-max-width steuerbar; --page-gutter sorgt dafuer,
   dass der Text auf schmalen Viewports nicht am Rand klebt.
   ------------------------------------------------------------------------- */
body .survey-welcome {
    display: block;
    width: 100%;
    max-width: var(--welcome-max-width);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
    text-align: left;
}

/* Fallback fuer Engines ohne margin-inline (logische Kurzschreibweise) */
@supports not (margin-inline: auto) {
    body .survey-welcome {
        margin-left: auto;
        margin-right: auto;
    }
}

/* -------------------------------------------------------------------------
   9. Responsive Stufen – Breakpoints von stuttgart.de
   ------------------------------------------------------------------------- */

/* ab 320px */
@media (min-width: 20rem) {
    :root {
        --page-gutter: 1.1875rem;
    }
    body   { font-size: 1rem; line-height: 1.625; }
    body h1 { font-size: 1.875rem;  line-height: 1.26667; }
    body h2 { font-size: 1.25rem;   line-height: 1.2; }
    body h3 { font-size: 1rem;      line-height: 1.375; }
    body h4,
    body h5,
    body h6 { font-size: 1rem;      line-height: 1.3125; }
}

/* ab 544px */
@media (min-width: 34rem) {
    :root {
        --page-gutter: 2.25rem;
    }
    body   { line-height: 1.875; }
    body h2 { font-size: 1.375rem;  line-height: 1.22727; }
    body h3 { font-size: 1.0625rem; line-height: 1.35294; }
    body h4,
    body h5,
    body h6 { font-size: 1rem;      line-height: 1.5; }
}

/* ab 768px */
@media (min-width: 48rem) {
    :root {
        --page-gutter: 2.75rem;
        --space-section: 3.75rem;
        --space-text: 3rem;
    }
    body h2 { font-size: 1.5rem;    line-height: 1.25; }
    body h3 { font-size: 1.125rem;  line-height: 1.38889; }
}

/* ab 984px: Textspalte = 2/3 des Rasters, mittig im Raster (.SP-Grid__main) */
@media (min-width: 61.5rem) {
    :root {
        --page-gutter: 3.75rem;
    }
    body {
        /*padding-block-start: 3.5rem;*/
        /*padding-inline: calc(3.75rem + (100% - 7.5rem) / 6 + .333333rem);*/
    }
    body h1 { font-size: 2.5rem;    line-height: 1.25;    margin-bottom: .4em; }
    body h2 { font-size: 1.625rem;  line-height: 1.30769; margin-bottom: .7em; }
    body h3 { font-size: 1.1875rem; line-height: 1.42105; margin-bottom: 1.25em; }
    body li { line-height: 1.75; }
}

/* ab 1200px */
@media (min-width: 75rem) {
    body h2 { font-size: 1.875rem;  line-height: 1.33333; }
    body h3 { font-size: 1.25rem;   line-height: 1.4; }
}

/* ab 1424px */
@media (min-width: 89rem) {
    :root {
        --page-gutter: 4.625rem;
    }
    body {
        font-size: 1.125rem;
        line-height: 1.83333;
        /*padding-inline: calc(4.625rem + (100% - 9.25rem) / 6 + .40625rem);*/
    }
    body h1 { font-size: 3.125rem;  line-height: 1.2; }
    body h4,
    body h5,
    body h6 { font-size: 1.125rem;  line-height: 1.61111; }
}

/* ab 1504px: Raster wird auf 84,75rem begrenzt und zentriert */
@media (min-width: 94rem) {
    body {
        /*max-width: 84.75rem;*/
        /*padding-inline: calc(84.75rem / 6 + .40625rem);*/
    }
}

/* -------------------------------------------------------------------------
   10. Barrierefreiheit & Druck
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    html,
    body {
        background: #fff;
        color: #000;
        width: 100%;
        max-width: none;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 10pt;
        orphans: 4;
        widows: 2;
    }

    body * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none !important;
        transition: none !important;
        animation: none !important;
    }

    body h1,
    body h2,
    body h3,
    body h4 {
        break-after: avoid;
        page-break-after: avoid;
    }

    body a,
    body li,
    body table tr td,
    body table tr th,
    body ul.toc,
    body .contact-box,
    body .highlight,
    body .highlight-box {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* --- Anpassung für Survey --- */
@media (min-width: 962px) {
.container {
    margin-left:3rem!important;
    margin-right:3rem!important;
}}