/*
 * Fotowettbewerb "Alu-Leichtverbau TITAN im Einsatz"
 *
 * Werte stammen aus design/README.md. Bewusst rechtwinklig: keine Radien,
 * Schatten ausschliesslich am Dekobild der Intro-Sektion.
 */

/*
 * Corporate-Schrift, kopiert aus dem Theme ischebeck-default (Monotype-
 * Lizenz, dieselbe Domain). Nur die drei benutzten Schnitte - 300 fuer den
 * leichten Teil der Headlines, 400 fuer Fliesstext, 700 fuer Auszeichnungen.
 * Das Theme haelt 16 Varianten vor, die diese Seite nicht braucht.
 *
 * Bewusst als eigene Kopie und nicht als Verweis auf den Theme-Pfad: die
 * Seite laeuft ausserhalb von WordPress und soll nicht brechen, wenn am
 * Theme aufgeraeumt wird.
 *
 * Der @import von fast.fonts.net aus dem Theme bleibt draussen - der Aufruf
 * meldet jeden Seitenaufruf an Monotype und braeuchte eine Einwilligung.
 */
@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/hn-300.woff2") format("woff2"),
         url("../fonts/hn-300.woff") format("woff");
}

@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/hn-400.woff2") format("woff2"),
         url("../fonts/hn-400.woff") format("woff");
}

@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/hn-700.woff2") format("woff2"),
         url("../fonts/hn-700.woff") format("woff");
}

:root {
    --fw-schwarz: #1a1a1a;
    --fw-rot: #E10000;
    --fw-gelb: #ffed00;

    --fw-bg-intro: #eff1f3;
    --fw-bg-preise: #ffffff;
    --fw-bg-formular: #e5e8eb;
    --fw-bg-kachel: #f1f3f4;

    --fw-text-sekundaer: #56606a;
    --fw-text-meta: #6b7276;
    --fw-rand-drop: #b9c0c6;

    /*
     * 1170px ist die reine INHALTSBREITE, nicht die Aussenkante. Das
     * seitliche Padding wird auf die max-width aufgeschlagen, statt nach
     * innen zu ziehen - sonst blieben bei 56px Padding nur 1058px Inhalt.
     *
     * Topbar, Sektionen, Hero-Copy und Footer nutzen bewusst denselben
     * Randwert. Das README nennt fuer die Topbar zwar 32px, aber mit zwei
     * verschiedenen Werten fluchtet das Logo nur solange, wie beide
     * Container voll ins Fenster passen: sobald der Viewport unter die
     * breitere Aussenkante faellt (ab ca. 1280px), laufen die Inhaltskanten
     * auseinander. Ein gemeinsamer Wert haelt sie auf jeder Breite bündig.
     */
    --fw-breite: 1170px;
    --fw-pad-sektion: 56px;

    /* Kopfleiste und Logo - mobil unten ueberschrieben. */
    --fw-kopf-hoehe: 130px;
    --fw-logo-breite: 180px;

    /* Balken im Headerbild - mobil unten ueberschrieben. */
    --fw-balken-hoehe: 50px;
    --fw-sub-hoehe: 50px;
    --fw-hero-schrift: 40px;

    /* Fliesstext im Content-Bereich, mobil unten ueberschrieben. */
    --fw-text-groesse: 18px;
    --fw-zeilenhoehe: 26px;

    --fw-schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--fw-bg-formular);
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--fw-schrift);
    color: var(--fw-schwarz);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--fw-schwarz);
}

a:hover {
    color: var(--fw-rot);
}

img {
    max-width: 100%;
}

/*
 * Eigene display-Regeln schlagen sonst das hidden-Attribut - der leere
 * Vorschau-Container wuerde als Grid weiter Platz beanspruchen.
 */
[hidden] {
    display: none !important;
}

input,
textarea,
select,
button {
    font-family: inherit;
}

input::placeholder,
textarea::placeholder {
    color: var(--fw-text-meta);
    opacity: 1;
}

/* ---------------------------------------------------------------- Topbar */

.fw-topbar {
    background: #fff;
}

.fw-topbar__inner {
    max-width: calc(var(--fw-breite) + 2 * var(--fw-pad-sektion));
    margin: 0 auto;
    /* Feste Leistenhoehe; das Logo wird darin vertikal zentriert. */
    height: var(--fw-kopf-hoehe);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 var(--fw-pad-sektion);
}

.fw-topbar__logo {
    display: block;
}

.fw-topbar__logo img {
    width: var(--fw-logo-breite);
    height: auto;
    display: block;
}

/* ------------------------------------------------------------------ Hero */

.fw-hero {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
    background: #cfd4d8;
}

.fw-hero__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}

.fw-hero__copy {
    position: absolute;
    /* Auf dieselbe Inhaltsachse wie Topbar und Sektionen ausgerichtet. */
    left: max(var(--fw-pad-sektion), calc(50% - var(--fw-breite) / 2));
    /* Vertikal mittig im Headerbild. */
    top: 50%;
    transform: translateY(-50%);
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.fw-hero__h1 {
    margin: 0;
    font-size: var(--fw-hero-schrift);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap 0: die beiden Balken stehen buendig uebereinander */
    gap: 0;
}

/*
 * Symmetrisches Padding: das README nennt 13px oben / 9px unten, damit
 * steht die Schrift aber sichtbar aussermittig im Balken. Gleiche Werte
 * oben und unten, die Balkenhoehe bleibt dieselbe (11 + 11 = 13 + 9).
 */
.fw-hero__balken {
    background: var(--fw-schwarz);
    color: #fff;
    /* Feste Balkenhoehe; die Schrift wird darin vertikal zentriert. */
    height: var(--fw-balken-hoehe);
    display: flex;
    align-items: center;
    padding: 0 14px;
}

/* Zweiter Balken rueckt naeher an den ersten. */
.fw-hero__balken:nth-of-type(2) {
    margin-top: -7px;
}

.fw-hero__sub {
    background: #fff;
    color: var(--fw-rot);
    font-size: var(--fw-hero-schrift);
    line-height: 1;
    font-weight: 400;
    height: var(--fw-sub-hoehe);
    display: flex;
    align-items: center;
    padding: 0 14px;
}

/* --------------------------------------------------------- Sektionsbaender */

.fw-band {
    position: relative;
}

/*
 * Die Intro-Sektion liegt ueber der Preis-Sektion, damit das Dekobild die
 * Sektionsgrenze zur Haelfte ueberlappen kann.
 */
.fw-band--intro {
    background: var(--fw-bg-intro);
    z-index: 2;
}

.fw-band--preise {
    background: var(--fw-bg-preise);
    z-index: 1;
}

.fw-band--formular {
    background: var(--fw-bg-formular);
}

.fw-sektion {
    position: relative;
    max-width: calc(var(--fw-breite) + 2 * var(--fw-pad-sektion));
    margin: 0 auto;
    padding: 84px var(--fw-pad-sektion) 80px;
}

.fw-sektion--intro {
    padding-bottom: 120px;
}

.fw-band--formular .fw-sektion {
    padding-bottom: 96px;
}

/* ------------------------------------------------------------- Headlines */

.fw-h2 {
    margin: 0 0 44px;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 400;
}

.fw-h2__zeile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fw-h2__stark {
    display: block;
    font-weight: 700;
}

.fw-h2__leicht {
    display: inline-block;
    font-weight: 300;
}

/* Rote Dekolinie unter dem hervorgehobenen Wort, linksbuendig am Wortanfang */
.fw-h2__marke {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.fw-h2__marke::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 1px;
    background: var(--fw-rot);
}

.fw-ico {
    /*
     * Hoehe der beiden Textzeilen: 2 x line-height 1.12. Bewusst OHNE die
     * 5px der roten Dekolinie - die zaehlen zwar zur Blockhoehe, gehoeren
     * aber nicht zum Text. Zusammen mit align-items: center sitzt das Icon
     * dadurch mittig zum gesamten Block einschliesslich Linie.
     *
     * In em, damit es der Schriftgroesse folgt - mobil schrumpft die H2 und
     * das Icon automatisch mit.
     *
     * Bewusst nicht ueber align-items: stretch geloest - ein inline
     * eingebettetes SVG ohne feste Hoehe nimmt im Flex-Container die volle
     * Breite ein und reisst die Headline mit auf.
     *
     * Die Breite folgt dem aspect-ratio, das svgInline() je Icon aus dessen
     * viewBox setzt.
     */
    height: 2.24em;
    width: auto;
    flex: none;
    display: block;

    /*
     * Ausgleich fuer die Dekolinie: deren 5px padding-bottom haengen an der
     * zweiten Textzeile und ziehen die Mitte des Flex-Containers nach unten.
     * Bei align-items: center wird Icon + Margin zentriert, das Icon selbst
     * rutscht dadurch um die halben 5px nach oben - genau auf die optische
     * Mitte der Schrift.
     */
    margin-bottom: 5px;
}

/*
 * Bewusst KEIN pauschales fill: currentColor auf die Kindelemente: die
 * Icons enthalten Hilfspfade mit fill:none (Zeichenflaeche, Clip-Rechteck).
 * Die wuerden mitgefaerbt und das Icon zudecken - bei upload.svg, das ohne
 * Clip-Maske arbeitet, war genau das der Fall. Die Dateifarbe #1d1d1b liegt
 * ohnehin praktisch auf der Textfarbe #1a1a1a.
 */

.fw-h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- Intro */

.fw-spalten {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}

.fw-spalte {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fw-text {
    margin: 0;
    font-size: var(--fw-text-groesse);
    line-height: var(--fw-zeilenhoehe);
    max-width: 48ch;
    text-wrap: pretty;
}

.fw-zwischenzeile {
    margin: 0;
    font-size: var(--fw-text-groesse);
    line-height: var(--fw-zeilenhoehe);
    font-weight: 700;
}

/*
 * Native Liste mit ::marker statt eines eigenen Quadrats. Der Browser setzt
 * den Marker selbst auf die Grundlinie der ersten Zeile - das trifft die
 * optische Mitte zuverlaessiger als ein nachgerechneter margin-top.
 *
 * Bewusst KEIN display: flex auf der Liste: Flex-Items verlieren
 * display: list-item, und damit verschwindet der Marker ganz. Der Abstand
 * zwischen den Punkten kommt deshalb ueber margin statt ueber gap.
 */
.fw-liste {
    /*
     * Kein Innenabstand, dafuer 1em aussen: der Marker steht damit auf der
     * Textkante der Absaetze ueber und unter der Liste, der Listentext
     * rueckt dahinter ein.
     */
    margin: 0 1em;
    padding: 0;
    list-style: square;
}

.fw-liste li {
    font-size: var(--fw-text-groesse);
    line-height: var(--fw-zeilenhoehe);
}

.fw-liste li + li {
    margin-top: 10px;
}

.fw-liste li::marker {
    color: var(--fw-rot);
}

.fw-cta {
    position: relative;
    z-index: 1;
    margin-top: 48px;
}

.fw-jubel {
    position: absolute;
    right: 48px;
    bottom: 0;
    width: 400px;
    max-width: 34%;
    /*
     * Fest auf 4:3, unabhaengig vom Seitenverhaeltnis der Bilddatei.
     * content-box, damit sich die 4:3 auf die Bildflaeche beziehen und nicht
     * auf die Aussenkante inklusive des 8px-Rahmens - sonst waere das Foto
     * selbst 1,35:1.
     */
    box-sizing: content-box;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    /*
     * bottom: 0 setzt die Unterkante auf den Sektionsuebergang, die
     * Verschiebung um die halbe Bildhoehe legt den Mittelpunkt genau darauf -
     * das Bild sitzt also mittig auf der Kante zwischen Intro und Preisen.
     */
    transform: translateY(50%) rotate(10deg);
    border: 8px solid #fff;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
    z-index: 0;
}

/* --------------------------------------------------------------- Buttons */

.fw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fw-schwarz);
    color: #fff;
    border: 0;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* 48px statt 40px: bei 16px Versalien wirkte die Flaeche sonst gedrungen. */
    height: 48px;
    line-height: 1;
    padding: 0 24px;
    cursor: pointer;
}

.fw-button:hover {
    color: var(--fw-gelb);
}

.fw-button--klein {
    flex: none;
    padding: 0 18px;
}

/* ---------------------------------------------------------------- Preise */

.fw-preise {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.fw-preis {
    display: flex;
    flex-direction: column;
    border: 12px solid var(--fw-gelb);
}

.fw-preis__bild {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--fw-bg-formular);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Die Breite setzt das Template je Icon aus dessen viewBox, damit die
 * Zeichnungen ihr Groessenverhaeltnis untereinander behalten.
 */
.fw-preis__bild img {
    /* Breite kommt je Icon aus dem Template (gemeinsamer Massstab). */
    height: auto;
    max-height: 74%;
    padding: 0;
}

.fw-preis__nr {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--fw-gelb);
    font-size: 22px;
    font-weight: 700;
    padding: 6px 16px;
}

.fw-preis__fuss {
    background: var(--fw-bg-kachel);
    padding: 22px 22px 26px;
    flex: 1;
}

.fw-preis__titel {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.fw-preis__text {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
}

/* -------------------------------------------------------------- Formular */

.fw-einleitung {
    margin: 0 0 40px;
    font-size: var(--fw-text-groesse);
    line-height: var(--fw-zeilenhoehe);
    max-width: 60ch;
}

.fw-hinweis {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    padding: 14px 16px;
    background: #fff;
    border-left: 4px solid var(--fw-rot);
    max-width: 880px;
}

.fw-form {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fw-form__feldblock {
    display: flex;
    flex-direction: column;
}

.fw-feld {
    width: 100%;
    background: #fff;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 18px 16px;
    font-size: 16px;
    color: var(--fw-schwarz);
}

.fw-feld:focus {
    border-bottom-color: var(--fw-rot);
    outline: none;
}

.fw-feld--fehler {
    border-bottom-color: var(--fw-rot);
}

.fw-feld--textarea {
    resize: vertical;
    line-height: 1.5;
}

.fw-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fw-zaehler {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--fw-text-meta);
    text-align: right;
}

.fw-fehler {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--fw-rot);
}

/*
 * Honeypot. Bewusst nicht display:none - manche Bots ueberspringen
 * ausgeblendete Felder. So bleibt es im DOM und ausserhalb des Sichtfelds.
 */
.fw-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------- Erfolgsseite */

.fw-erfolg {
    max-width: 880px;
}

.fw-erfolg__balken {
    display: inline-block;
    margin: 0 0 24px;
    background: var(--fw-schwarz);
    color: #fff;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 400;
    padding: 13px 14px 9px;
}

.fw-erfolg__text {
    margin: 0;
    font-size: var(--fw-text-groesse);
    line-height: var(--fw-zeilenhoehe);
    max-width: 60ch;
}

/* ---------------------------------------------------------- Datei-Upload */

.fw-upload {
    margin-top: 18px;
}

.fw-upload__label {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.fw-drop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #fff;
    border: 2px dashed var(--fw-rand-drop);
    padding: 30px 24px;
    cursor: pointer;
}

.fw-drop:hover,
.fw-drop[data-aktiv] {
    border-color: var(--fw-rot);
}

.fw-drop__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fw-drop__zustand {
    font-size: 16px;
    font-weight: 700;
}

.fw-drop__hinweis {
    font-size: 13px;
    color: var(--fw-text-sekundaer);
}

/* Visuell versteckt, aber fuer Tastatur und Screenreader erreichbar */
.fw-datei-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.fw-thumbs {
    margin-top: 16px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
    gap: 12px;
}

.fw-thumb {
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fw-thumb__bild {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #dfe3e6;
    overflow: hidden;
}

.fw-thumb__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fw-thumb__weg {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border: 0;
    background: rgba(26, 26, 26, 0.85);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.fw-thumb__weg:hover {
    color: var(--fw-gelb);
}

.fw-thumb__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fw-thumb__name {
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-thumb__groesse {
    font-size: 11px;
    color: var(--fw-text-meta);
}

/* ------------------------------------------------------------ Checkboxen */

.fw-checkboxen {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fw-checkbox {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    align-items: start;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
}

.fw-checkbox input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--fw-rot);
}

.fw-checkbox--fehler > span {
    color: var(--fw-rot);
}

.fw-checkbox a {
    text-decoration: underline;
}

.fw-meta {
    margin: 26px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fw-text-sekundaer);
    font-variant-numeric: lining-nums tabular-nums;
}

.fw-absenden {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.fw-absenden .fw-meta {
    margin: 0;
}

/* ---------------------------------------------------------------- Footer */

.fw-footer {
    background: #fff;
}

.fw-footer__inner {
    max-width: calc(var(--fw-breite) + 2 * var(--fw-pad-sektion));
    margin: 0 auto;
    color: var(--fw-text-sekundaer);
    padding: 34px var(--fw-pad-sektion);
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.fw-footer a {
    color: var(--fw-schwarz);
    text-decoration: none;
}

.fw-footer a:hover {
    color: var(--fw-rot);
}

.fw-footer__links {
    display: flex;
    gap: 28px;
}

/* ----------------------------------------------------------- Animationen */

@keyframes fw-prizeIn {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: none; }
}

/* Die Headline-Icons stehen bewusst ruhig - keine Animation. */

[data-prize] {
    opacity: 0;
}

[data-prize][data-in="1"] {
    animation: fw-prizeIn 1s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-prize] {
        opacity: 1;
    }

    [data-prize][data-in="1"] {
        animation: none;
    }
}

/* ----------------------------------------------------------------- Mobil */

@media (max-width: 780px) {
    /*
     * Ein Wert fuer beide Bereiche - unter dem Breakpoint liegen Topbar und
     * Sektionen auf demselben Rand, und Hero-Copy sowie das randlose
     * Dekobild rechnen darueber automatisch mit.
     */
    :root {
        --fw-pad-sektion: 20px;
        --fw-kopf-hoehe: 50px;
        --fw-logo-breite: 76px;
        --fw-text-groesse: 16px;
        --fw-balken-hoehe: 27px;
        --fw-sub-hoehe: 27px;
        --fw-hero-schrift: 21px;
    }

    .fw-hero {
        height: auto;
        aspect-ratio: 3 / 4;
    }

    /*
     * Mobil oben links statt mittig: der Abstand nach oben entspricht dem
     * seitlichen Rand, das Textfeld sitzt damit in der Ecke des Bildes.
     */
    /* Bei 27px Balkenhoehe wuerden -7px die Balken zu stark ueberlappen. */
    .fw-hero__balken:nth-of-type(2) {
        margin-top: -3px;
    }

    .fw-hero__copy {
        left: var(--fw-pad-sektion);
        right: var(--fw-pad-sektion);
        top: var(--fw-pad-sektion);
        bottom: auto;
        transform: none;
    }

    .fw-sektion {
        padding: 48px var(--fw-pad-sektion) 52px;
        /* Flex-Spalte, damit das Dekobild per order ans Ende rutschen kann */
        display: flex;
        flex-direction: column;
    }

    .fw-sektion--intro,
    .fw-band--formular .fw-sektion {
        padding-bottom: 52px;
    }

    .fw-h2 {
        font-size: 26px;
    }

    .fw-spalten,
    .fw-preise {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .fw-paar {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .fw-preise h3 {
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .fw-thumbs {
        grid-template-columns: 1fr 1fr;
    }

    .fw-drop {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 24px 20px;
    }

    /* Randlos ueber die volle Breite, ohne Rotation, Rand und Schatten */
    .fw-jubel {
        order: 99;
        position: static;
        width: auto;
        max-width: none;
        align-self: stretch;
        margin: 44px calc(-1 * var(--fw-pad-sektion)) -52px;
        transform: none;
        border: 0;
        box-shadow: none;
    }

    .fw-footer__inner {
        padding: 26px var(--fw-pad-sektion);
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}