/*
Theme Name: Marelo
Theme URI: https://marelo.at
Author: Marelo — Patrik Loidl
Description: Child-Theme mit dem Marelo Design System: Farben, Schriften, Abstände und 30 UI-Bausteine. Ecken immer eckig, keine Schatten, keine Animationen. Dokumentation: marelo-dokumentation-v2.0.0.html
Template: twentytwentyfive
Version: 2.1.0
Text Domain: marelo
*/

/* ── Harte Regeln des Systems, die theme.json nicht global setzen kann ── */

/* 1. Kein Radius. Nirgends. */
:where(.wp-block-button__link),.wp-block-button__link,input,select,textarea,.wp-block-search__input,.wp-block-search__button{border-radius:0!important}

/* 2. Keine Schatten. */
*{box-shadow:none!important}

/* 3. Keine Animationen und keine Übergänge. Hover ist ein reiner Farbwechsel. */
*,*::before,*::after{transition:none!important;animation:none!important}

/* 4. Outline-Button = zweite Aktionsstufe */
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;border:1px solid #c9c5bd;color:#1d1f22;font-weight:500}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:#1d1f22;background:transparent;color:#1d1f22}

/* 5. Dunkle Variante (Sekundär-Aktion auf Karten) */
.wp-block-button.is-style-marelo-dark .wp-block-button__link{background:#1d1f22;color:#f7f6f3;border:none;font-weight:600}
.wp-block-button.is-style-marelo-dark .wp-block-button__link:hover{background:#33373c;color:#f7f6f3}

/* 6. Formularfelder */
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{padding:12px;border:1px solid #c9c5bd;background:#fff;font:400 14px 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22}
input[type=checkbox]{width:18px;height:18px;accent-color:#d97e0a}

/* 7. Karten: weiß auf Papier, eine Haarlinie */
.marelo-card{background:#fff;border:1px solid #e2dfd9;padding:32px 36px}

/* 8. Hinweisbox (Bestätigungen, Platzhalter) */
.marelo-notice{background:#fdf6ec;border:1px solid #d97e0a;padding:20px 24px}

/* 9. Bild-Platzhalter — 45°-Schraffur wie in der technischen Zeichnung */
.marelo-hatch{background:repeating-linear-gradient(45deg,#edeae4 0 10px,#f3f1ec 10px 20px);border:1px solid #e2dfd9;display:grid;place-items:center;min-height:280px;font:400 11px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96}

/* 10. Eyebrow „01 — PRÜFEN" */
.marelo-eyebrow{font:500 13px 'IBM Plex Mono',ui-monospace,monospace;color:#d97e0a;text-transform:uppercase}

/* 11. Rechtstexte auf 760 px */
.marelo-prose{max-width:760px;margin-inline:auto}

/* 12. Raster — Karten nebeneinander, bricht automatisch um */
.marelo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.marelo-grid-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

/* 13. Häkchen-Liste — ✓ eigene Leistung, + mit Partnern, — Qualifikation */
.marelo-check ul,ul.marelo-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font:400 15px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:#3c4046}
.marelo-check li{display:flex;gap:10px}
.marelo-check li::before{content:"✓";color:#d97e0a;font-weight:600;flex-shrink:0}
.marelo-check-plus li::before{content:"+"}
.marelo-check-dash li::before{content:"—";font-weight:400}

/* 14. Verfahrens-Kachel — Messgröße + Verfahren */
.marelo-spec{border:1px solid #e2dfd9;padding:16px 18px}
.marelo-spec strong{display:block;font:500 15px 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22;margin-bottom:4px}
.marelo-spec span{font:400 12px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96}

/* 15. Datenzeilen — Impressum, Kontakt, Kennwerte */
.marelo-data table,table.marelo-data{width:100%;border-collapse:collapse;font:400 14px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:#3c4046}
.marelo-data td{padding:12px 0;border-bottom:1px solid #eeece7;vertical-align:top}
.marelo-data td:first-child{width:180px;color:#8a8f96;padding-right:12px}
.marelo-data tr:last-child td{border-bottom:none}
.marelo-data-mono td:last-child{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* 16. Abschluss-Leiste — Satz links, Aktion rechts */
.marelo-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#fff;border:1px solid #e2dfd9;padding:28px 36px}
.marelo-cta p{margin:0;font:400 15px/1.6 'IBM Plex Sans',system-ui,sans-serif;color:#5a5f66;max-width:640px}

/* 17. Lead — der eine erklärende Satz unter dem Titel */
.marelo-lead{font:400 16px/1.65 'IBM Plex Sans',system-ui,sans-serif;color:#5a5f66;max-width:680px}

/* 18. Mono-Zeile — Telefon, Datum, Zähler, technische Werte */
.marelo-mono{font:400 14px 'IBM Plex Mono',ui-monospace,monospace;color:#1d1f22}

/* ══════════════════════════════════════════════════════════════
   ERWEITERUNG — weitere UI-Bausteine
   Alle Regeln folgen dem System: Radius 0, kein Schatten, keine
   Animation, Hover = reiner Farbwechsel, Monospace für Fakten.
   ══════════════════════════════════════════════════════════════ */

/* 19. Fokus — sichtbar für Tastatur-Bedienung. Kein Ring bei Maus-Klick. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.wp-block-button__link:focus-visible{outline:2px solid #d97e0a;outline-offset:2px}

/* 20. Sprunglink — erste Taste für Screenreader und Tastatur */
.marelo-skip{position:absolute;left:-9999px;top:auto}
.marelo-skip:focus{left:24px;top:24px;z-index:999;background:#1d1f22;color:#f7f6f3;padding:12px 18px;font:600 14px 'IBM Plex Sans',system-ui,sans-serif}

/* 21. Seitenkopf — Eyebrow, Titel, Lead als ein Block */
.marelo-section{margin-bottom:48px}
.marelo-section>.marelo-eyebrow{margin-bottom:8px}
.marelo-section>h1,.marelo-section>h2{margin:0 0 14px}
.marelo-section>.marelo-lead,.marelo-section>p:last-child{margin:0}

/* 22. Hero — weißes Band über der Seite */
.marelo-hero{background:#fff;border-bottom:1px solid #e2dfd9;padding:56px 24px;margin-bottom:48px}
.marelo-hero-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:center}
.marelo-hero h1{margin:0 0 16px;font:600 clamp(30px,4vw,40px)/1.2 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22;text-wrap:pretty}
.marelo-hero-actions{display:flex;flex-direction:column;gap:12px;max-width:420px;width:100%;justify-self:end}

/* 23. Zwei-Spalten-Block — Bild neben Text, eine gemeinsame Umrandung */
.marelo-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));background:#fff;border:1px solid #e2dfd9}
.marelo-split>*{padding:48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.marelo-split>.marelo-hatch{padding:0;border:0;border-right:1px solid #e2dfd9;min-height:340px;display:grid;place-items:center}

/* 24. Ablauf — numerierte Schritte, Trennung durch Haarlinien */
.marelo-steps-flow{counter-reset:ms;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.marelo-steps-flow>*{counter-increment:ms;border-left:1px solid #e2dfd9;padding:0 24px 4px;font:400 14px/1.55 'IBM Plex Sans',system-ui,sans-serif;color:#5a5f66}
.marelo-steps-flow>*:first-child{border-left-color:#d97e0a}
.marelo-steps-flow>*::before{content:"0" counter(ms);display:block;font:500 13px 'IBM Plex Mono',ui-monospace,monospace;color:#d97e0a;margin-bottom:10px}
.marelo-steps-flow strong{display:block;font:600 16px 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22;margin-bottom:6px}

/* 25. Werdegang / Chronik — Monospace-Zeitspalte */
.marelo-timeline{border-top:1px solid #e2dfd9}
.marelo-timeline>*{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid #e2dfd9}
.marelo-timeline>*>time,.marelo-timeline>*>span:first-child{font:400 13px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96}
.marelo-timeline strong{display:block;font:600 15px 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22}
.marelo-timeline em{display:block;font:400 14px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:#5a5f66;font-style:normal}

/* 26. Ausklapp-Fragen — natives <details>, Zeichen + und — */
.marelo-faq details{border-bottom:1px solid #e2dfd9}
.marelo-faq details:first-child{border-top:1px solid #e2dfd9}
.marelo-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;font:600 16px 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22}
.marelo-faq summary::-webkit-details-marker{display:none}
.marelo-faq summary::after{content:"+";flex-shrink:0;color:#d97e0a;font:500 18px 'IBM Plex Mono',ui-monospace,monospace}
.marelo-faq details[open] summary::after{content:"—"}
.marelo-faq summary:hover{color:#b45309}
.marelo-faq details>*:not(summary){padding:0 0 18px;font:400 15px/1.6 'IBM Plex Sans',system-ui,sans-serif;color:#5a5f66;max-width:680px}

/* 27. Tabelle mit Kopfzeile — Intervalle, Kennwerte, Preise */
table.marelo-table{width:100%;border-collapse:collapse;font:400 14px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:#3c4046}
.marelo-table th{text-align:left;padding:12px 14px;background:#f5f4f1;border:1px solid #e2dfd9;font:500 12px 'IBM Plex Mono',ui-monospace,monospace;color:#1d1f22;text-transform:uppercase;letter-spacing:.03em}
.marelo-table td{padding:12px 14px;border:1px solid #e2dfd9;vertical-align:top}
.marelo-table-mono td+td{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* 28. Kennzeichnung — kurzer Status oder Rechtsbezug */
.marelo-badge{display:inline-block;padding:4px 8px;border:1px solid #c9c5bd;font:500 11px 'IBM Plex Mono',ui-monospace,monospace;color:#5a5f66;text-transform:uppercase;letter-spacing:.03em}
.marelo-badge-accent{border-color:#d97e0a;background:#fdf6ec;color:#b45309}
.marelo-badge-solid{border-color:#1d1f22;background:#1d1f22;color:#f7f6f3}

/* 29. Formular — Feldreihen, Labels, Hinweise */
.marelo-form{display:flex;flex-direction:column;gap:18px}
.marelo-form label{display:flex;flex-direction:column;gap:6px;font:500 13px 'IBM Plex Sans',system-ui,sans-serif;color:#3c4046}
.marelo-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.marelo-form label.marelo-inline{flex-direction:row;align-items:center;gap:10px;font:500 14px 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer}
.marelo-form label.marelo-consent{flex-direction:row;align-items:flex-start;gap:10px;font:400 13px/1.5 'IBM Plex Sans',system-ui,sans-serif;padding-top:4px}
.marelo-hint{font:400 12px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96}
.marelo-error{font:500 13px 'IBM Plex Sans',system-ui,sans-serif;color:#b45309}

/* 30. Kennzahlen — sparsam einsetzen, nur belegbare Werte */
.marelo-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.marelo-stats>*{border-left:1px solid #e2dfd9;padding:0 20px}
.marelo-stats>*:first-child{border-left-color:#d97e0a}
.marelo-stats strong{display:block;font:600 32px/1.1 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22;margin-bottom:6px}
.marelo-stats span{font:400 12px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96}

/* 31. Dokumente — Prüfbefunde, Datenblätter, Formulare */
.marelo-files{border-top:1px solid #e2dfd9}
.marelo-files a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #e2dfd9;font:500 15px 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22}
.marelo-files a:hover{color:#b45309}
.marelo-files a span{font:400 12px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96;white-space:nowrap}

/* 32. Zitat — Kundenstimme, Prüfbefund-Auszug */
.marelo-quote{background:#fff;border:1px solid #e2dfd9;padding:36px 40px}
.marelo-quote p{margin:0 0 18px;font:400 20px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:#1d1f22;max-width:640px;text-wrap:pretty}
.marelo-quote cite,.marelo-quote footer{display:block;font:400 12px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96;font-style:normal}

/* 33. Bild mit Legende */
.marelo-figure{margin:0}
.marelo-figure img{display:block;width:100%;height:auto;border:1px solid #e2dfd9}
.marelo-figure figcaption{margin-top:10px;font:400 11px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96}

/* 34. Einbettung — Karte, Video, PDF-Vorschau */
.marelo-embed{border:1px solid #e2dfd9;background:#f3f1ec}
.marelo-embed iframe,.marelo-embed video,.marelo-embed>*{display:block;width:100%;border:0}

/* 35. Navigation — Brotkrumen, Abschnittsnavigation, Blättern */
.marelo-crumbs{display:flex;gap:8px;flex-wrap:wrap;font:400 12px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96}
.marelo-crumbs a{color:#8a8f96}
.marelo-crumbs a:hover{color:#1d1f22}
.marelo-localnav{display:flex;gap:26px;flex-wrap:wrap;padding:14px 0;border-top:1px solid #eeece7;border-bottom:1px solid #eeece7;font:500 14px 'IBM Plex Sans',system-ui,sans-serif}
.marelo-localnav a{color:#5a5f66}
.marelo-localnav a:hover,.marelo-localnav a[aria-current]{color:#1d1f22}
.marelo-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid #e2dfd9;font:400 12px 'IBM Plex Mono',ui-monospace,monospace;color:#8a8f96}
.marelo-pager a{display:grid;place-items:center;width:34px;height:34px;border:1px solid #c9c5bd;background:#fff;color:#1d1f22}
.marelo-pager a:hover{border-color:#1d1f22}

/* 36. Trennlinie zwischen Abschnitten */
hr.marelo-divider,.marelo-divider{height:1px;background:#e2dfd9;border:0;margin:48px 0}