/* =========================================================================
   ruben-wippermann.de – Website-spezifische Ergänzungen
   Baut auf styles.css auf (nutzt dessen CSS-Variablen). Blautöne.
   ========================================================================= */

/* ---------------------------------------------------------- Hero mit Foto */
.hero__portrait--photo {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
  background: var(--blue-800);
}
.hero__portrait--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 12%; }

.politik-eyebrow { display: inline-flex; align-items: center; gap: 10px; }

/* ---------------------------------------------------------------- Media/Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--surface-2);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body h2 { margin-top: 0; }

/* --------------------------------------------------------------- Unternehmen */
.company-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.company {
  display: grid; grid-template-columns: 118px 1fr; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .2s, border-color .2s;
}
.company:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); }
.company__img { background: var(--surface-2); overflow: hidden; }
.company__img img { width: 100%; height: 100%; object-fit: cover; }
.company__body { padding: 20px 22px; }
.company__body h3, .company__body h2 { margin: 0 0 4px; font-size: 1.12rem; }
.company__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.company__body p { margin: 8px 0 0; color: var(--muted); font-size: .93rem; }

/* ------------------------------------------------------------------ Angebot */
.offer {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.offer--reverse .offer__media { order: 2; }
.offer__media { background: var(--surface-2); overflow: hidden; min-height: 260px; }
.offer__media img { width: 100%; height: 100%; object-fit: cover; }
.offer__body { padding: 32px; }
.offer__list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.offer__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: .96rem; }
.offer__list svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--primary); margin-top: 2px; }

/* ------------------------------------------------------------------- Divider */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
  .split, .offer { grid-template-columns: 1fr; }
  .split--reverse .split__media, .offer--reverse .offer__media { order: 0; }
  .company-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .company { grid-template-columns: 1fr; }
  .company__img { aspect-ratio: 16/9; }
}

/* ---------------------------------------------------- Unterseiten-Header */
.subhero {
  background:
    radial-gradient(800px 400px at 82% -20%, rgba(59,130,246,.30), transparent 60%),
    linear-gradient(160deg, var(--blue-800), var(--blue-600));
  color: #eaf1fc; padding: 64px 0 56px;
}
.subhero__crumb { font-size: .82rem; color: #a9c8fb; margin-bottom: 12px; }
.subhero__crumb a { color: #cfe0fb; }
.subhero h1 { color:#fff; font-size: clamp(1.9rem,4vw,2.9rem); line-height:1.08; margin:0 0 14px; letter-spacing:-.02em; }
.subhero p { color:#cfe0fb; font-size:1.1rem; max-width:54ch; margin:0; }
.subhero .politik-eyebrow { color:#dbe8ff; margin-bottom:14px; }

/* Textkarte ohne Bild (z. B. Euroblood ohne Foto) */
.company--text { grid-template-columns: 1fr; }
.company--text .company__body { padding: 24px 24px; }

/* „Mehr erfahren"-Link */
.more { display:inline-flex; align-items:center; gap:7px; font-weight:650; margin-top:14px; }
.more::after { content:"→"; }

/* Navigation früher einklappen (verhindert abgeschnittene Menüpunkte 640–900px) */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px 18px;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav__toggle { display: grid; place-items: center; }
}
@media (max-width: 520px) { .brand__name small { display: none; } }

/* Hero auf Mobil kompakter (weniger leerer Abstand oben) */
@media (max-width: 640px) {
  .hero__inner { padding: 48px clamp(22px, 4.5vw, 48px) 56px; }
  .subhero { padding: 44px 0 40px; }
}

/* =======================================================================
   Aufhellung: heller & freundlicher (weniger dunkles Blau)
   ======================================================================= */
.hero {
  background:
    radial-gradient(1000px 520px at 80% -10%, rgba(255,255,255,.28), transparent 60%),
    linear-gradient(155deg, #2563d9 0%, #3b82f6 55%, #6aa8fb 100%) !important;
}
.hero__lead { color: #f1f6ff; }
.hero h1 .accent { color: #eaf2ff; }
.subhero {
  background:
    radial-gradient(760px 380px at 82% -20%, rgba(255,255,255,.24), transparent 60%),
    linear-gradient(160deg, #2a66db, #4f8ff7) !important;
}
.footer { background: #143a73 !important; }
.cta { background: linear-gradient(150deg, #2563d9, #3b82f6) !important; }

/* =======================================================================
   Immer heller Auftritt – Dunkel-Modus des Systems NICHT übernehmen
   (Ruben wünscht durchgehend hell & freundlich)
   ======================================================================= */
:root { color-scheme: light; }
/* 🔴 AUFGERÄUMT 25.08.: Der alte @media(prefers-color-scheme:dark)-Block mit der
   blauen Farbpalette stand hier, war aber tot — zwei spätere unconditional
   :root{}-Blöcke (Zeile ~240 "Silber/Editorial" und der tatsächlich aktive letzte
   Block "HELL & FREUNDLICH" weiter unten) überschreiben dieselben Custom
   Properties danach in JEDEM Fall, auch im Dunkelmodus. Entfernt, keine
   sichtbare Wirkung verloren (WCAG-Kontrastprüfung, Auftrag Koordinator). */
.card__icon { background: var(--blue-50); }
.card__tag { background: var(--blue-50); }
.note { background: var(--blue-50); }

/* Neuer Hochformat-Hero (A1): Ausschnitt neutral/mittig-oben */
.hero__portrait--photo img { object-position: 50% 18%; }

/* Firmenlogos in den Unternehmenskarten */
.clogo { height: 34px; width: auto; max-width: 170px; object-fit: contain; display: block; margin: 2px 0 10px; }

/* Sicherheitsnetz: lange deutsche Komposita in Überschriften immer umbrechen
   (verhindert horizontalen Überlauf auf schmalen Geräten) */
h1, h2, h3, h4, h5, h6, dt, th { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* Echtes Wippermann-Wappen im Kopfbereich statt Text-Kürzel */
.brand__logo { height: 40px; width: auto; display: block; }
.footer__brand .brand__logo { height: 34px; }
@media (max-width: 520px) { .brand__logo { height: 34px; } }

/* 🔴 AUFGERÄUMT 27.08.: Der "Editorial: Serifen-Headlines"-Block (Georgia-
   Schrift) plus das dazugehörige dunkle Navy-Theme (.hero/.subhero/.footer/
   .cta) standen hier, waren aber tot — der spätere "HELL & FREUNDLICH"-Block
   (weiter unten) setzt dieselben Selektoren erneut mit !important und
   gewinnt daher immer. Entfernt (Design-Review-Auftrag, ui-ux-pro-max-Fund). */
.card, .company, .offer{ border-color:var(--line); }
.section__eyebrow{ color:var(--primary); }
/* Buttons */
.btn--primary{ background:var(--primary); } .btn--primary:hover{ background:var(--primary-strong); }
/* Grün-Seite (Politik) behält grünen Akzent auf Silber/Navy-Basis */


/* =======================================================================
   HELL & FREUNDLICH · Blass-Blau  (Vorbild: BWW-Seite, Blau statt Grün)
   Letzter Block – überschreibt bewusst den dunklen Editorial-Look.
   Ruben, 11.08.2026: „heller und freundlicher, das dunkle Blau ist drückend."
   ======================================================================= */
:root{
  --bg:#f4f8fd; --bg-soft:#e6f0fb; --surface:#ffffff; --surface-2:#e3eefb;
  --ink:#152238; --ink-soft:#394962; --muted:#54607a; --line:#d7e4f4;
  --primary:#1f6fc0; --primary-strong:#17548f; --primary-ink:#ffffff;
  --ring:rgba(31,111,192,.30);
  --shadow:0 12px 28px -16px rgba(20,45,80,.22);
  --shadow-lg:0 30px 60px -26px rgba(20,45,80,.30);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#f4f8fd; --bg-soft:#e6f0fb; --surface:#ffffff; --surface-2:#e3eefb;
    --ink:#152238; --ink-soft:#394962; --muted:#54607a; --line:#d7e4f4;
    --primary:#1f6fc0; --primary-strong:#17548f; --primary-ink:#ffffff;
    --ring:rgba(31,111,192,.30);
    --shadow:0 12px 28px -16px rgba(20,45,80,.22);
    --shadow-lg:0 30px 60px -26px rgba(20,45,80,.30);
  }
}

/* Freundliche, serifenlose Überschriften (statt Georgia-Serifen) */
h1,h2,h3,.hero h1,.subhero h1{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Helvetica Neue",sans-serif;
  font-weight:800; letter-spacing:-.02em;
}
/* Lange Komposita nur an echten Trennstellen brechen (kein „Defibrilla-tor") */
h1,h2,.hero h1,.subhero h1{ -webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word; }

/* Rundere, freundlichere Buttons */
.btn{ border-radius:999px; padding:13px 24px; }

/* ---- HERO: hell statt dunkel-navy ---- */
.hero{
  background:
    radial-gradient(880px 500px at 85% -10%, rgba(31,111,192,.24), transparent 60%),
    linear-gradient(165deg,#cfe4fa 0%, #e6f1fd 60%) !important;
  color:var(--ink);
}
.hero::after{ display:none; }
.hero__eyebrow{ background:#d3e6fb; border-color:#b3d2f1; color:var(--primary-strong); font-weight:700; }
.hero__dot{ background:var(--primary); box-shadow:0 0 0 4px rgba(44,120,194,.18); }
.hero h1{ color:var(--ink); }
.hero h1 .accent{ color:var(--primary); }
.hero__lead{ color:var(--ink-soft); }
.hero__role{ background:#fff; border-color:var(--line); color:var(--ink-soft); }
.hero__card{ background:#fff; border-color:var(--line); box-shadow:var(--shadow-lg); }
.hero__card p{ color:var(--ink-soft); }
.hero__portrait--photo{ border-color:var(--line); background:var(--surface-2); }
/* Hero-CTA: EIN lauter Hauptknopf + Textlink als zweiter Weg (führt, statt wählen zu lassen) */
.hero__actions{ align-items:center; gap:10px 22px; }
.hero__actions .btn--primary{ background:var(--primary); color:#fff; border-color:transparent; box-shadow:var(--shadow); }
.hero__actions .btn--primary:hover{ background:var(--primary-strong); }
.hero__textlink{ font-weight:700; color:var(--primary-strong); display:inline-flex; align-items:center; gap:6px; }
.hero__textlink:hover{ text-decoration:underline; }

/* Mitlaufende CTA-Leiste (nur mobil) – ein Tipp bis zur Anfrage */
.cta-bar{ display:none; }
@media (max-width: 820px){
  .cta-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--line); box-shadow:0 -8px 22px -14px rgba(20,45,80,.5);
  }
  .cta-bar__txt{ font-weight:600; color:var(--ink); font-size:.92rem; }
  .cta-bar__btn{ background:var(--primary); color:#fff; font-weight:700; padding:11px 18px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow); }
  .cta-bar__btn:hover{ background:var(--primary-strong); }
  body.has-cta-bar{ padding-bottom:70px; }
}

/* ---- Unterseiten-Header hell ---- */
.subhero{
  background:
    radial-gradient(780px 400px at 85% -20%, rgba(31,111,192,.18), transparent 60%),
    linear-gradient(160deg,#d6e8fb,#eaf3fd) !important;
  color:var(--ink);
}
.subhero__crumb{ color:var(--muted); } .subhero__crumb a{ color:var(--primary); }
.subhero h1{ color:var(--ink); }
.subhero p{ color:var(--ink-soft); }
.subhero .politik-eyebrow{ color:var(--primary); }

/* ---- Footer hell (macht das Navy-Wappen wieder sichtbar) ---- */
.footer{ background:#eaf2fb !important; color:var(--ink-soft); border-top:1px solid var(--line); }
.footer a{ color:var(--primary); }
.footer h4, .footer h3{ color:var(--ink); }
.footer__brand .brand__name{ color:var(--ink); }
.footer__bottom{ border-top-color:var(--line); color:var(--muted); }

/* ---- CTA: freundlicher Blau-Block (statt dunkel), weißer Button ---- */
.cta{ background:linear-gradient(150deg,var(--primary),var(--primary-strong)) !important; color:#fff; }
.cta p{ color:#fff; }
.cta .btn--light{ background:#fff; color:var(--primary); border-color:#fff; }
.cta .btn--light:hover{ background:#eaf3fc; }

/* ---- Kontakt-Button: weißer Text (Nav-Link-Regel hatte ihn grau gemacht) ---- */
.nav__links a.nav__cta{ color:#fff; }
.nav__links a.nav__cta:hover{ color:#fff; background:var(--primary-strong); }

/* ---- Angebots-/Schwerpunkt-Karte ohne Bild: volle Breite, ruhig ---- */
.offer--nomedia{ grid-template-columns:1fr; }
.offer--nomedia .offer__body{ padding:34px 38px; }
.offer--nomedia .offer__body h2{ margin-top:0; }

/* ---- Shop-Einbettung (PePa): Platzhalter bis zur Auslieferung ---- */
#pepa-shop{ min-height:240px; }
.shop-placeholder{ color:var(--muted); background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--radius); padding:44px 22px; text-align:center; margin:0; font-size:.95rem; }

/* ---- Datenschutz-Einwilligung unter Formularen ---- */
.form__consent{ display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--ink-soft); line-height:1.45; margin-top:4px; }
.form__consent input{ margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--primary); }

/* ---- Hochformat-Bild (Rathaus): ganzes Gebäude zeigen, kein Beschnitt ---- */
.split__media--tall{ aspect-ratio:3 / 4; background:var(--surface-2); align-self:stretch; }
.split__media--tall img{ width:100%; height:100%; object-fit:cover; object-position:center; }
@media (max-width: 900px){ .split__media--tall{ aspect-ratio:4 / 3; } }

/* =======================================================================
   PREMIUM-POLITUR (2026-08-16) · Feinschliff für das Aushängeschild
   ======================================================================= */

/* Sanfte, konsistente Übergänge + Textauswahl */
a, .btn, .card, .company, .clogo, .hero__role, .nav__links a { transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .22s ease; }
::selection { background: rgba(31,111,192,.18); color: var(--ink); }
html { scroll-padding-top: 88px; }

/* Zugängliche, sichtbare Fokus-States (Tastaturbedienung) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 3px solid rgba(31,111,192,.45); outline-offset: 2px; border-radius: 8px;
}

/* Skip-Link: unsichtbar bis Tab-Fokus, überspringt die Navigation */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--primary); color: #fff; padding: 10px 18px;
  border-radius: 8px; font-weight: 650; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Navigation: feiner, premium */
.nav { box-shadow: 0 1px 0 rgba(20,45,80,.04); }
.nav__links a:hover { color: var(--primary); }
.nav__cta { box-shadow: 0 6px 16px -8px rgba(31,111,192,.6); }

/* Buttons: etwas mehr Tiefe + lebendigeres Anheben */
.btn--primary { box-shadow: 0 8px 20px -10px rgba(31,111,192,.65); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(31,111,192,.7); }
.hero__actions .btn:first-child:hover { transform: translateY(-1px); }

/* Karten: ruhiger Lift + zarter Blau-Rand beim Hover */
.card:hover, .company:hover { transform: translateY(-4px); border-color: rgba(31,111,192,.35); box-shadow: 0 26px 50px -26px rgba(20,45,80,.30); }

/* „Mehr"-Link mit animiertem Pfeil */
.more { position: relative; }
.more::after { transition: transform .18s ease; }
.more:hover { text-decoration: none; }
.more:hover::after { transform: translateX(4px); }

/* Hero: großzügiger & klarer auf großen Screens */
@media (min-width: 901px){
  .hero__inner { padding: 104px clamp(22px, 4.5vw, 48px) 108px; }
  .hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.8rem); }
  .hero__lead { font-size: 1.2rem; }
}
.hero__card { transition: transform .25s ease, box-shadow .25s ease; }
.hero__card:hover { transform: translateY(-3px); }

/* Vertrauens-Leiste (Belege statt Behauptungen) */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trust__row { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: center;
  padding: 20px 22px; max-width: var(--maxw); margin: 0 auto; }
.trust__item { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.trust__item svg { width: 18px; height: 18px; color: var(--primary); flex: 0 0 auto; }
@media (max-width: 640px){ .trust__item { font-size: .84rem; } .trust__row { gap: 12px 18px; } }

/* Firmenlogos: dezente Graustufe, Farbe beim Hover (premium) */
.clogo { filter: saturate(.9); opacity: .96; }
.company:hover .clogo { filter: none; opacity: 1; }

/* Bilder generell weicher eingebettet */
.split__media, .offer__media { box-shadow: inset 0 0 0 1px rgba(20,45,80,.04); }

/* Telefon auf Kontaktseite zurückgestuft – Formular ist der bevorzugte Weg.
   Vorher opacity:.68, das Label/Link/Icon gemeinsam abdunkelte und den
   Kontrast auf ~2,75:1 drückte (unter WCAG-AA 4,5:1). Label (small) und Link
   (a) haben eigene color-Regeln, die schon für sich AA-konform sind
   (--muted/--primary, ~5:1) – die opacity war der einzige Fehler. */
.contact__method--muted { background: transparent; }

/* FAQ-Sektion Startseite */
.faq h3 { margin: 28px 0 8px; font-size: 1.15rem; }
.faq h3:first-child { margin-top: 0; }
.faq p { margin: 0; max-width: 64ch; }

/* Tippflächen auf Touch-Geräten mindestens 44 px hoch (WCAG 2.5.5) */
@media (max-width: 1024px) {
  .brand, .more, .hero__textlink, .footer li a, .subhero__crumb a, .back { min-height: 44px; display: inline-flex; align-items: center; }
  .footer li a { display: flex; }
  .footer__bottom a { display: inline-block; padding: 13px 4px; }
}