/* =====================================================================================
 * Hörner eBusiness - Startseite und Rechtsseiten
 * =====================================================================================
 *
 * Die Seite zeigt seit 09/2026 keine Beratungsleistungen mehr, sondern ausschliesslich
 * die eigenen laufenden Projekte mit Weg zu Anmeldung und Registrierung.
 *
 * Optik: dieselbe Sprache wie schule.hoerner-ebusiness.de und stillhalter-tracker.de -
 * Token in blossen HSL-Komponenten (shadcn-Schreibweise), damit sie sich mit Transparenz
 * verwenden lassen: hsl(var(--vordergrund) / 0.6). Hausfarben bleiben Navy und Gold.
 *
 * WICHTIG - BEWEGUNG:
 * Sichtbarkeit haengt NIE an JavaScript und nie an der Scrollposition (siehe die bittere
 * Lehre aus 09/2026: in echtem Safari blieben ganze Abschnitte leer). Jede Animation laeuft
 * beim Laden, der Grundzustand jedes Elements ist sichtbar. Kein backdrop-filter, kein
 * perspective/preserve-3d, kein will-change. JS macht hier nur: Thema umschalten, Karten
 * filtern, Zahlen hochzaehlen - faellt es aus, ist trotzdem alles zu sehen.
 *
 * ACHTUNG: nginx cacht /static/ 30 Tage. Diese Datei wird ueber static_v() mit ?v=<mtime>
 * eingebunden, das erledigt das Cache-Busting von allein.
 *
 * AUFBAU
 *   1. Token         5. Hero           9. Kontakt
 *   2. Grundlagen    6. Kennzahlen    10. Fusszeile
 *   3. Buttons       7. Projekte      11. Bewegung
 *   4. Kopfleiste    8. Text-Bloecke  12. Rechtsseiten
 * ===================================================================================== */


/* =====================================================================================
 * 1. TOKEN
 * ===================================================================================== */

:root,
[data-thema="hell"] {
    --grund: 0 0% 100%;
    --band: 210 30% 97%;
    --flaeche: 0 0% 100%;
    --vordergrund: 212 45% 12%;
    --leise: 212 14% 42%;
    --linie: 212 20% 88%;
    --marke: 209 56% 23%;          /* Navy #1a3a5c */
    --marke-kontrast: 0 0% 100%;
    --gold: 39 79% 44%;            /* Gold, im Hellmodus abgedunkelt fuer lesbaren Text */
    --gold-flaeche: 39 79% 56%;    /* #e8a838 - nur als Flaeche, nie als Text auf Weiss */
    --gold-kontrast: 209 56% 18%;
    --gut: 152 60% 30%;
    --schlecht: 0 72% 42%;
    --radius: 14px;
    --schatten-s: 0 1px 2px hsl(var(--vordergrund) / 0.06), 0 1px 3px hsl(var(--vordergrund) / 0.05);
    --schatten-m: 0 10px 30px -12px hsl(var(--marke) / 0.25);
    --schatten-l: 0 24px 60px -20px hsl(var(--marke) / 0.35);
}

[data-thema="dunkel"] {
    --grund: 212 40% 7%;
    --band: 212 38% 10%;
    --flaeche: 212 34% 12%;
    --vordergrund: 210 30% 96%;
    --leise: 211 16% 68%;
    --linie: 212 24% 22%;
    --marke: 205 70% 62%;
    --marke-kontrast: 212 45% 10%;
    --gold: 39 82% 62%;
    --gold-flaeche: 39 79% 56%;
    --gold-kontrast: 209 56% 14%;
    --gut: 152 50% 52%;
    --schlecht: 0 72% 66%;
    --schatten-s: 0 1px 2px hsl(0 0% 0% / 0.4);
    --schatten-m: 0 10px 30px -12px hsl(0 0% 0% / 0.6);
    --schatten-l: 0 24px 60px -20px hsl(0 0% 0% / 0.7);
}


/* =====================================================================================
 * 2. GRUNDLAGEN
 * ===================================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Die Kopfleiste steht fest - Sprungziele duerfen nicht darunter verschwinden. */
    scroll-padding-top: 88px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: hsl(var(--grund));
    color: hsl(var(--vordergrund));
    line-height: 1.65;
    font-size: 16.5px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.022em; font-weight: 700; }

a { color: hsl(var(--marke)); }

::selection { background: hsl(var(--gold-flaeche) / 0.35); }

.huelle { width: min(1140px, 100% - 40px); margin-inline: auto; }

section { padding: 88px 0; }

.band { background: hsl(var(--band)); border-block: 1px solid hsl(var(--linie)); }

.augenbraue {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: hsl(var(--marke));
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid hsl(var(--marke) / 0.25);
    background: hsl(var(--marke) / 0.07);
}

.abschnitt-kopf { max-width: 720px; margin-bottom: 44px; }
.abschnitt-kopf h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 18px 0 14px; }
.abschnitt-kopf p { color: hsl(var(--leise)); font-size: 1.06rem; }
.mitte { margin-inline: auto; text-align: center; }


/* =====================================================================================
 * 3. BUTTONS
 * ===================================================================================== */

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
    font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }
.knopf:focus-visible { outline: 2px solid hsl(var(--marke)); outline-offset: 2px; }

.knopf-voll {
    background: hsl(var(--marke)); color: hsl(var(--marke-kontrast));
    box-shadow: var(--schatten-m);
}
.knopf-voll:hover { background: hsl(var(--marke) / 0.9); }

.knopf-gold {
    background: hsl(var(--gold-flaeche)); color: hsl(var(--gold-kontrast));
    box-shadow: var(--schatten-m);
}
.knopf-gold:hover { background: hsl(var(--gold-flaeche) / 0.88); }

.knopf-rand {
    border-color: hsl(var(--linie)); color: hsl(var(--vordergrund));
    background: hsl(var(--flaeche));
}
.knopf-rand:hover { border-color: hsl(var(--marke) / 0.5); background: hsl(var(--marke) / 0.06); }

.knopf-klein { padding: 9px 16px; font-size: 0.88rem; }
.knopf-gross { padding: 15px 28px; font-size: 1rem; }
.knopf svg { flex-shrink: 0; }


/* =====================================================================================
 * 4. KOPFLEISTE
 * ===================================================================================== */

.kopf {
    position: sticky; top: 0; z-index: 50;
    background: hsl(var(--grund) / 0.96);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kopf.gescrollt { border-bottom-color: hsl(var(--linie)); box-shadow: var(--schatten-s); }

.kopf-innen {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 0; min-height: 68px;
}

.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marke-name { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; }
.marke-zusatz { display: block; font-size: 0.72rem; font-weight: 500; color: hsl(var(--leise)); letter-spacing: 0.02em; }

.kopf-menue { display: none; gap: 26px; margin-left: 14px; }
.kopf-menue a {
    color: hsl(var(--leise)); text-decoration: none; font-size: 0.93rem; font-weight: 500;
    position: relative; padding: 4px 0;
}
.kopf-menue a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
    background: hsl(var(--gold-flaeche)); border-radius: 2px; transition: right 0.22s ease;
}
.kopf-menue a:hover { color: hsl(var(--vordergrund)); }
.kopf-menue a:hover::after { right: 0; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.thema-knopf {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid hsl(var(--linie)); background: hsl(var(--flaeche));
    color: hsl(var(--vordergrund)); cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.thema-knopf:hover { border-color: hsl(var(--marke) / 0.5); background: hsl(var(--marke) / 0.06); }
.thema-knopf:focus-visible { outline: 2px solid hsl(var(--marke)); outline-offset: 2px; }
/* Sonne im Dunkelmodus, Mond im Hellmodus - je nach Thema wird eines der beiden Symbole
   ausgeblendet. Das ist reine Dekoration, kein Inhalt. */
[data-thema="dunkel"] .symbol-mond { display: none; }
:root:not([data-thema="dunkel"]) .symbol-sonne { display: none; }

@media (min-width: 900px) {
    .kopf-menue { display: flex; }
}

/* Handy: die Kopfzeile muss in eine Zeile passen - sonst bricht der Firmenname um und
   die Leiste wird dreizeilig. */
@media (max-width: 560px) {
    .marke-zusatz { display: none; }
    .marke-name { font-size: 0.98rem; white-space: nowrap; }
    .marke svg { width: 32px; height: 32px; }
    .kopf-innen { gap: 10px; min-height: 60px; }
    .kopf-rechts .knopf { padding: 9px 13px; }
}


/* =====================================================================================
 * 5. HERO
 * ===================================================================================== */

.hero { position: relative; padding: 72px 0 84px; overflow: hidden; }

/* Zwei weiche Farbschleier, die sich langsam bewegen. Reine Dekoration hinter dem Text,
   deshalb aria-hidden und pointer-events:none. Kein Filter auf dem Inhalt selbst. */
.hero-schleier { position: absolute; inset: -20% -10% auto; height: 620px; pointer-events: none; z-index: 0; }
.hero-schleier span {
    position: absolute; display: block; border-radius: 50%;
    filter: blur(90px); opacity: 0.5;
}
.hero-schleier .s1 {
    width: 520px; height: 520px; left: 4%; top: 6%;
    background: hsl(var(--marke) / 0.55);
    animation: schweben1 22s ease-in-out infinite;
}
.hero-schleier .s2 {
    width: 440px; height: 440px; right: 6%; top: 0;
    background: hsl(var(--gold-flaeche) / 0.5);
    animation: schweben2 26s ease-in-out infinite;
}
[data-thema="dunkel"] .hero-schleier span { opacity: 0.38; }

@keyframes schweben1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(60px, 40px, 0) scale(1.12); }
}
@keyframes schweben2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
    50%      { transform: translate3d(-70px, 50px, 0) scale(0.95); }
}

.hero-innen { position: relative; z-index: 1; max-width: 880px; }
.hero h1 {
    font-size: clamp(2.3rem, 6.2vw, 4rem);
    margin: 22px 0 20px;
}
.hero h1 .gold {
    background: linear-gradient(100deg, hsl(var(--gold-flaeche)) 0%, hsl(var(--gold)) 55%, hsl(28 70% 38%) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: hsl(var(--gold));
}
.hero .lauf { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: hsl(var(--leise)); max-width: 640px; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

@media (max-width: 560px) {
    .hero { padding: 48px 0 64px; }
    section { padding: 64px 0; }
    .hero-knoepfe { flex-direction: column; align-items: stretch; }
    .hero-knoepfe .knopf { width: 100%; }
}


/* =====================================================================================
 * 6. KENNZAHLEN
 * ===================================================================================== */

.zahlen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
    margin-top: 56px; position: relative; z-index: 1;
    background: hsl(var(--linie)); border: 1px solid hsl(var(--linie));
    border-radius: var(--radius); overflow: hidden;
}
.zahl { background: hsl(var(--flaeche)); padding: 22px 24px; }
.zahl b { display: block; font-size: 2rem; letter-spacing: -0.03em; line-height: 1.1; }
.zahl span { font-size: 0.86rem; color: hsl(var(--leise)); }


/* =====================================================================================
 * 7. PROJEKTE
 * ===================================================================================== */

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filter button {
    font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid hsl(var(--linie)); background: hsl(var(--flaeche));
    color: hsl(var(--leise)); transition: all 0.15s ease;
}
.filter button:hover { color: hsl(var(--vordergrund)); border-color: hsl(var(--marke) / 0.45); }
.filter button[aria-pressed="true"] {
    background: hsl(var(--marke)); border-color: hsl(var(--marke)); color: hsl(var(--marke-kontrast));
}
.filter button:focus-visible { outline: 2px solid hsl(var(--marke)); outline-offset: 2px; }

.projekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; }

/* Der Filter blendet per hidden-Attribut aus; display:flex unten wuerde es sonst ueberstimmen. */
.projekt[hidden] { display: none; }
.projekt {
    display: flex; flex-direction: column; position: relative; overflow: hidden;
    background: hsl(var(--flaeche));
    border: 1px solid hsl(var(--linie));
    border-radius: var(--radius);
    padding: 26px 26px 22px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Der Lichtstreifen oben wird beim Ueberfahren sichtbar - Dekoration auf einem
   Pseudo-Element, der Karteninhalt bleibt davon unberuehrt. */
.projekt::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 3px;
    background: linear-gradient(90deg, hsl(var(--gold-flaeche)), hsl(var(--marke)));
    opacity: 0; transition: opacity 0.2s ease;
}
.projekt:hover { transform: translateY(-4px); border-color: hsl(var(--marke) / 0.4); box-shadow: var(--schatten-l); }
.projekt:hover::before { opacity: 1; }

.projekt-kopf { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.projekt-symbol {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.35rem;
    background: hsl(var(--marke) / 0.1); color: hsl(var(--marke));
}
.projekt h3 { font-size: 1.16rem; }
.projekt-domain { font-size: 0.8rem; line-height: 1.3; color: hsl(var(--leise)); overflow-wrap: anywhere; }

.merker {
    display: inline-block; margin-left: auto; flex-shrink: 0;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
    background: hsl(var(--gut) / 0.13); color: hsl(var(--gut));
    border: 1px solid hsl(var(--gut) / 0.25);
}
.merker.ruhig { background: hsl(var(--leise) / 0.12); color: hsl(var(--leise)); border-color: hsl(var(--leise) / 0.25); }

@media (max-width: 560px) {
    /* Auf schmalen Karten drueckt ein langer Merker die Ueberschrift sonst in drei Zeilen. */
    .merker { font-size: 0.63rem; padding: 4px 8px; }
}

.projekt-text { color: hsl(var(--leise)); font-size: 0.96rem; }

.punkte { list-style: none; margin: 16px 0 0; display: grid; gap: 7px; }
.punkte li { position: relative; padding-left: 24px; font-size: 0.9rem; color: hsl(var(--leise)); }
.punkte li::before {
    content: ''; position: absolute; left: 6px; top: 0.6em;
    width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--gold-flaeche));
}

.preis {
    margin-top: 18px; padding-top: 16px; border-top: 1px dashed hsl(var(--linie));
    font-size: 0.88rem; color: hsl(var(--leise));
}
.preis b { color: hsl(var(--vordergrund)); font-weight: 600; }

.projekt-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.projekt-knoepfe .knopf { flex: 1 1 auto; }

.projekt-link {
    margin-top: 12px; font-size: 0.85rem; font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    color: hsl(var(--leise));
}
.projekt-link:hover { color: hsl(var(--marke)); }
.projekt-link span { transition: transform 0.15s ease; }
.projekt-link:hover span { transform: translateX(3px); }

/* Die Karte waechst bis zum Boden, damit die Knopfreihen in einer Zeile stehen. */
.projekt-fuss { margin-top: auto; }


/* =====================================================================================
 * 8. TEXT-BLOECKE
 * ===================================================================================== */

.dreier { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.notiz {
    background: hsl(var(--flaeche)); border: 1px solid hsl(var(--linie));
    border-radius: var(--radius); padding: 26px;
}
.notiz .symbol {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    background: hsl(var(--gold-flaeche) / 0.16); color: hsl(var(--gold)); margin-bottom: 14px;
}
.notiz h3 { font-size: 1.05rem; margin-bottom: 8px; }
.notiz p { color: hsl(var(--leise)); font-size: 0.94rem; }

.weitere { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.weitere a {
    display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
    background: hsl(var(--flaeche)); border: 1px solid hsl(var(--linie));
    border-radius: var(--radius); padding: 18px 20px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.weitere a:hover { border-color: hsl(var(--marke) / 0.45); transform: translateY(-2px); }
.weitere strong { display: block; font-size: 0.99rem; }
.weitere span { font-size: 0.84rem; color: hsl(var(--leise)); }


/* =====================================================================================
 * 9. KONTAKT
 * ===================================================================================== */

.kontakt-karte {
    background: linear-gradient(135deg, hsl(var(--marke)) 0%, hsl(var(--marke) / 0.82) 100%);
    color: hsl(var(--marke-kontrast));
    border-radius: 20px; padding: clamp(30px, 5vw, 56px);
    display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
    box-shadow: var(--schatten-l);
}
.kontakt-karte h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-bottom: 10px; }
.kontakt-karte p { color: hsl(var(--marke-kontrast) / 0.82); max-width: 520px; }
.kontakt-karte .knopf-gold { box-shadow: none; }
.kontakt-text { flex: 1 1 340px; }


/* =====================================================================================
 * 10. FUSSZEILE
 * ===================================================================================== */

.fuss { border-top: 1px solid hsl(var(--linie)); padding: 40px 0; background: hsl(var(--band)); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.fuss p { font-size: 0.87rem; color: hsl(var(--leise)); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 18px; }
.fuss nav a { font-size: 0.87rem; color: hsl(var(--leise)); text-decoration: none; }
.fuss nav a:hover { color: hsl(var(--marke)); text-decoration: underline; }


/* =====================================================================================
 * 11. BEWEGUNG
 * Alles laeuft beim Laden. Der Grundzustand ist sichtbar - faellt die Animation aus,
 * steht der Inhalt trotzdem da. Kein Scroll-Reveal, siehe Kopf dieser Datei.
 * ===================================================================================== */

.auf { animation: auf 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.auf-1 { animation-delay: 0.06s; }
.auf-2 { animation-delay: 0.12s; }
.auf-3 { animation-delay: 0.18s; }
.auf-4 { animation-delay: 0.24s; }
.auf-5 { animation-delay: 0.30s; }

@keyframes auf {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .auf { animation: none; }
    .hero-schleier span { animation: none; }
    .knopf:hover, .projekt:hover, .weitere a:hover { transform: none; }
}


/* =====================================================================================
 * 12. RECHTSSEITEN
 * ===================================================================================== */

.recht { max-width: 46rem; margin: 0 auto; padding: 56px 0 90px; }
.recht h1 { font-size: 1.9rem; margin-bottom: 6px; }
.recht .stand { color: hsl(var(--leise)); font-size: 0.85rem; margin-bottom: 34px; }
.recht h2 { font-size: 1.22rem; margin: 34px 0 12px; }
.recht h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.recht p, .recht li { color: hsl(var(--leise)); font-size: 0.96rem; margin-bottom: 10px; }
.recht ul, .recht ol { padding-left: 22px; margin-bottom: 14px; }
.recht strong { color: hsl(var(--vordergrund)); }
.recht table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 0.92rem; }
.recht th, .recht td { border: 1px solid hsl(var(--linie)); padding: 8px 10px; text-align: left; }


/* =====================================================================================
 * 13. KONTAKTFORMULAR
 * Auf der Startseite liegt es als helle Flaeche in der farbigen Kontaktkarte, unter
 * /kontakt steht es allein auf der Seite.
 * ===================================================================================== */

.kontakt-punkte { list-style: none; margin-top: 16px; display: grid; gap: 6px; }
.kontakt-punkte li {
    position: relative; padding-left: 22px; font-size: 0.9rem;
    color: hsl(var(--marke-kontrast) / 0.78);
}
.kontakt-punkte li::before {
    content: ''; position: absolute; left: 4px; top: 0.6em;
    width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--gold-flaeche));
}

.kontakt-formular { flex: 1 1 420px; }

/* Die Kontaktkarte faerbt ihren Text hell (`.kontakt-karte p`). Das Formular liegt
   darin auf heller Flaeche - hier muss die Schriftfarbe zurueckgesetzt werden, sonst
   steht weisser Text auf Weiss. Die Auswahl ist bewusst so spezifisch wie die Regel
   der Karte. */
.kontakt-karte .kontakt-formular { color: hsl(var(--vordergrund)); }
.kontakt-karte .formular-hinweis { color: hsl(var(--leise)); }
.kontakt-karte .formular-fehler { color: hsl(var(--schlecht)); }

.formular-flaeche,
.kontakt-formular .formular {
    background: hsl(var(--flaeche));
    border: 1px solid hsl(var(--linie));
    border-radius: var(--radius);
    padding: 24px;
}
.formular-flaeche { margin-top: 24px; }
.formular-flaeche .formular { border: 0; padding: 0; background: none; }

.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

.feld { display: block; margin-bottom: 14px; }
.feld > span {
    display: block; margin-bottom: 6px;
    font-size: 0.85rem; font-weight: 600; color: hsl(var(--vordergrund));
}
.feld input,
.feld textarea {
    width: 100%; font: inherit; font-size: 0.95rem;
    color: hsl(var(--vordergrund)); background: hsl(var(--grund));
    border: 1px solid hsl(var(--linie)); border-radius: 10px;
    padding: 11px 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.feld textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.feld input:focus,
.feld textarea:focus {
    outline: none;
    border-color: hsl(var(--marke) / 0.65);
    box-shadow: 0 0 0 3px hsl(var(--marke) / 0.15);
}
.feld input::placeholder,
.feld textarea::placeholder { color: hsl(var(--leise) / 0.75); }

/* Der Honigtopf muss fuer Menschen unerreichbar sein, fuer Skripte aber wie ein
   normales Feld aussehen - deshalb aus dem Bild geschoben statt display:none. */
.honigtopf {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.formular-hinweis { font-size: 0.82rem; color: hsl(var(--leise)); margin: 14px 0 18px; }

.formular-fehler {
    margin-bottom: 16px; padding: 12px 14px; border-radius: 10px;
    font-size: 0.9rem;
    background: hsl(var(--schlecht) / 0.1);
    border: 1px solid hsl(var(--schlecht) / 0.35);
    color: hsl(var(--schlecht));
}

.formular button { width: 100%; }

/* Das Turnstile-Fenster bringt eine feste Breite mit; auf schmalen Karten darf es
   nicht ueberstehen. */
.cf-turnstile { margin: 4px 0 6px; max-width: 100%; overflow: hidden; }

@media (min-width: 620px) {
    .formular button { width: auto; }
}