/* Farben, Schrift und Details aus dem Originaldesign, kompakter umgesetzt. */
@font-face{font-family:Roboto;src:url('../fonts/roboto-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('../fonts/montserrat-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--blau:#05477b;--dunkel:#1c375d;--rot:#ca020d;--gruen:#8bbe12}
body{background:#e6e6e6;color:var(--dunkel);font-family:Roboto,Arial,sans-serif}
h1,h2,h3{font-family:Montserrat,Arial,sans-serif;font-weight:700}
h1{color:var(--rot);font-size:25px;margin-bottom:18px}
h2{color:var(--dunkel)}
h3{color:#60830c}
.box,.deal-karte{box-shadow:0 1px 3px rgba(28,55,93,.08)}
.button,button{display:inline-block;border:0;border-radius:3px;background:var(--gruen);color:#213806;padding:8px 14px;font-size:14px;font-weight:bold;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer}
.textseite a.button,.rechtstext a.button{text-decoration:none}
.button:hover,button:hover{background:#252525;color:#fff;text-decoration:none}
.button:focus-visible,button:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.temperatur{font-family:Montserrat,Arial,sans-serif;color:var(--rot);font-size:23px;line-height:1.2}
.preis{color:var(--rot)}

/* Der grosse Onkel sitzt wie im Original ueber der blauen und roten Leiste. */
.kopf{background:linear-gradient(to top,var(--rot) 0,var(--rot) 46px,transparent 46px),var(--blau) url('../images/header-blau.png') center top/auto 100px repeat-x}
.kopf-innen{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:100px 46px;column-gap:24px;row-gap:0;min-height:0;padding-top:0;padding-bottom:0}
.kopf .logo{grid-column:1;grid-row:1 / 3;align-self:center;justify-self:start;position:relative;z-index:1}
.kopf .logo picture{display:block}
.kopf .logo img{display:block;width:158px;height:140px;max-width:100%;max-height:none;object-fit:contain}
.kopf nav{grid-column:2;grid-row:2;width:auto;min-width:0;order:initial;align-items:stretch;gap:8px;flex-wrap:nowrap}
.kopf nav a{display:flex;align-items:center;padding:8px 13px;color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:17px;line-height:1.2;text-shadow:1px 1px #8f0109;text-decoration:none;border:0}
.kopf nav a:hover,.kopf nav a[aria-current]{background:#a9010a;border:0;text-decoration:none}
.kopf .konto-links,.kopf .konto-link{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin-left:0}
.kopf .konto-links{gap:8px}
.kopf .konto-links a{padding:7px 11px 7px 34px;background-size:27px auto;font-size:15px;line-height:1.4}
.kopf .konto-link{padding:8px 12px;border-radius:3px;background:var(--rot);font-weight:bold;max-width:100%;overflow-wrap:anywhere}
.kopf a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.anmelde-kopf h1{color:#fff;font-size:19px}
.anmelde-inhalt button{font-size:14px}

@media(max-width:700px){
 .kopf{background:linear-gradient(to top,var(--rot) 0,var(--rot) 44px,transparent 44px),var(--blau) url('../images/header-blau.png') center top/auto 76px repeat-x}
 .kopf-innen{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:76px 44px;column-gap:12px;row-gap:0;padding-top:0;padding-bottom:0}
 .kopf .logo{grid-row:1;grid-column:1}.kopf .logo img{width:150px;height:48px;max-width:100%}
 .kopf .konto-links,.kopf .konto-link{grid-column:2;grid-row:1}
 .kopf .konto-links a{font-size:13px;padding:7px 8px 7px 29px;background-size:23px auto}
 .kopf nav{grid-column:1 / -1;grid-row:2;gap:3px;width:100%;justify-content:center}
 .kopf nav a{font-size:14px;padding:8px 9px}
 .anmelde-kopf h1{font-size:17px}
}
@media(max-width:380px){.kopf-innen{column-gap:7px}.kopf .logo img{width:115px;height:42px}.kopf .konto-links{gap:5px}.kopf .konto-links a{font-size:12px;padding-left:26px;padding-right:6px;background-size:21px auto}.kopf nav a{padding-left:7px;padding-right:7px}}
.einreichen-kurz{display:none}
/* Zwischen Desktop und Mobil bleibt neben dem grossen Logo weniger Menuebreite. */
@media(min-width:701px) and (max-width:1050px){
 .kopf nav{gap:3px}
 .kopf nav a{font-size:14px;padding-left:8px;padding-right:8px}
 .kopf nav .einreichen-voll{display:none}
 .kopf nav .einreichen-kurz{display:inline}
}
@media(max-width:700px){.einreichen-voll{display:none}.einreichen-kurz{display:inline}.kopf nav a{font-size:13px;padding-left:7px;padding-right:7px}.kopf .konto-link{max-width:160px}}
@media(max-width:380px){.kopf nav a{font-size:12px;padding-left:4px;padding-right:4px}}
/* Eingeloggter Nutzer: Konto und Abmeldung direkt erreichbar. */
.kopf .header-konto{grid-column:2;grid-row:1;justify-self:end;align-self:center;display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.header-konto-profil{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 14px;border:1px solid #ffffff50;border-radius:5px;background:#ffffff12;color:#fff;text-decoration:none}
.header-konto-profil:hover,.header-konto-profil[aria-current]{background:#ffffff26;color:#fff;text-decoration:none}
.header-konto-profil>.do-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#ffffff20;font-size:20px}
.header-konto-text{min-width:0}.header-konto-text small{display:block;color:#d6e5f0;font-size:11px;line-height:1.4}.header-konto-text strong{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.4}
.header-konto form{margin:0;flex:none}.kopf .header-konto button{display:flex;align-items:center;gap:7px;background:var(--rot);color:#fff;padding:9px 12px;font-size:13px}.kopf .header-konto button:hover{background:#a9010a}.kopf .header-konto button:focus-visible{outline-color:#fff}
@media(max-width:700px){.kopf .header-konto{gap:6px}.header-konto-profil{gap:6px;padding:6px 8px}.header-konto-profil>.do-icon{width:24px;height:24px;font-size:16px}.header-konto-text strong{max-width:115px;font-size:12px}.header-konto-text small{font-size:10px}.kopf .header-konto button{padding:9px 8px;font-size:12px}.header-konto button>.do-icon{display:none}}
@media(max-width:420px){.kopf:has(.header-konto) .logo img{width:100px}.kopf:has(.header-konto) .kopf-innen{column-gap:7px}.header-konto-text strong{max-width:80px}.header-konto-profil>.do-icon{display:none}.header-konto-profil{padding:6px}.kopf .header-konto button{padding:9px 7px;font-size:11px}}
.header-spruch{grid-column:2;grid-row:1;align-self:center;justify-self:start;max-width:calc(100% - 320px);color:#fff}.header-spruch strong{display:block;font:700 22px/1.3 Montserrat,Arial,sans-serif}.header-spruch span{display:block;margin-top:5px;font-size:13px;color:#c7dce9}.header-home .do-icon{display:none}@media(max-width:1050px){.header-spruch{display:none}}@media(max-width:700px){.header-home .do-icon{display:inline-block}.header-home .home-text{display:none}.kopf nav{gap:2px}.kopf nav a{padding-left:6px;padding-right:6px}}@media(max-width:380px){.kopf nav a{font-size:11px;padding-left:4px;padding-right:4px}}
.kopf nav a{white-space:nowrap}@media(max-width:700px){.kopf nav a{font-size:12px}}@media(max-width:380px){.kopf nav a{font-size:11px}}
.header-konto-profil{position:relative}.header-konto-profil .header-neu{position:absolute;right:-6px;top:-7px;display:flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 4px;border-radius:12px;background:#ca020d;border:2px solid #fff;color:#fff;font-size:10px;font-weight:bold;line-height:1}