/* ==========================================================================
   Otto Translate – Anpassung des TYPO3-Themes "Camino" (TYPO3 14.3)
   Farben „Hellblau edel“ (Nachtblau, Hellblau, Oranje), Schriften und Formen aus dem Brand-Kit.

   Ablage:   fileadmin/otto-translate/css/custom.css
   Schriften: fileadmin/otto-translate/fonts/   (Pfade unten relativ)
   Einbinden per TypoScript (Setup):
             page.includeCSS.ottoTranslate = fileadmin/otto-translate/css/custom.css

   Die Selektoren sind absichtlich etwas "stärker" als die von Camino
   (html:root, body[class]), damit diese Datei gewinnt – egal, ob sie vor
   oder nach Caminos main.css geladen wird.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Schriften – lokal eingebunden (DSGVO-konform, kein Google-Server)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Markenfarben und Camino-Variablen
   -------------------------------------------------------------------------- */

html:root,
body[class] {
    /* Brand-Kit „Hellblau edel“ (zum Wiederverwenden in eigenen Regeln) */
    --ot-paper: #fbf8f3;           /* Papier: Seitenhintergrund */
    --ot-ink: #141b2e;             /* Tinte: Fließtext */
    --ot-ink-muted: #46576c;
    --ot-blau: #7fa3d1;            /* Hellblau: Flächen, Grafik – nie als Textfarbe auf Hell */
    --ot-blau-tief: #1e3557;       /* Nachtblau: Kopfzeile, Footer, Links, Buttons */
    --ot-blau-zart: #e8eff8;       /* zarte Flächen, Hero */
    --ot-oranje: #ff8c42;          /* Oranje: "Angebot anfragen", Karo-Band – nie als Textfarbe */
    --ot-oranje-zart: #ffeedd;
    --ot-rot: #cf2534;             /* selten: nur Aufzählungspunkte und Trennstriche */
    --ot-line-strong: #8a9ab0;

    /* Camino: Hauptfarbe (Kopfzeile, Footer, Primär-Button, Links) */
    --color-primary-100: var(--ot-blau-tief);
    /* Camino: Akzentfarbe (Button "Soft" = Angebot anfragen, Footer-Linie) */
    --color-primary-75: var(--ot-oranje);

    /* Camino: Neutral-Skala, kühl-blau statt Caminos Braun */
    --color-neutral-0: #ffffff;
    --color-neutral-10: var(--ot-blau-zart);     /* Hero, farbige Abschnitte */
    --color-neutral-20: #d6e1ef;
    --color-neutral-30: #b8c7da;
    --color-neutral-40: #9aaec6;
    --color-neutral-50: #8094b0;
    --color-neutral-60: #5f7594;
    --color-neutral-70: #46576c;                 /* Hover-Farbe */
    --color-neutral-80: var(--ot-blau-tief);     /* dunkle Abschnitte */
    --color-neutral-90: var(--ot-ink);           /* Fließtext */

    /* Schriften */
    --headline-family: "Fraunces", Georgia, "Times New Roman", serif;
    --headline-weight: 600;
    --headline-letter-spacing: -0.01em;
    --subline-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --title-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --label-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --body-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Lesbarkeit: Fließtext 17px, Zeilenhöhe großzügig */
    --body-medium-size: 17px;
    --body-line-height: 1.65;

    /* Formen: die Marke ist kantig – Ecken nur leicht gebrochen */
    --corners-s: 4px;
    --corners-m: 8px;
    --corners-l: 12px;
}

/* Seitenhintergrund: warmes Papierweiß statt reinem Weiß */
body[class] {
    --background-color: var(--ot-paper);
    background-color: var(--ot-paper);
}


/* --------------------------------------------------------------------------
   3. Typografie-Details
   -------------------------------------------------------------------------- */

/* Kursive Hervorhebung in Überschriften (im Editor ein Wort kursiv setzen) → Nachtblau */
h1 em, h2 em, h3 em,
.headline em, .headline i {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--headline-accent-color, var(--ot-blau-tief));
}

/* Auf dunklen Flächen Hellblau statt Nachtblau, sonst nicht lesbar */
[class*='--bg-80'],
[class*='--bg-100'] {
    --headline-accent-color: var(--ot-blau);
}

/* Links im Fließtext unterstreichen (Barrierefreiheit) */
p a:not(.button),
li a:not(.button) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Tastatur-Fokus: klar sichtbar in Nachtblau */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ot-blau-tief);
    outline-offset: 2px;
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   4. Buttons
   "Primary"  = Nachtblau       (Hauptaktion)
   "Soft"     = Oranje          (nur für "Angebot anfragen")
   "Secondary"= nachtblauer Rahmen
   -------------------------------------------------------------------------- */

body[class] {
    --button-soft-content-color: var(--ot-ink);          /* dunkle Schrift auf Oranje (7,4:1) */
    --button-soft-color-hover: var(--ot-blau-tief);
    --button-soft-border-color-hover: var(--ot-blau-tief);
    --button-soft-content-color-hover: #ffffff;
    --button-soft-color-pressed: var(--ot-blau-tief);
    --button-soft-border-color-pressed: var(--ot-blau-tief);
    --button-soft-content-color-pressed: #ffffff;
}

.button {
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   5. Formulare (Form Framework, z. B. "Angebot anfragen")
   -------------------------------------------------------------------------- */

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="date"],
form input[type="number"],
form select,
form textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: none;   /* Camino begrenzt Textfelder sonst auf 500px */
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--ot-line-strong);
    border-radius: var(--corners-s);
    background: #ffffff;
    color: var(--ot-ink);
    font: inherit;
    font-size: 16px;
}

form textarea {
    min-height: 160px;
}

form label,
form .form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 15px;
}

/* Beschriftung von Checkboxen (z. B. Datenschutz) normal statt fett */
form label:has(input[type="checkbox"]),
form label:has(input[type="radio"]) {
    font-weight: 400;
}

form label input[type="checkbox"],
form label input[type="radio"] {
    margin: 0 8px 0 0;
    vertical-align: -4px;
}

form .form-group,
form .mb-3 {
    margin-bottom: 20px;
}

form input[type="checkbox"],
form input[type="radio"] {
    accent-color: var(--ot-blau-tief);
    width: 20px;
    height: 20px;
}

/* Grid-Zeilen im Formular (z. B. Name und Firma nebeneinander).
   Camino lädt kein Bootstrap, daher hier ein eigenes Raster:
   Felder einer Grid-Zeile stehen nebeneinander, auf dem Handy untereinander. */
form .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 24px;
}

form .row > [class*="col"] {
    min-width: 0;
}

/* Absende-Button des Formulars wie der Oranje-Button */
form button[type="submit"],
form .btn-primary {
    min-height: 48px;
    padding: 10px 24px;
    border: 2px solid var(--ot-oranje);
    border-radius: var(--corners-l);
    background: var(--ot-oranje);
    color: var(--ot-ink);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    cursor: pointer;
}

form button[type="submit"]:hover,
form .btn-primary:hover {
    background: var(--ot-blau-tief);
    border-color: var(--ot-blau-tief);
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   6. Grafik-Elemente aus dem Brand-Kit (optional)
   -------------------------------------------------------------------------- */

/* Karo-Band über dem Footer in Oranje */
.component--page-footer {
    position: relative;
}

.component--page-footer::before {
    --ot-karo-abstand: 40px;   /* Abstand zwischen Inhalt und Karo-Band – bei Bedarf anpassen */
    content: "";
    display: block;
    height: calc(var(--ot-karo-abstand) + 48px);   /* Abstand + 2 Reihen Karos à 24px */
    margin: calc(-1 * var(--component-padding-vertical, 16px)) calc(-1 * var(--component-padding-horizontal, 16px)) var(--component-padding-vertical, 16px);
    background-color: var(--ot-paper);
    background-image: conic-gradient(var(--ot-oranje) 25%, transparent 0 50%, var(--ot-oranje) 0 75%, transparent 0);
    background-size: 48px 48px;      /* ergibt 24px große Karos */
    background-repeat: repeat-x;
    background-position: left bottom;
}

/* Flaggenrot – nur für Aufzählungspunkte und Trennstriche */
main li::marker {
    color: var(--ot-rot);
}

hr {
    border: 0;
    border-top: 2px solid var(--ot-rot);
}

/* Doppelpfeil als Aufzählungszeichen: Klasse "ot-pfeil-liste" an einer Liste (im RTE: Stil wählen) */
ul.ot-pfeil-liste {
    list-style: none;
    padding-left: 0;
}

ul.ot-pfeil-liste li {
    position: relative;
    padding-left: 32px;
}

ul.ot-pfeil-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 20px;
    height: 15px;
    background: url('../img/doppelpfeil.svg') no-repeat center / contain;
}


/* --------------------------------------------------------------------------
   7. Responsive Überschriftengrößen (wie Camino, etwas ruhiger)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    html:root,
    body[class] {
        --headline-large-size: 60px;
        --headline-medium-size: 44px;
        --headline-small-size: 36px;
    }
}