/*
 * LP 2026: neuer Kopf, Fuss und Aktionsleiste fuer ALLE Seiten.
 *
 * Werte 1:1 aus den Seiten-CSS des Handovers (fuer-wen.css), aber jede Regel
 * haengt an .lp2026-kopf, .lp2026-fuss oder .lp2026-aktionsleiste. So gilt sie
 * auf den alten Seiten nur fuer Kopf und Fuss und laesst deren Inhalt
 * (Tailwind) in Ruhe. Dazu das Logo aus dem alten Kopf (assets/img/logo.svg).
 */

.lp2026-kopf,.lp2026-fuss,.lp2026-aktionsleiste{
  --dorsi-heading:#112538;--dorsi-text-dark:#000000;--dorsi-text-light:#ffffff;
  --dorsi-button:#112538;--dorsi-bg-neutral:#f0f0f0;--shop-blue:#dff0fb;
  --shop-border:rgba(17,37,56,.12);--container:1200px;--pad-x:clamp(1.25rem,4vw,3rem);
  font-family:"Montserrat",sans-serif;font-size:17px;line-height:1.7;color:var(--dorsi-text-dark);-webkit-font-smoothing:antialiased
}
.lp2026-kopf *,.lp2026-kopf *::before,.lp2026-kopf *::after,
.lp2026-fuss *,.lp2026-fuss *::before,.lp2026-fuss *::after,
.lp2026-aktionsleiste *,.lp2026-aktionsleiste *::before,.lp2026-aktionsleiste *::after{box-sizing:border-box}
.lp2026-kopf a,.lp2026-fuss a,.lp2026-aktionsleiste a{color:inherit}
.lp2026-kopf .container,.lp2026-fuss .container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad-x)}
.lp2026-kopf :focus-visible,.lp2026-fuss :focus-visible,.lp2026-aktionsleiste :focus-visible{outline:3px solid var(--dorsi-heading);outline-offset:3px}

/* Button */
.lp2026-kopf .btn,.lp2026-aktionsleiste .btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.5rem;padding:1rem 2rem;border:3px solid transparent;border-radius:9999px;background:var(--dorsi-button);color:var(--dorsi-text-light);font:inherit;font-size:1rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s}
.lp2026-kopf .btn:hover,.lp2026-aktionsleiste .btn:hover{background:rgba(17,37,56,.88)}

/* Kopf */
.lp2026-kopf{background:#fff;border-bottom:1px solid var(--shop-border);position:sticky;top:0;z-index:40}
.lp2026-kopf .site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.125rem}
.lp2026-kopf .brand{font-size:1.1875rem;font-weight:700;letter-spacing:.14em;text-decoration:none;color:var(--dorsi-heading)}
.lp2026-kopf .nav{display:flex;align-items:center;gap:1.5rem}
.lp2026-kopf .nav a{font-size:.8125rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--dorsi-heading)}
.lp2026-kopf .nav a:hover,.lp2026-kopf .nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
.lp2026-kopf .nav a.btn{color:var(--dorsi-text-light)}
.lp2026-kopf .nav .btn{min-height:2.75rem;padding:.75rem 1.375rem;font-size:.8125rem;letter-spacing:.03em;text-decoration:none}
.lp2026-kopf .header__phone{display:none}
.lp2026-kopf .nav-toggle{display:none}
.lp2026-kopf svg{display:inline-block}
@media (max-width:900px){
  .lp2026-kopf .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--shop-border);padding:.5rem var(--pad-x) 1.25rem}
  .lp2026-kopf .nav.is-open{display:flex}
  .lp2026-kopf .nav a{padding:1rem 0;border-bottom:1px solid var(--shop-border);font-size:1rem}
  .lp2026-kopf .nav .btn{margin-top:1rem;min-height:3.25rem;font-size:1rem}
  .lp2026-kopf .header__phone{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:9999px;border:2px solid var(--dorsi-heading);background:var(--shop-blue);text-decoration:none}
  .lp2026-kopf .header__actions{display:flex;align-items:center;gap:.75rem}
  .lp2026-kopf .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:0;border-radius:9999px;background:transparent;cursor:pointer;color:var(--dorsi-heading)}
}

/*
 * Logo aus dem alten Kopf: assets/img/logo.svg, dort 2.5rem hoch und
 * hoechstens 165px breit. Gilt fuer jede neue Kopfzeile, auch auf den zehn
 * Seiten des Handovers.
 */
.brand.brand--logo{display:inline-flex;align-items:center;line-height:0}
/* Doppelte Klasse: WooCommerce setzt .woocommerce-page img{height:auto}. */
.brand.brand--logo .brand__logo{display:block;width:auto;height:2.5rem;max-width:165px}

/* Fuss */
.lp2026-fuss{background:var(--dorsi-bg-neutral);padding-block:2.5rem;font-size:.9375rem;border-top:1px solid var(--shop-border)}
.lp2026-fuss .container{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between}
.lp2026-fuss p{margin:0 0 .25rem}

/*
 * Das alte Theme erzwingt am Handy "body p { font-size:16px !important;
 * line-height:1.4 !important }" (src/css/input.css). Im neuen Fuss gelten
 * die Werte der neuen Seiten, daher hier ebenfalls !important, mit hoeherer
 * Spezifitaet.
 */
@media (max-width:767px){
  body .lp2026-fuss p{font-size:.9375rem!important;font-weight:400!important;line-height:1.7!important;letter-spacing:normal!important}
}

/* Aktionsleiste unten am Handy */
.lp2026-aktionsleiste{display:none}
@media (max-width:900px){
  .lp2026-aktionsleiste{display:flex;gap:.625rem;align-items:stretch;position:sticky;bottom:0;z-index:30;background:#fff;border-top:1px solid rgba(17,37,56,.25);padding:.75rem var(--pad-x)}
  .lp2026-aktionsleiste .btn{flex:1;min-height:3.25rem;padding:.875rem 1rem;font-size:.9375rem}
  .lp2026-aktionsleiste .actionbar__call{flex:none;width:60px;border:3px solid var(--dorsi-heading);background:var(--shop-blue);border-radius:9999px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--dorsi-heading)}
}

/* Unsichtbarer Sprunglink */
.lp2026-sprung{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Social Links im Fuss (alle Seiten) */
.lp2026-fuss .lp2026-social{display:flex;gap:.75rem;align-items:flex-start}
.lp2026-fuss .lp2026-social a{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:9999px;border:1px solid rgba(17,37,56,.2);color:#112538;background:#fff;text-decoration:none}
.lp2026-fuss .lp2026-social a:hover{background:#dff0fb}

/* Rueckmeldung der Formulare (formulare.js) */
.lp2026-meldung{margin:0 0 1rem;padding:1rem 1.25rem;border-radius:.75rem;font-family:"Montserrat",sans-serif;font-size:1rem;line-height:1.6}
.lp2026-meldung--ok{background:#e7f6ec;border:1px solid #2e7d4f;color:#14532d;font-weight:600;outline:none}
.lp2026-meldung--fehler{background:#fdecec;border:1px solid #b42318;color:#7a1a12}