/* PREISE + WHATSAPP | Zwei zusammengehoerige Entwuerfe, identische Funktionen. */
/* EDIT_WA_FARBEN: --wa ist das Gruen des WhatsApp-Buttons,
   --wa-hover die Farbe bei Mausberuehrung; --hero-surface beeinflusst
   die Farbueberblendung zwischen Hero-Text und Bild auf kleinen Geraeten. */
:root { --wa: #087b50; --wa-hover: #056441; --hero-surface: #f2f5f7; }
.hero { background: var(--hero-surface); }
.hero-image { width: 75%; left: 25%; object-position: center 58%; }
.hero-shade { background: linear-gradient(90deg, #f2f5f7 0%, #f2f5f7 29%, rgba(242,245,247,.94) 38%, rgba(242,245,247,.22) 63%, rgba(242,245,247,0) 76%); }
.hero-copy { color: #20313e; max-width: 590px; }
.hero-description { color: #43545f; max-width: 455px; font-size: 16px; }
.hero-location { color: #116e9e; }
.hero-eyebrow { color: #425b69; }
.hero-footnote { color: #516671; }
.hero-inner { padding-block: 62px; }
h1 { font-size: clamp(38px,3.45vw,50px); }
.header-cta { gap: 10px; }
.header-cta > .icon:last-child { display: none; }
.hero-work-link { color: inherit; }
.service-image img { height: 100%; }
.service-card:first-child .service-image img { object-position: center 64%; }
.service-card:last-child .service-image img { object-position: center 68%; }
.kevin-photo img { aspect-ratio: 4/5; object-position: center 60%; }
.about-grid { align-items: center; }
.reference-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.reference-pair figure { margin: 0; background: #fff; border: 1px solid var(--line); }
.reference-pair img { width: 100%; height: 360px; object-fit: cover; object-position: center 62%; }
.reference-pair figcaption { padding: 15px 19px; display: flex; gap: 20px; justify-content: space-between; align-items: center; }
.reference-pair figcaption strong { font-size: 15px; }
.reference-pair figcaption span { font-size: 12px; color: var(--text); }
.reference-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 14px 0 35px; }
/* EDIT_PREISTABELLE_LAYOUT: Breitenverteilung von Einleitung und Tabelle.
   Preise/Ziffern stehen dagegen in index.html und dunkel.html. */
.pricing-layout { grid-template-columns: minmax(0,.83fr) minmax(0,1.3fr); gap: 60px; }
.pricing-intro h2 { font-size: clamp(26px,2.45vw,36px); overflow-wrap: break-word; }
.price-table { table-layout: fixed; }
.price-table th:first-child { width: 48%; }
.price-table th:nth-child(2) { width: 22%; }
.price-table th:last-child { width: 30%; }
.price-table thead th { padding: 15px 13px; font-size: 13px; font-weight: 700; color: var(--ink); }
.price-table thead th:not(:first-child) { text-align: right; }
.price-table small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); white-space: normal; margin-top: 2px; }
.price-table tbody th,.price-table tbody td { padding: 21px 13px; }
.price-table tbody th { font-size: 14px; font-weight: 500; }
.price-size { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.price-table td.net-amount { text-align: right; font-size: 14px; font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table td.gross-amount { text-align: right; font-size: 24px; color: var(--blue-hover); background: #f0f6f9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table thead th:last-child { background: #e8f1f6; color: var(--blue-hover); }
.price-individual { padding-inline: 13px; gap: 16px; }
.price-tax-note { font-size: 12px; color: var(--muted); margin-top: 18px; line-height: 1.75; }
.price-review { margin-top: 18px; }
.whatsapp-method strong { font-size: 18px; letter-spacing: 0; color: var(--wa); }
.whatsapp-method > .icon { color: var(--wa); }
.form-whatsapp { color: var(--wa); width: 100%; text-align: left; }
/* EDIT_WA_BUTTON: Gruener schwebender Button unten rechts.
   position:fixed bleibt beim Scrollen sichtbar, right/bottom steuern Position. */
.wa-launcher { position: fixed; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 40; background: var(--wa); color: #fff; border: 1px solid #ffffff30; box-shadow: 0 5px 24px #101f2633; display: inline-flex; align-items: center; gap: 11px; padding: 14px 21px; border-radius: 30px; min-height: 55px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.wa-launcher .icon { width: 27px; height: 27px; flex-basis: 27px; }
.wa-launcher:hover { background: var(--wa-hover); }
.wa-launcher:focus-visible { outline-color: #057046; }
/* EDIT_WA_POPUP: Groesse/Position des Anfragefensters am Bildschirm. */
.wa-dialog { position: fixed; margin: 0; top: auto; left: auto; right: 24px; bottom: 94px; width: 390px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 114px); padding: 0; border-radius: 12px; background: #fff; color: #243640; box-shadow: 0 15px 80px #06131c40; overflow: auto; overscroll-behavior: contain; }
.wa-dialog::backdrop { background: #081c2a30; }
/* EDIT_WA_KOPF: Dunkelgruene Leiste mit Kevins kleinem Portrait/Name. */
.wa-head { display: flex; align-items: center; gap: 12px; background: #12352c; color: #fff; padding: 17px 15px 17px 20px; position: sticky; top: 0; z-index: 1; }
.wa-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 44%; border: 1px solid #ffffff60; flex-shrink: 0; }
.wa-head h2 { font-size: 16px; line-height: 1.45; letter-spacing: 0; margin: 0; color: #fff; }
.wa-head p { font-size: 11px; line-height: 1.5; margin: 2px 0 0; color: #c6dfd5; }
.wa-close { background: transparent; color: #fff; border: 0; border-radius: 4px; width: 40px; height: 44px; display: grid; place-items: center; margin-left: auto; flex-shrink: 0; }
.wa-close svg { width: 22px; height: 22px; }
.wa-close:focus-visible { outline-color: #fff; outline-offset: -3px; }
/* EDIT_WA_FORMULAR: Abstaende, Beschriftung, Felder, Hinweise,
   Versandbutton und Alternative Telefon/E-Mail im Pop-up. */
.wa-body { padding: 20px; }
.wa-intro { font-size: 13px; line-height: 1.6; color: #52626c; margin: 0 0 16px; }
.wa-fields { display: grid; gap: 13px; }
.wa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wa-field { min-width: 0; }
.wa-field label { display: block; font-size: 12px; font-weight: 700; color: #2d434e; margin: 0 0 5px; line-height: 1.5; }
.wa-field label span { font-weight: 400; font-size: 11px; color: #65727b; }
.wa-field input,.wa-field select,.wa-field textarea { color: #263b47; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; min-height: 44px; padding: 9px 10px; font-size: 16px; line-height: 1.5; width: 100%; scroll-margin-block: 100px 100px; }
.wa-field textarea { height: 82px; min-height: 75px; resize: vertical; }
.wa-field input::placeholder,.wa-field textarea::placeholder { font-size: 13px; color: #6f7c85; }
.wa-photo-hint { display: flex; align-items: flex-start; gap: 11px; background: #f0f7f3; border-radius: 5px; padding: 12px; margin: 16px 0; }
.wa-photo-hint > .icon { color: #12734d; width: 22px; height: 22px; flex-basis: 22px; margin-top: 2px; }
.wa-photo-hint strong { display: block; font-size: 12px; font-weight: 700; line-height: 1.55; color: #214d3e; }
.wa-photo-hint span { display: block; font-size: 11px; color: #507164; line-height: 1.6; margin-top: 2px; }
.wa-send { display: flex; align-items: center; gap: 11px; justify-content: center; min-height: 48px; width: 100%; padding: 12px 14px; border-radius: 5px; border: 0; background: var(--wa); color: #fff; font-weight: 700; font-size: 14px; }
.wa-send:hover { background: var(--wa-hover); }
.wa-send > .icon { width: 23px; height: 23px; flex-basis: 23px; }
.wa-send > .icon:last-child { margin-left: auto; width: 20px; }
.wa-send > span { margin-right: auto; }
.wa-privacy { font-size: 10px; line-height: 1.7; color: #627078; margin: 12px 0 0; }
.wa-privacy a { text-decoration: underline; text-underline-offset: 2px; }
.wa-alternative { font-size: 11px; line-height: 1.6; color: #65757d; border-top: 1px solid #e0e7e9; padding-top: 13px; margin-top: 13px; }
.wa-alternative a { color: #2a5c49; text-decoration: underline; text-underline-offset: 3px; }
.wa-status:not(:empty) { font-size: 12px; padding: 12px; margin-top: 14px; background: #edf7f1; color: #325b49; line-height: 1.6; }
.footer { padding-bottom: 100px; }
.no-js .wa-launcher { display: inline-flex; }

/* DUNKLER ENTWURF: dieselben Preise, Medien und Kontaktfunktionen. */
/* EDIT_DUNKLE_VARIANTE: Regeln wirken NUR auf dunkel.html.
   Die CSS-Klasse theme-dark steht im body der dunklen Version.
   index.html (hell) wird durch diese Regeln nicht veraendert. */
.theme-dark { --ink: #eef3f5; --text: #bac8d0; --muted: #a1b1bc; --line: #31414d; --paper: #14212b; --dark: #0d1821; --blue-hover: #80c7eb; --hero-surface: #0e1a23; background: #0e1a23; color: var(--ink); }
.theme-dark .site-header,.theme-dark .footer { background: #0e1a23; border-color: var(--line); }
.theme-dark .topbar { background: #14252f; color: #afc3cf; }
.theme-dark .brand-copy strong { color: #edf2f4; }
.theme-dark .brand-copy small { color: #b0bec6; }
.theme-dark .hero-copy { color: #fff; }
.theme-dark .hero-description { color: #d4e0e6; }
.theme-dark .hero-eyebrow,.theme-dark .hero-footnote { color: #bed0dc; }
.theme-dark .hero-location { color: #8fcbe9; }
.theme-dark .hero-shade { background: linear-gradient(90deg,#0e1a23 0%,#0e1a23 29%,rgba(14,26,35,.94) 38%,rgba(14,26,35,.23) 63%,rgba(14,26,35,0) 76%); }
.theme-dark .button:hover { background: #08608d; border-color: #08608d; }
.theme-dark .benefits,.theme-dark .pricing { background: #0e1a23; }
.theme-dark .benefits .icon,.theme-dark .eyebrow,.theme-dark .service-title .icon { color: #73bfe7; }
.theme-dark .service-card,.theme-dark .reference-pair figure { background: #15232d; }
.theme-dark .service-extra { background: #172935; }
.theme-dark .reference-pair figcaption { background: #13222d; }
.theme-dark .about-lead { color: #d6e2e9; }
.theme-dark .process li > span { background: #193345; border-color: #54768c; }
.theme-dark .price-table thead { background: #192c3a; }
.theme-dark .price-table thead th:last-child,.theme-dark .price-table td.gross-amount { background: #1c3544; }
.theme-dark .price-table td.net-amount { color: var(--text); }
.theme-dark .price-review,.theme-dark .price-review strong { color: #aabdca; }
.theme-dark .contact { background: #162631; border-color: var(--line); }
.theme-dark .contact-region { color: #c2d3dd; }
.theme-dark .whatsapp-method strong,.theme-dark .whatsapp-method .icon,.theme-dark .form-whatsapp { color: #92d7b7; }
.theme-dark .inquiry-form { background: #12212b; border-color: #3d5360; }
.theme-dark .field label { color: #d6e1e7; }
.theme-dark .field input,.theme-dark .field select,.theme-dark .field textarea { color: #edf3f6; background: #192f3d; border-color: #526975; }
.theme-dark textarea::placeholder { color: #adbdc8; }
.theme-dark .form-hint,.theme-dark .form-status { color: #adc3d2; }
.theme-dark .menu-toggle { color: #edf2f5; }
.theme-dark .menu-lines i { background: #d6e5ed; }
.theme-dark .mobile-nav { background: #13232f; }
.theme-dark .mobile-nav a { border-color: #2e4251; }
.theme-dark .wa-dialog { --blue-hover: #0c608e; }
.theme-dark .wa-dialog textarea::placeholder { color: #6f7c85; }

/* ANPASSUNG KLEINERER DESKTOPS / TABLETS (bis 1100px). */
@media(max-width:1100px) {
 .hero-copy { max-width: 560px; }
 .pricing-layout { gap: 32px; grid-template-columns: minmax(0,.8fr) minmax(0,1.3fr); }
 .price-table tbody th,.price-table tbody td { padding-inline: 11px; }
 .price-table td.gross-amount { font-size: 21px; }
 .reference-pair img { height: 300px; }
}
/* ANPASSUNG TABLET (bis 950px): Preisspalten und Hero-Layout. */
@media(max-width:950px) {
 .pricing-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .pricing-intro { max-width: 640px; }
 .pricing-intro > p:not(.eyebrow) { max-width: none; }
 .price-table tbody th { font-size: 15px; }
 .price-table td.gross-amount { font-size: 24px; }
 .hero-image { width: 100%; left: 0; }
 .hero-shade { background: linear-gradient(90deg,#f2f5f7 0%,rgba(242,245,247,.94) 36%,rgba(242,245,247,.40) 72%,rgba(242,245,247,.06)); }
 .theme-dark .hero-shade { background: linear-gradient(90deg,#0e1a23 0%,rgba(14,26,35,.93) 36%,rgba(14,26,35,.40) 72%,rgba(14,26,35,.06)); }
}
/* ANPASSUNG HANDY (bis 700px): Preislesbarkeit,
   WhatsApp-Popup, Hero-Bildausschnitt und mobile Abstaende. */
@media(max-width:700px) {
 .hero,.hero-inner { min-height: 0; }
 .hero-inner { padding: 38px 0 263px; align-items: flex-start; }
 .hero-image { top: auto; bottom: 0; width: 100%; left: 0; height: 245px; object-fit: cover; object-position: center 66%; }
 .hero-shade,.theme-dark .hero-shade { top: auto; bottom: 185px; height: 62px; background: linear-gradient(180deg,var(--hero-surface),transparent); }
 .hero-copy { max-width: none; width: 100%; }
 .hero h1 { font-size: clamp(31px,7.5vw,44px); }
 .hero-description { font-size: 14px; line-height: 1.8; }
 .hero-location { font-size: 18px; margin-top: 14px; margin-bottom: 17px; }
 .hero-footnote { max-width: 100%; font-size: 10px; }
 .hero-actions { gap: 12px; flex-wrap: wrap; }
 .hero-actions .button { font-size: 13px; gap: 11px; }
 .hero-actions .button > .icon:last-child { display: none; }
 .hero-work-link { min-height: 42px; }
 .reference-pair { gap: 12px; }
 .reference-pair img { height: 255px; object-position: center 64%; }
 .reference-pair figcaption { display: block; padding: 12px; }
 .reference-pair figcaption span { display: block; font-size: 10px; line-height: 1.6; margin-top: 2px; }
 .reference-note { font-size: 11px; margin-bottom: 29px; }
 .price-table th:first-child { width: 44%; }
 .price-table th:nth-child(2) { width: 25%; }
 .price-table th:last-child { width: 31%; }
 .price-table thead th { padding: 13px 8px; font-size: 12px; }
 .price-table small { font-size: 9px; line-height: 1.55; }
 .price-table tbody th,.price-table tbody td { padding: 18px 8px; }
 .price-table tbody th { font-size: 12px; }
 .price-table td.net-amount { font-size: 12px; }
 .price-table td.gross-amount { font-size: 19px; }
 .price-size { font-size: 11px; }
 .price-individual { font-size: 12px; }
 .pricing-intro h2 { font-size: clamp(24px,6.7vw,32px); }
 .footer { padding-bottom: calc(107px + env(safe-area-inset-bottom)); }
 .wa-launcher { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); font-size: 12px; padding: 12px 17px; min-height: 50px; gap: 9px; }
 .wa-launcher .icon { width: 25px; height: 25px; flex-basis: 25px; }
 .wa-dialog { right: 16px; bottom: calc(81px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); max-width: 390px; max-height: calc(100dvh - 100px - env(safe-area-inset-bottom)); }
 .wa-head { padding: 14px 12px 14px 17px; }
 .wa-body { padding: 17px; }
 .whatsapp-method strong { font-size: 16px; }
}
/* EXTRA KLEINE HANDYS (bis 370px). */
@media(max-width:370px) {
 .price-table thead th,.price-table tbody th,.price-table tbody td { padding-inline: 6px; }
 .price-table td.gross-amount { font-size: 17px; }
 .wa-head h2 { font-size: 14px; }
 .wa-avatar { width: 42px; height: 42px; }
 .wa-row { gap: 9px; }
 .wa-field label span { font-size: 10px; }
 .reference-pair img { height: 230px; }
}
/* DRUCKANSICHT: WhatsApp-Button ausblenden, Hintergrund neutral. */
@media print {
 .wa-launcher,.wa-dialog { display:none!important; }
 body,.theme-dark { color:#172e3c; background:#fff; }
 .footer { padding-bottom: 20px; }
}

/* EDIT_PREISLAYOUT_19USTG: ein einziger Endpreis statt Netto- und Bruttospalten. */
.price-table th:first-child { width: 72%; }
.price-table th:nth-child(2),.price-table th:last-child { width: 28%; }
.price-table td.final-amount { text-align: right; font-size: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--blue-hover); background: #f0f6f9; }
.theme-dark .price-table td.final-amount { background: #1c3544; }
/* EDIT_VIDEO_GRID: drei Videos nebeneinander, mobil wieder zwei bzw. eins. */
@media (min-width: 681px) { .video-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 680px) { .price-table th:first-child { width: 68%; } .price-table th:last-child { width: 32%; } .price-table td.final-amount { font-size: 19px; } }
@media (max-width: 350px) { .price-table td.final-amount { font-size: 16px; } }


/* ================================================================
   EDIT_REFERENZEN_DESIGN - Kevin bestaetigt: Beide Fotos zeigen
   denselben HAGELSCHADEN, links VORHER, rechts NACHHER.
   Referenzbilder bleiben ehrlich nebeneinander, ohne kuenstlichen
   Vorher-Nachher-Schieberegler oder generativ bearbeitete Schadenbilder.
   ================================================================ */
.reference-title { font-size: clamp(19px,2.2vw,25px); font-weight: 700; margin: 0 0 20px; letter-spacing: -.01em; }
.reference-pair figcaption strong { color: var(--ink); font-size: 16px; }
.reference-pair figcaption span { font-size: 12px; }
.theme-dark .reference-pair figcaption strong { color: #eef3f5; }

/* ================================================================
   EDIT_MOBIL_FALLBACK - Handy-Menue fuer Dateivorschauen ohne JS.
   Wenn JavaScript laeuft, bleibt das normale Hamburger-Menue aktiv.
   Wenn eine App kein JavaScript ausfuehrt, wird stattdessen ein
   natives <details>-Menue mit <summary>Menue</summary> angezeigt.
   So stehen die Links nicht mehr unaufgefordert in zwei Zeilen.
   ================================================================ */
.mobile-fallback { display: none; }
@media (max-width: 950px) {
  html.no-js .mobile-fallback { display: block; margin-left: auto; align-self: center; }
  html.no-js .mobile-fallback summary {
    list-style: none; cursor: pointer; display: flex; align-items: center;
    justify-content: center; padding: 10px 12px; min-height: 44px;
    border: 1px solid #bccbd3; border-radius: 2px;
    color: #293d4a; background: #fff; font-size: 14px; font-weight: 700;
  }
  html.no-js .mobile-fallback summary::-webkit-details-marker { display:none; }
  html.no-js .mobile-fallback summary::after { content:'☰'; margin-left: 10px; font-size: 18px; }
  html.no-js .mobile-fallback[open] summary::after { content:'×'; }
  html.no-js .mobile-fallback nav {
    position: absolute; top: calc(100% - 1px); left: 0; right: 0;
    background: #fff; border-top:1px solid #dce2e6;
    border-bottom:1px solid #cbd5dc; box-shadow: 0 12px 22px #101f2628;
    padding: 8px max(20px, var(--gutter)) 15px;
    z-index: 100;
  }
  html.no-js .mobile-fallback nav a {
    display:block; padding: 12px 8px; font-size:14px;
    border-bottom:1px solid #e8edef; text-decoration:none;
  }
  html.no-js #mobile-nav[hidden] { display:none !important; }
  html.no-js .menu-toggle { display:none !important; }
  html.no-js .site-header { position: sticky; }
  html.no-js .theme-dark .mobile-fallback summary { background:#172935; color:#f0f6fa; border-color:#3d5360; }
  html.no-js .theme-dark .mobile-fallback nav { background:#14232e; border-color:#344b5b; }
  html.no-js .theme-dark .mobile-fallback nav a { border-color:#2e4251; color:#eef2f5; }
}
@media (max-width: 420px) {
  .reference-pair { gap:8px; }
  .reference-pair figcaption { padding:12px 9px; }
  .reference-pair img { height:215px; object-position: center 58%; }
  html.no-js .mobile-fallback summary { padding:8px 10px; font-size:13px; }
}

/* EDIT_WHATSAPP_HANDY: Auf dem Handy nur das grüne WhatsApp-Symbol zeigen.
   Der große blaue Button im Startbereich bleibt als beschrifteter CTA.
   aria-label in HTML sorgt dafür, dass die runde Schaltfläche vorlesbar bleibt. */
@media (max-width: 700px) {
 .wa-launcher { width:56px; height:56px; padding:0; min-height:56px; right:17px; bottom:calc(18px + env(safe-area-inset-bottom)); justify-content:center; border-radius:50%; gap:0; }
 .wa-launcher span { display:none; }
 .wa-launcher .icon { width:28px; height:28px; flex:0 0 28px; }
}


/* =======================================================================
   EDIT_MEDIEN_RAHMEN: Alle Bild- und Videokarten in der HELLEN Website
   -----------------------------------------------------------------------
   Diese Werte zentral aendern, damit alle Rahmen gleich aussehen.
   Grau und Rand entsprechen Kevins urspruenglichem Vorher/Nachher-Look.
   --kj-rahmen-grau:  Hintergrund hinter den Bildern und Kartentexten
   --kj-rahmen-rand:  Randfarbe aller Karten
   --kj-rahmen-abstand: Abstand zwischen Medieninhalt und aeusserem Rand
   Betrifft: Leistungskarten, Reparaturvideos, Vorher/Nachher, Kevin-Foto.
   Die einzelnen Bilder, Videos und Texte bleiben unveraendert.
   ======================================================================= */
:root {
  --kj-rahmen-grau: #f1f3f6;
  --kj-rahmen-rand: #626669;
  --kj-rahmen-abstand: 10px;
}

/* Gleicher grauer Fenster-Look bei allen Bildern und Reparaturvideos. */
.service-card,
.video-card,
.reference-pair figure,
.kevin-photo {
  background: var(--kj-rahmen-grau);
  border: 1px solid var(--kj-rahmen-rand);
  border-radius: 8px;
  padding: var(--kj-rahmen-abstand);
  overflow: hidden;
}

/* Die eigentlichen Fotos/Videovorschauen bleiben sauber im Rahmen. */
.service-card .service-image,
.video-card .video-trigger,
.reference-pair figure > img,
.kevin-photo > img {
  border-radius: 3px;
}

/* Video-Unterschriften sind Teil derselben grauen Karte. */
.video-card h3 { margin-top: 13px; }
.video-card .video-caption { margin-bottom: 4px; }

/* Vorher/Nachher: Beschriftungen innerhalb des grauen Rahmens. */
.reference-pair figcaption { padding: 12px 7px 3px; }

/* Das grosse Titelbild bleibt grossflaechig. Der Hero-Bereich bekommt
   trotzdem eine ruhige, dezente graue Einfassung ohne das Auto zu verzerren. */
.hero { border: 1px solid var(--kj-rahmen-rand); }

/* Auf schmalen Handys weniger Innenabstand, damit die Medien gross bleiben. */
@media (max-width: 700px) {
  :root { --kj-rahmen-abstand: 8px; }
  .reference-pair figure { padding: 6px; }
  .reference-pair figcaption { padding: 10px 5px 4px; }
  .video-card h3 { margin-top: 10px; }
}


/* EDIT_KEVIN_NEUES_FOTO: Das vollstaendige neue Foto zeigen.
   Kein 4:5-Zuschnitt: Gesicht, Firmenfahrzeug und Werkzeug bleiben im Bild.
   Der vorhandene graue Rahmen bleibt erhalten. Bilddatei: assets/bild-08.webp.
   Das WhatsApp-Foto hat einen eigenen kleinen Ausschnitt: kevin-avatar.webp. */
.kevin-photo > #kevin-foto {
  width: 100%; height: auto; aspect-ratio: 940 / 1672;
  object-fit: contain; object-position: center;
}
.wa-avatar { object-position: center; }