/* TAS Unger GmbH — Website-Stylesheet
   Ersetzt die Claude-Design-Runtime (support.js/image-slot.js).
   Design/Layout der Variante H bleibt über die Inline-Styles im HTML erhalten;
   diese Datei liefert nur Schrift, Basis-Reset und echte :hover/:focus-Regeln. */

/* ---- Lokale Schrift (DSGVO, kein Fremd-CDN) ---- */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/manrope-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/manrope-700.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/manrope-800.woff2") format("woff2")}


/* ==== ZENTRALER ECKRADIUS — hier ändern, gilt überall ==== */
:root{ --radius: 8px; }

/* Alles Runde bezieht sich auf die Variable */
img{ border-radius: var(--radius); }
/* Logo bleibt eckig (Ausnahme) */
header img{ border-radius: 0; }

input, textarea{ border-radius: var(--radius); }
button, .btn, a[href^="tel"].btn{ border-radius: var(--radius); }

/* Die zwei fixen End-Buttons (Telefon blau / Formular rot) */
.endbar-btn{ border-radius: var(--radius); }
/* Bild-Nummern-Wrapper erbt Rundung */
.bildnr-wrap img{ border-radius: var(--radius); }

/* ---- Basis (aus dem Design-<helmet> übernommen) ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;font-family:"Manrope",Helvetica,Arial,sans-serif}
a{color:#BB332C;text-decoration:none}
a:hover{color:#00354D}
img{max-width:100%}
input,textarea,button{font:inherit}

/* Container-Query-Kontext: die clamp()-Werte im Design nutzen cqw-Einheiten. */
.cq{container-type:inline-size}

/* ---- Hover/Focus — ersetzt die style-hover/style-focus-Attribute des Designs.
   !important, weil die Basisfarben inline gesetzt sind. ---- */
.lnk-red:hover{color:#BB332C !important}      /* Navigation, Kopf-Telefon */
.btn-red:hover{background:#9E2A24 !important} /* rote Call-to-Action-Buttons */
.card-sym:hover{border-color:#BB332C !important} /* Symptom-Kacheln */
.phone-big:hover{color:#00354D !important}    /* große Telefonnummer im Formular */
.foot-lnk:hover{color:#E9A19C !important}     /* Footer-Links */
.bar-call:hover{background:#002B3E !important} /* fixe Leiste: Anrufen */
.bar-write:hover{background:#9E2A24 !important}/* fixe Leiste: Schreib uns */
.fld:focus{border-color:#BB332C !important}   /* Formularfelder */

/* hidden muss Inline-display:flex schlagen (Befund-Panel, Erfolgs-/Fehlermeldung) */
[hidden]{display:none !important}

/* Honeypot-Feld unsichtbar für Menschen, sichtbar für Bots */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* ==== Mobiles Menü (Hamburger, reines CSS, kein JS) ==== */
.nav-toggle{ display:none; }
.nav-burger{ display:none; }

@media (max-width: 860px){
  header > div{ flex-wrap: wrap !important; }
  .nav-burger{
    display:inline-flex; align-items:center; justify-content:center;
    order:3; width:48px; min-height:46px;
    font-size:26px; line-height:1; color:#00354D;
    cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  }
  /* Kopf-Telefon rechts neben den Burger */
  header > div > a[href^="tel:"]{ order:2; margin-left:auto; }
  /* Menü einklappen, bei Klick als volle Spalte darunter */
  header nav{
    order:4; flex-basis:100%; width:100%;
    display:none !important;
    flex-direction:column !important; flex-wrap:nowrap !important;
    gap:0 !important; margin:0 !important;
    background:#FFFFFF; border-top:1px solid #E2E4E6;
  }
  header nav a{ padding:14px 2px !important; border-bottom:1px solid #F0F1F2; }
  .nav-toggle:checked ~ nav{ display:flex !important; }
}