/* UI-Ueberarbeitung (Branch ui/pro-max-ueberarbeitung).
   Wird auf allen Seiten im neuen Design NACH dem eigenen Style geladen
   (Startseite: Inline-Style, Unterseiten: leistung.css) und legt nur
   Verbesserungen darueber. Inhalt und Aufbau der Seiten bleiben gleich.
   Grundlage: ui-ux-pro-max, Prioritaeten Barrierefreiheit > Bedienung >
   Leistung > Layout > Typografie > Bewegung. */

/* 1. Kontrast: jede Textfarbe mindestens 4,5:1, Symbole mindestens 3:1 */
:root{
  --faint:#66756b;                 /* vorher #8a978d = 2,9:1 auf dem Grund */
  --icon:#5a9a36;                  /* Symbolfarbe, 3,3:1 statt 2,6:1 */
  --grad:linear-gradient(135deg,#4a842a,#3b6d1f); /* weisse Knopfschrift 4,5:1 statt 2,7:1 */
  --grad-soft:linear-gradient(135deg,#70ad47,#467d27); /* nur fuer Schriftzuege und Flaechen ohne Text */
  --ring:#3b6d1f;
  --hdr-h:76px;
}
html[data-theme=dark]{
  --faint:#7f8e85;                 /* vorher #62716a = 3,8:1 */
  --icon:#8cc865;
  --grad:linear-gradient(135deg,#9ad273,#5a9a36);
  --grad-soft:linear-gradient(135deg,#9ad273,#5a9a36);
  --ring:#9ad273;
}
.hero h1 .g,.phero h1 .g,.shop-promo h2 .g{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text}
.serv-ic,.tbadge,.pc-ic,.feats .ck,.fnum,.f-ic,.shop-tile .si,.n-ic,.pack .ck,.shot .ph svg{color:var(--icon)}

/* 2. Tastatur: Sprunglink und sichtbarer Fokus */
.skip{position:fixed;left:16px;top:-60px;z-index:200;padding:12px 18px;border-radius:12px;background:var(--text);color:var(--bg);font-weight:600;font-size:.95rem;transition:top .15s ease-out}
.skip:focus{top:12px}
:where(a,button,summary,select,input,textarea,[tabindex]):focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:10px}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:none}
main:focus{outline:none}

/* 3. Ankerziele nicht unter dem klebenden Kopf verstecken */
section[id],[id].pkg-detail{scroll-margin-top:calc(var(--hdr-h) + 12px)}

/* 4. Trefferflaechen: mindestens 44 px am Handy, 40 px am Rechner */
.nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}
.nav a[aria-current="true"],.nav a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--brand)}
.hdr-act .btn{min-height:40px}
.hdr .brand{display:inline-flex;align-items:center;min-height:44px}
.tsw{position:relative}
.tsw::after{content:"";position:absolute;inset:-8px -4px}   /* 30 px Knopf, 46 px Trefferflaeche */
.foot-links{flex-wrap:wrap;justify-content:center;row-gap:4px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.cont-facts a{display:inline-flex;align-items:center;min-height:40px}
.more{min-height:40px}

/* 5. Menue am Handy: die Navigation war unter 920 px einfach weg */
.nav-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;align-items:center;justify-content:center;flex:none;transition:border-color .2s}
.nav-btn:hover{border-color:var(--border2)}
.nav-btn .nb-close{display:none}
.nav-btn[aria-expanded="true"] .nb-open{display:none}
.nav-btn[aria-expanded="true"] .nb-close{display:block}
.nav-panel{position:fixed;left:0;right:0;top:var(--hdr-h);z-index:49;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 24px 40px rgba(0,0,0,.12);padding:8px 20px 20px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s ease-out,transform .18s ease-out,visibility 0s linear .18s}
.nav-panel.open{transform:none;opacity:1;visibility:visible;transition:opacity .2s ease-out,transform .2s ease-out}
.nav-panel ul{list-style:none;max-width:1180px;margin:0 auto}
.nav-panel li+li{border-top:1px solid var(--border)}
.nav-panel a{display:flex;align-items:center;justify-content:space-between;min-height:52px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.08rem;color:var(--text)}
.nav-panel a::after{content:"";width:8px;height:8px;border-right:2px solid var(--icon);border-top:2px solid var(--icon);transform:rotate(45deg);margin-right:6px}
.nav-panel .btn{width:100%;justify-content:center;margin-top:14px;min-height:48px}
.nav-panel .btn::after{display:none}
.nav-panel .btn-primary{color:var(--on-brand);font-size:1rem}
@media(max-width:920px){.nav-btn{display:inline-flex}}
@media(min-width:921px){.nav-panel{display:none}}

/* 6. Typografie: nichts unter 12 px, Zeilen ruhiger umbrechen, Zahlen buendig */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.shop-tile span,.ftag,.pkg-table thead th small,.cont-facts strong,.tags span,.wtag,.serv .tl,.work-body .w-sub,.prod-body .w-sub,.next span,.stock,.pc-label,.eyebrow,.crumb,.code-bar span{font-size:max(.75rem,12px)}
.pc .note,.prod-note,.note2{font-size:.8rem}
.pc .amt b,.prod-price b,.hero-meta b,.phero-meta b,.pkg-table td{font-variant-numeric:tabular-nums}

/* 7. Formular: 16 px verhindert das Hineinzoomen am iPhone, 48 px hohe Felder */
.fld input,.fld select{min-height:48px}
@media(max-width:920px){.fld input,.fld select,.fld textarea{font-size:16px}}
.fld input:user-invalid,.fld textarea:user-invalid{border-color:#c2410c}
html[data-theme=dark] .fld input:user-invalid,html[data-theme=dark] .fld textarea:user-invalid{border-color:#fb923c}
#quick-contact-form button[type=submit][aria-busy="true"]{opacity:.7;cursor:progress}

/* 8. Bewegung: Anheben nur bei Karten, die man anklicken kann; kuerzere Einblendung */
.card:hover{transform:none;box-shadow:none}
a.card:hover,.card:has(.more):hover,.prod:hover,.next:hover{transform:translateY(-4px);box-shadow:var(--glow)}
.card,.btn,.shop-tile,.tech-grid span,.branchen a,.nav a,.foot-links a{transition-property:border-color,background-color,color,box-shadow,transform,filter;transition-duration:.2s;transition-timing-function:ease-out}
.btn-primary:active,.btn-ghost:active{transform:translateY(0) scale(.98)}
.reveal{transition-duration:.45s}
.tech-grid span:hover{transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .card:hover,a.card:hover,.card:has(.more):hover,.prod:hover,.next:hover,.btn-primary:hover,.shop-tile:hover,.work:hover,.reel figure:hover{transform:none}
}

/* 9. Hinweis-Symbol statt Emoji in den Hinweiskaesten */
.note-ic{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin-right:6px;color:var(--icon)}

@media(max-width:920px){
  .hdr-act .btn,.more,.cont-facts a{min-height:44px}
  .branchen a{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:600px){
  :root{--hdr-h:64px}
  .nav-panel{padding:4px 20px 18px}
}

/* 10. Bildmasse stehen jetzt im Markup (kein Springen beim Laden); Hoehe folgt weiter dem CSS */
:where(img[width][height]){height:auto;object-fit:contain}
.partner-row img{object-fit:contain}  /* Innenabstand am Bild hat die Logos vorher gestaucht */

/* 11. Preise in den drei Paketkarten auf einer Linie: Preis, Hinweis und Knopf
   sitzen unten, der Hinweis ist ueberall gleich hoch */
@media(min-width:921px){
  .pc .amt{margin-top:auto}
  .pc .note{min-height:calc(3 * 1.65em)}
  .pc .btn{margin-top:0}
}
.pkg-more{text-align:center;margin-top:8px}