/* Ergänzungen für die echte Website: Grundwerte und das Umschalten zwischen Rechner und Handy. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#F5F6F2}

/* Elemente, die es nur am Handy gibt */
.mhead,.mport,.fprog,.fnav,.wknav,.nr-h{display:none}
/* Schritt-Hüllen der Terminbuchung: am Rechner ohne Wirkung */
.fs,.fs0{display:contents}

@media (max-width:760px){
[data-mob] .gnav{display:none!important}
[data-mob] .w3btn,[data-mob] .fs0,[data-mob] .nr-r{display:none!important}
[data-mob] .nr-h{display:inline}
}

/* Terminbuchung: Meldungen und Feld gegen automatische Einträge */
.tfehler{background:#FBE6CC;color:#7A4410;border-radius:10px;padding:12px 16px;font-size:15px}
.tfehler:empty{display:none}
.inp.fehl{border-color:#B4472F}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Tablets (761 bis 1000 Pixel): Logo-Reihe in vier statt sechs Spalten, damit nichts übersteht */
@media (min-width:761px) and (max-width:1000px){
.lrow{grid-template-columns:repeat(4,auto)!important}
}

/* Cookie-Banner */
.ckb{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;display:flex;justify-content:center;pointer-events:none;font-family:'Instrument Sans',system-ui,sans-serif}
.ckb-in{pointer-events:auto;width:100%;max-width:720px;box-sizing:border-box;background:#FFFFFF;color:#14171C;border:1px solid #E2E1D9;border-radius:16px;padding:22px 24px;box-shadow:0 18px 44px rgba(16,36,62,.22);display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5;max-height:calc(100vh - 32px);overflow:auto}
.ckb-t{font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;line-height:1.25}
.ckb-p{margin:0;font-size:15px;color:#4B5563}
.ckb-p a{color:#14171C}
.ckb-w{display:flex;flex-direction:column;gap:8px}
.ckb-w[hidden]{display:none}
.ckb-z{display:flex;gap:12px;align-items:flex-start;background:#F5F6F2;border-radius:10px;padding:12px 14px;font-size:14px;color:#4B5563;cursor:pointer}
.ckb-z input{width:20px;height:20px;margin:2px 0 0;flex-shrink:0;accent-color:#10243E}
.ckb-z b{display:block;font-size:16px;font-weight:600;color:#14171C}
.ckb-k{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ckb-b{flex:1 1 180px;min-height:48px;box-sizing:border-box;font:inherit;font-weight:600;font-size:16px;border-radius:8px;padding:12px 18px;cursor:pointer;border:2px solid #10243E;transition:background .2s,color .2s}
.ckb-ja{background:#10243E;color:#FFFFFF}
.ckb-ja:hover{background:#193352;border-color:#193352}
.ckb-nein{background:#FFFFFF;color:#10243E}
.ckb-nein:hover{background:#E6ECF2}
.ckb-l{flex:0 0 auto;min-height:44px;font:inherit;font-size:15px;font-weight:600;color:#10243E;background:none;border:0;text-decoration:underline;cursor:pointer;padding:8px 6px}
.ckb-b:focus-visible,.ckb-l:focus-visible{outline:3px solid #10243E;outline-offset:2px}
@media (max-width:760px){
.ckb{left:10px;right:10px;bottom:10px}
.ckb-in{padding:18px;gap:10px}
.ckb-t{font-size:18px}
.ckb-b{flex:1 1 100%}
.ckb-l{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.ckb-b{transition:none}}

/* ===== Intro-Film im Hero der Startseite ===== */
.tw-film{position:relative;width:100%;max-width:600px;aspect-ratio:6/5;background:#F5F6F2;border-radius:8px;overflow:hidden}
.tw-film img,.tw-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tw-film video{opacity:0}
.tw-film.is-on video{opacity:1}
.tw-film__play{position:absolute;right:12px;bottom:16px;display:inline-flex;align-items:center;gap:10px;border:0;background:#10243E;color:#fff;font:600 15px 'Instrument Sans',system-ui,sans-serif;padding:10px 16px 10px 10px;border-radius:999px;cursor:pointer;box-shadow:0 8px 20px rgba(16,36,62,.25);min-height:48px}
.tw-film__play:hover{background:#193352}
.tw-film__play i{width:30px;height:30px;border-radius:50%;background:#BEDE54;display:inline-flex;align-items:center;justify-content:center}
.tw-film.is-on .tw-film__play{display:none}
.tw-film__ctl{position:absolute;right:12px;bottom:12px;display:none;gap:8px}
.tw-film.is-on .tw-film__ctl{display:flex}
.tw-film__ctl button{width:44px;height:44px;padding:0;border-radius:50%;border:0;background:rgba(16,36,62,.85);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(16,36,62,.25)}
.tw-film button:focus-visible{outline:3px solid #BEDE54;outline-offset:3px}

/* ===== Anzeigen-Check-Block unter dem Hero ===== */
.acbw{max-width:1280px;margin:0 auto;padding:0 24px 64px;box-sizing:border-box}
.acb{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:20px 32px;padding:30px 52px;color:#14171C}
.acb::before{content:"";position:absolute;inset:0;background:#BEDE54;transform:skewX(-10deg);z-index:0}
.acb>*{position:relative;z-index:1}
.acb h2{margin:0;font-family:'Poppins',sans-serif;font-weight:700;font-size:30px;line-height:1.2;color:#14171C}
.acb p{margin:6px 0 0;font-size:18px;line-height:1.4;color:#14171C}
.acb .cta{margin-left:auto}

@media (max-width:760px){
  /* Handy: Film oben und randlos, darunter Name, Überschrift, Text, Knopf, Zahlen */
  [data-mob].p-Start header+section{padding:8px 20px 32px!important;gap:20px!important}
  [data-mob].p-Start header+section>div:nth-child(2){order:-1;flex:0 0 auto!important;width:calc(100% + 40px);margin:0 -20px}
  [data-mob].p-Start header+section>div:first-child{gap:20px!important}
  [data-mob].p-Start header+section>div:first-child>div:first-child{display:none!important}
  [data-mob].p-Start .mport{display:block;order:-1;font-size:14px;line-height:1.4;color:#4B5563}
  [data-mob].p-Start .mport strong{display:inline;color:#14171C;font-weight:600}
  .tw-film{max-width:none}
  .acbw{padding:0 20px 40px}
  .acb{flex-direction:column;align-items:stretch;gap:18px;padding:26px 28px}
  .acb::before{transform:skewX(-4deg)}
  [data-mob] .acb h2{font-size:24px!important;line-height:1.2!important}
  [data-mob] .acb p{font-size:16px!important}
  .acb .cta{margin-left:0;justify-content:center}
}

/* ===== Logo Version 2 (12. Oktober): als Datei, nie als Text ===== */
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{display:block;width:208px;height:auto}
@media (max-width:760px){
  .logo img{width:185px}
  [data-mob] #vergleich div[style*="min-width: 720px"]>div:nth-child(2)>img{display:none!important}
}