/* Farben/Schrift über die Variablen an das Website-Design anpassen. */
:root {
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text: #1f2933;
    --muted: #616e7c;
    --border: #cbd2d9;
    --accent: rgb(25, 100, 126);   /* Button-Text/-Rahmen, Fokus, Checkbox */
    --accent-text: #ffffff;        /* Button-Text beim Hover (gefüllt) */
    --error: #c62828;
    --radius: 6px;
    --control-height: 46px;
    --label-space: 28px; /* Zeilenhöhe Label (24px) + Abstand (4px) */
    --input-bg: #ffffff;
    --input-text: #1f2933;
    /*
     * Muss zum color-scheme des <iframe>-Elements passen (im Snippet ebenfalls "light").
     * Weichen beide ab, zeichnen Browser einen deckenden Hintergrund statt Transparenz.
     */
    color-scheme: light;
}

/*
 * Dunkle Variante für dunkle Hintergründe (?style=dark).
 * color-scheme bleibt bewusst "light" (siehe oben) – die Farben werden nur über Variablen gesetzt.
 */
:root[data-theme="dark"] {
    --text: #f5f7fa;
    --muted: #c3cad3;
    --border: rgba(255, 255, 255, 0.35);
    --accent: #ffffff;
    --accent-text: rgb(25, 100, 126);
    --error: #ff9b94;
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-text: #f5f7fa;
}

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

/* Hintergrund immer transparent – die einbettende Seite bestimmt ihn. */
html, body {
    margin: 0;
    background: transparent !important;
    font: 16px/1.5 var(--font);
    color: var(--text);
}

/*
 * Layout richtet sich nach der Breite des iframes:
 *   < 640px   alles untereinander
 *   ≥ 640px   Name | Telefon, darunter Nachricht und Button
 *   ≥ 960px   Name | Telefon | Nachricht | Button in einer Zeile
 */
form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
    max-width: 1200px;
    padding: 4px;
}
.success { padding: 4px; }

.notice, .f-privacy { grid-column: 1 / -1; }

@media (min-width: 640px) {
    form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .f-message, .f-submit { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
    form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; }
    .f-message, .f-submit { grid-column: auto; }
    .f-submit { padding-top: var(--label-space); }
    .f-privacy { order: 1; } /* Hinweis unter die Eingabezeile */
}

.field { margin: 0; min-width: 0; }
fieldset.field { border: 0; padding: 0; }

label, legend { display: block; font-weight: 600; margin-bottom: 4px; padding: 0; }

input[type="text"], input[type="tel"], textarea {
    width: 100%;
    height: var(--control-height);
    padding: 10px 12px;
    font: inherit;
    color: var(--input-text);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
input:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

textarea {
    display: block;
    height: auto;
    min-height: var(--control-height);
    resize: vertical;
    field-sizing: content; /* wächst mit dem Inhalt (Chromium); sonst per rows/resize */
    max-height: 240px;
}
.optional { font-weight: 400; color: var(--muted); }

.has-error input, .has-error textarea { border-color: var(--error); }
.error, .notice { color: var(--error); margin: 4px 0 0; font-size: 14px; }
.notice { margin: 0; }

.privacy { color: var(--muted); font-size: 13px; margin: 0; }
.privacy a { color: inherit; }

/* Outline-Button: transparent, Text und Rahmen in Akzentfarbe; beim Hover gefüllt. */
button {
    height: var(--control-height);
    padding: 0 24px;
    font: inherit;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}
button:hover, button:active {
    color: var(--accent-text);
    background: var(--accent);
}

.success-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.success p { margin-top: 0; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }