/* WP-Standardfokus (lassen) */
:where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}

/* DV: Basisfarbe */

/* DV: Buttons (Hero & überall mit DV-Klasse) */
/* Klasse kann am Buttons-WRAPPER (.wp-block-buttons) ODER direkt am Button (.wp-block-button) hängen.
   Unterstützt außerdem den früheren Namen .dv-hero-btn. */
.dv-btn.wp-block-buttons .wp-block-button__link,
.wp-block-button.dv-btn .wp-block-button__link,
.dv-hero-btn .wp-block-button__link{
  background:var(--dv-blue)!important; color:#fff!important;
}
.dv-btn.wp-block-buttons .is-style-outline .wp-block-button__link,
.wp-block-button.dv-btn .is-style-outline .wp-block-button__link,
.dv-hero-btn .is-style-outline .wp-block-button__link{
  background:transparent!important; color:var(--dv-blue)!important; border-color:var(--dv-blue)!important;
}

/* DV: Checkliste (nur Listen mit Klasse dv-checklist) */
/* Optional: falls WP-Stil „Häkchen“ genutzt wird */
ul.wp-block-list.is-style-checklist li::marker{ color:var(--dv-blue); }
ul.wp-block-list.is-style-checklist li{ transition:transform .16s ease; }
ul.wp-block-list.is-style-checklist li:hover,
ul.wp-block-list.is-style-checklist li:focus-within{ transform:translateX(2px); }
@media (prefers-reduced-motion:reduce){
  ul.wp-block-list.is-style-checklist li{ transition:none; }
}
/* ===== DV – Basis ===== */
:root{
  --dv-blue:#001373;         /* Firmen-Dunkelblau */
  --dv-light:#CADCEC;        /* Hellblau Akzent   */
  --dv-shadow:0 10px 25px rgba(0,0,0,.07);
}

/* WP-Standardfokus (lassen) */
:where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}

/* ===== DV – Buttons (dv-btn am Wrapper ODER am Button) ===== */
.dv-btn.wp-block-buttons .wp-block-button__link,
.wp-block-button.dv-btn .wp-block-button__link{
  background:var(--dv-blue)!important; color:#fff!important;
}
.dv-btn.wp-block-buttons .is-style-outline .wp-block-button__link,
.wp-block-button.dv-btn .is-style-outline .wp-block-button__link{
  background:transparent!important; color:var(--dv-blue)!important; border-color:var(--dv-blue)!important;
}

/* ===== DV – Hero-Karte ===== */
.dv-hero-card{
  background: linear-gradient(180deg, rgba(202,220,236,.18), rgba(202,220,236,0));
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:clamp(16px,3vw,28px);
  box-shadow: var(--dv-shadow);
}
.dv-hero-card .wp-block-columns{ gap:clamp(16px,2.5vw,32px); }

/* ===== DV – Bild-Polish + sanfter Hover ===== */
.dv-hero-img img{
  display:block; width:100%; height:auto;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.dv-hero-card:hover .dv-hero-img img{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
@media (prefers-reduced-motion: reduce){
  .dv-hero-img img{ transition:none; }
}

/* ===== DV – Überschrift Akzent (optional) ===== */
.dv-hero-title{ position:relative; display:inline-block; }
.dv-hero-title::after{
  content:""; position:absolute; left:.1em; bottom:-.2em;
  width:3.2ch; height:.22em; background:var(--dv-blue);
  border-radius:4px; opacity:.2;
}

/* ===== DV – Checkliste (falls genutzt) ===== */
.wp-block-list.dv-checklist{ list-style:none; margin:0; padding-left:0; }
.wp-block-list.dv-checklist li{ position:relative; padding-left:1.4rem; transition:transform .16s ease; }
.wp-block-list.dv-checklist li::before{
  content:"✓"; position:absolute; left:0; top:.1em; color:var(--dv-blue); font-weight:700;
}
.wp-block-list.dv-checklist li:hover,
.wp-block-list.dv-checklist li:focus-within{ transform:translateX(2px); }
@media (prefers-reduced-motion:reduce){ .wp-block-list.dv-checklist li{ transition:none; } }


/* === CI-Farben (Tokens) === */
:root{
  --dv-cyan:#0CC0DF;   /* Hauptfarbe */
  --dv-blue:#001373;   /* Sekundär */
  --dv-light:#CADCEC;  /* Akzent hell */
}

/* === Schriften (systemfont-only, DSGVO-sicher) === */
:where(.wp-site-blocks){
  font-family: Verdana, Geneva, Tahoma, sans-serif;                  /* Fließtext */
}
:where(.wp-site-blocks) h1,
:where(.wp-site-blocks) h2,
:where(.wp-site-blocks) h3,
:where(.wp-site-blocks) h4,
:where(.wp-site-blocks) h5,
:where(.wp-site-blocks) h6{
  font-family: Helvetica, Arial, "Segoe UI", "Noto Sans", "Liberation Sans", sans-serif;
  font-weight: 700;
}

/* === dezente Markenfärbung für Links & Fokus === */
:where(.wp-site-blocks) a{ color:var(--dv-blue); text-decoration-thickness:.08em; }

/* Buttons nur wenn bewusst markiert → Klasse "dv-btn" setzen */
.wp-block-button.dv-btn .wp-block-button__link,
.dv-btn.wp-block-buttons .wp-block-button__link{
  background:var(--dv-blue)!important; color:#fff!important;
}
.dv-btn.wp-block-buttons .is-style-outline .wp-block-button__link,
.wp-block-button.dv-btn .is-style-outline .wp-block-button__link{
  background:transparent!important; color:var(--dv-blue)!important; border-color:var(--dv-blue)!important;
}


/* CI-Linkfarben global (nur Text-Links, keine Buttons) – starke Regel */
.wp-site-blocks a:not(.wp-element-button){
  color:#001373 !important;                 /* Firmen-Dunkelblau */
  text-decoration-thickness:.08em;
}
.wp-site-blocks a:not(.wp-element-button):hover{
/* WP-Standard-Buttons global in CI-Farben */
:where(.wp-site-blocks) .wp-element-button{
  background:#001373 !important;   /* dv-blue */
  color:#fff !important;
  border-color:#001373 !important;
  border-radius:10px;
  transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
:where(.wp-site-blocks) .wp-element-button:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* Outline-Variante in CI */
:where(.wp-site-blocks) .is-style-outline .wp-element-button{
  background:transparent !important;
  color:#001373 !important;
  border-color:#001373 !important;
}
:where(.wp-site-blocks) .is-style-outline .wp-element-button:hover{
  color:#0CC0DF !important;        /* dv-cyan */
  border-color:#0CC0DF !important;
}

/* === dvtool-suggest – Formular im CI-Look === */
.dvtool-suggest{max-width:860px;margin:24px auto 0;}
.dvtool-suggest form{max-width:520px}
.dvtool-suggest h2{margin-bottom:12px;}
.dvtool-suggest label{display:block;margin:10px 0 4px;font-weight:600;}
.dvtool-suggest input[type="text"],
.dvtool-suggest input[type="email"],
.dvtool-suggest textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--dv-light);
  border-radius:8px;
  background:#fff;
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dvtool-suggest textarea{min-height:120px;resize:vertical;}
.dvtool-suggest input[type="text"]:focus,
.dvtool-suggest input[type="email"]:focus,
.dvtool-suggest textarea:focus{
  border-color:var(--dv-cyan);
  box-shadow:0 0 0 3px rgba(12,192,223,.15);
}
.dvtool-suggest input[type="checkbox"]{transform:translateY(1px);margin-right:.4rem;}

/* === CI-Surfaces & Seitenhintergrund (ersetzt graue Defaults) === */
/* 1) Seite global weiß (übersteuert Theme-Base) */
:where(body){ background:#fff !important; }

/* 2) Helle CI-Kartenfarbe aus Akzent (sehr sanft) */
:root{
  --dv-surface: #F6FAFF;      /* sehr helles Blau (aus #CADCEC abgeleitet) */
  --dv-border:  #E5EEF8;      /* zarte Kontur */
}

/* 3) Standard-Gruppen mit Hintergrund als CI-Karten darstellen */
:where(.wp-site-blocks) .wp-block-group.has-background{
  background: var(--dv-surface) !important;
  border: 1px solid var(--dv-border);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
}

/* Optional: etwas Innenabstand, ohne Content umzubauen */
:where(.wp-site-blocks) .wp-block-group.has-background{
  padding: clamp(12px, 2vw, 18px);
}

/* === THEME A: Minimal Navy + Cyan === */

:root{
  --dv-blue:#001373;   /* Primär/Navy */
  --dv-cyan:#0CC0DF;   /* Akzent/Cyan */
  --dv-text:#0B1221;   /* Haupttext */
  --dv-muted:#49566A;  /* gedämpfter Text */
  --dv-surface:#F6FAFF;/* sehr helles Blau für Karten */
  --dv-border:#E5EEF8; /* zarte Kontur */
}

/* Typo (systemfonts, DSGVO-sicher) */
:where(.wp-site-blocks){
  color:var(--dv-text);
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* Body */
  line-height:1.6;
}
:where(.wp-site-blocks) h1,
:where(.wp-site-blocks) h2,
:where(.wp-site-blocks) h3{
  font-family: Helvetica, Arial, "Segoe UI", "Noto Sans", "Liberation Sans", sans-serif; /* Headings */
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.15;
}

/* Links neutral → Brand bei Hover */
:where(.wp-site-blocks) a:not(.wp-element-button){
  color:var(--dv-blue);
  text-decoration-thickness:.08em;
}
:where(.wp-site-blocks) a:not(.wp-element-button):hover{ color:var(--dv-cyan); }

/* Karten/Info-Boxen – CI-Surface */
  background:var(--dv-surface) !important;
  border:1px solid var(--dv-border);
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.05);
  padding:clamp(12px,2vw,18px);
}

/* WP-Standard-Buttons global in CI */
:where(.wp-site-blocks) .wp-element-button{
  background:var(--dv-blue) !important;
  color:#fff !important;
  border-color:var(--dv-blue) !important;
  border-radius:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  transition:filter .2s, transform .2s, box-shadow .2s;
}
:where(.wp-site-blocks) .wp-element-button:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* Kleines Typo-Polish */
.small-muted{ color:var(--dv-muted); font-size:.95rem; }

/* === Typo-Fine-Tuning === */

/* 1) H1 responsiv & kompakter */
:where(.wp-site-blocks) h1{
  font-size: clamp(2.1rem, 3.6vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-block: 0 0.6rem;
}

/* 2) Lesbare Absatz-Abstände (leicht, neutral) */
:where(.wp-site-blocks) p{
  margin-block: 0.25rem 0.9rem;
}

/* 3) Optionale elegante Unterstreichung (nur wenn Klasse gesetzt) */
.dv-link-underline{ position:relative; text-decoration:none; }
.dv-link-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: linear-gradient(90deg, var(--dv-cyan), var(--dv-blue));
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.dv-link-underline:hover::after{ transform: scaleX(1); }

/* === Accessible Link Hover (High Contrast) === */

/* Content-Links (keine Buttons) – Navy bleibt, Unterstreichung zeigt Interaktion */
:where(.wp-site-blocks) a:not(.wp-element-button){
  color: var(--dv-blue);
}

/* Tastaturfokus klar sichtbar, ohne Farbe zu ändern */
:where(.wp-site-blocks) a:not(.wp-element-button):focus-visible{
  outline: 2px solid var(--dv-cyan);
  outline-offset: 2px;
}


}





/* === NO-SHIFT LINKS – überall, auch Menü & Footer === */

/* 1) Basis: Links (Buttons ausgenommen) ohne Farb-/Layout-Änderung */
html body a:not(.wp-element-button){
  color:#001373;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
  font-weight: inherit;
}
html body a:hover:not(.wp-element-button),
html body a:focus:not(.wp-element-button),
html body a:active:not(.wp-element-button){
  color:#001373 !important;           /* Kontrast bleibt hoch */
  text-underline-offset: 2px !important;
  text-decoration-thickness: .08em !important;
  font-weight: inherit !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 2) Navigation speziell: gleiche Regeln auf den echten Menü-Anchor anwenden */
.wp-block-navigation a.wp-block-navigation-item__content:hover,
.wp-block-navigation a.wp-block-navigation-item__content:focus,
.wp-block-navigation a.wp-block-navigation-item__content:active,
.wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content{
  color:#001373 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: .08em !important;
  font-weight: inherit !important;
}

/* 3) Falls ein <li> selbst Hover-Styling bekommt (selten, aber möglich) */
.wp-block-navigation li:hover,
.wp-block-navigation li:focus-within{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* === dvtool-suggest · Form CI styles (restore) === */
.dvtool-suggest{ max-width:860px; margin:24px auto 0; }
.dvtool-suggest form{ max-width:520px; }
.dvtool-suggest h2{ margin-bottom:12px; }
.dvtool-suggest label{ display:block; margin:10px 0 4px; font-weight:600; }
.dvtool-suggest input[type="text"],
.dvtool-suggest input[type="email"],
.dvtool-suggest textarea{
  width:100%;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--dv-border, #E5EEF8);
  border-radius:8px;
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
  /* Sicherheitsnetz gegen globale Resets */
  box-shadow:none; transform:none;
}
.dvtool-suggest textarea{ min-height:120px; resize:vertical; }
/* Fokus-Ring in CI (ohne Layout-Shift) */
.dvtool-suggest input[type="text"]:focus,
.dvtool-suggest input[type="email"]:focus,
.dvtool-suggest textarea:focus{
  border-color:var(--dv-cyan, #0CC0DF);
  box-shadow:0 0 0 3px rgba(12,192,223,.15);
}
/* Submit-Button – CI (bestehende Navy-Regel bleibt gültig) */
.dvtool-suggest input[type="submit"]{
  border-radius:10px; padding:10px 16px; line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.dvtool-suggest input[type="submit"]:hover{
  filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* === dvtool-suggest · Inputs deutlich sichtbar, kein Layout-Shift === */

/* Farbtokens für Felder (können später zentral justiert werden) */
:root{
  --dv-field-border: #9FB2C8;    /* sichtbarer Rahmen (mittel) */
  --dv-field-border-strong:#6D86A0; /* Hover/Fokus Linie */
  --dv-field-bg:#FFFFFF;         /* Feldhintergrund */
}

/* Grundzustand */
.dvtool-suggest input[type="text"],
.dvtool-suggest input[type="email"],
.dvtool-suggest textarea{
  width:100%;
  background: var(--dv-field-bg);
  border: 1.5px solid var(--dv-field-border); /* konstant → kein Shift */
  border-radius: 10px;
  padding: 10px 12px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease; /* keine Größe ändern */
  box-shadow: none; transform: none;
}

/* Hover: nur Farbe, keine Breitenänderung */
.dvtool-suggest input[type="text"]:hover,
.dvtool-suggest input[type="email"]:hover,
.dvtool-suggest textarea:hover{
  border-color: var(--dv-field-border-strong);
}

/* Fokus: klare Linie + weicher Glow (Breite bleibt 1.5px) */
.dvtool-suggest input[type="text"]:focus,
.dvtool-suggest input[type="email"]:focus,
.dvtool-suggest textarea:focus{
  border-color: var(--dv-blue);                  /* #001373 */
  box-shadow: 0 0 0 3px rgba(12,192,223,.18);    /* Cyan-Glow */
}

/* Platzhalter etwas absetzen */
.dvtool-suggest ::placeholder{
  color: #8A97A6; opacity: 1;
}

/* Button bleibt Navy (bestehende Regel reicht, hier nur Sicherheits-Set) */
.dvtool-suggest input[type="submit"]{
  border-radius:10px; padding:10px 16px; line-height:1.2;
}

/* === dvtool-suggest · Checkbox-Zeile + Formular-Abstand === */

/* 1) Checkbox deutlich + markenfarbig, sauber ausgerichtet */
.dvtool-suggest input[type="checkbox"]{
  accent-color: #001373;          /* Navy: CI */
  inline-size: 18px;              /* größer klickbar */
  block-size: 18px;
  vertical-align: text-bottom;    /* Linie bündig mit Text */
  margin-right: .6rem;            /* Abstand vor dem Text */
  margin-top: .15rem;             /* optische Mitte */
}

/* 2) Mehr Luft um die Checkbox-Zeile (robust – nutzt :has wenn verfügbar) */
.dvtool-suggest :is(p,div,span,label):has(> input[type="checkbox"]){
  display: inline-flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: .75rem;             /* Abstand nach oben */
  margin-bottom: .35rem;          /* kleiner Abstand nach unten */
}

/* 3) Lesbarkeit der Links in der Checkbox-Zeile (ändert keine Farbe) */
.dvtool-suggest :is(p,div,span,label):has(> input[type="checkbox"]) a{
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
}

/* 4) Abstand unter dem Formularblock zum nächsten Abschnitt */
.dvtool-suggest{ margin-bottom: 28px; }

/* === dvtool-suggest · Checkbox-Zeile: eine Zeile, kein Flex-Mehrspalter === */

/* Nur die Checkbox bekommt Abstand; der Rest bleibt normaler Inline-Text */
.dvtool-suggest label:has(> input[type="checkbox"]){
  display:block;                 /* zurück auf normalen Textfluss */
  margin-top:.75rem;
  margin-bottom:.35rem;
  line-height:1.4;
}
.dvtool-suggest label:has(> input[type="checkbox"]) > input[type="checkbox"]{
  accent-color:#001373;          /* CI */
  inline-size:18px; block-size:18px;
  vertical-align:text-bottom;
  margin-right:.6rem;            /* Abstand nur vor dem Text */
  margin-top:.15rem;
}

/* Keine harten Whitespaces/Spalteneffekte bei Link/Text */
.dvtool-suggest label:has(> input[type="checkbox"]) a,
.dvtool-suggest label:has(> input[type="checkbox"]) span{
  white-space:normal;
  word-break:normal;
}

/* Tool-Rail: horizontale Leiste ohne JS */
.tool-rail{ overflow:auto; display:flex; gap:14px; scroll-snap-type: x mandatory; padding-bottom:8px; }
.tool-rail > *{ flex:0 0 280px; scroll-snap-align:start; }
.tool-card{ background:#fff; border:1px solid var(--dv-border); border-radius:14px; padding:14px; box-shadow:0 6px 24px rgba(0,0,0,.04); }
.tool-card h3{ margin:.2rem 0 .3rem; font-size:1.05rem; }
.tool-card p{ margin:0 0 .5rem; font-size:.95rem; color:var(--dv-muted); }