/* HDV – Hörmann Dienstleistungen und Vertrieb
   Gemeinsame Grundstile. Die Gestaltung der einzelnen Abschnitte steht direkt im HTML.
   Schriften liegen lokal (kein Google-Fonts-Aufruf, gut für den Datenschutz). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #0B0B0C; }
img { max-width: 100%; }
a { color: inherit; }
a:hover { color: inherit; opacity: .85; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #0072BC; outline-offset: 3px;
}
section[id] { scroll-margin-top: 16px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  background: #FFFFFF; color: #0B0B0C; padding: 12px 18px;
  font-family: Inter, system-ui, sans-serif; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Honigtopf-Feld gegen Spam-Bots: für Menschen unsichtbar */
.hp-feld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-hinweis { grid-column: 1 / -1; margin: 0; padding: 14px 16px; font-size: 15px; font-weight: 600; }
.form-hinweis[hidden] { display: none; }
.form-hinweis.ok { background: #E7F6EC; color: #00703A; }
.form-hinweis.fehler { background: #FDE8ED; color: #B8050F; }

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext h2 { font-family: Archivo, sans-serif; font-weight: 800; font-size: 24px; margin: 40px 0 12px; }
.rechtstext p, .rechtstext li { font-size: 17px; line-height: 1.65; color: #333333; }
.rechtstext ul { padding-left: 22px; }

/* NutriGiro-Teaser im Hero */
.ng-teaser { transform: rotate(10deg); transition: transform .2s ease, box-shadow .2s ease; }
.ng-teaser:hover { opacity: 1; transform: rotate(10deg) translateY(-4px) scale(1.02); box-shadow: 0 24px 60px rgba(0,0,0,.55) !important; }
.ng-teaser:hover .ng-cta { background: #0E3A4A !important; }
.ng-teaser:hover .ng-cta svg { transform: translateY(3px); }
.ng-cta svg { transition: transform .2s ease; }
.ng-neu { animation: ng-puls 2.4s ease-in-out infinite; }
@keyframes ng-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,.55); } 60% { box-shadow: 0 0 0 10px rgba(225,29,72,0); } }
@media (prefers-reduced-motion: reduce) { .ng-neu { animation: none; } .ng-teaser:hover { transform: rotate(10deg); } }
@media (max-width: 480px) { .ng-phone { width: 100px !important; padding-right: 12px !important; } }
@media (max-width: 360px) { .ng-phone { display: none !important; } }
.ng-neu, .ng-cta { white-space: nowrap; }
@media (max-width: 480px) { .ng-neu { font-size: 11px !important; padding: 5px 10px !important; } .ng-teaser { max-width: 88% !important; } }

/* ---------- Handy-Version ---------- */
.menu-btn { display: none; }
@media (max-width: 760px) {
  /* Kopfzeile: Logo links, Menü-Knopf rechts, Navigation klappt auf */
  header > div { flex-wrap: nowrap !important; padding: 12px 16px !important; }
  header > div > a img { height: 40px !important; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto; background: transparent; color: #FFFFFF; border: 1px solid #3A3A3E; cursor: pointer; }
  .menu-btn path { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
  .menu-btn[aria-expanded="true"] .mb-1 { transform: translateY(5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .mb-2 { opacity: 0; }
  .menu-btn[aria-expanded="true"] .mb-3 { transform: translateY(-5px) rotate(-45deg); }
  header { position: relative; }
  .hauptnav { display: none !important; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #0B0B0C; border-bottom: 1px solid #222224; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 8px 16px 20px; font-size: 18px !important; }
  .hauptnav.offen { display: flex !important; }
  .hauptnav a { padding: 14px 4px !important; border-bottom: 1px solid #1E1E21; }
  .hauptnav a:last-child { border-bottom: 0; margin-top: 12px; text-align: center; justify-content: center; }

  /* Weniger Leerraum zwischen den Abschnitten */
  section > div[style*="padding: 104px 24px"], section > div[style*="padding: 96px 24px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section > div[style*="padding: 72px 24px"] { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Hero: grosses Logo weg (steht schon in der Kopfzeile), Teaser rückt nach oben */
  .hero-inner { padding: 40px 20px 56px !important; gap: 40px !important; }
  .hero-logo { display: none !important; }
  .hero-inner > div:first-child { gap: 20px !important; }
  .hero-inner p { font-size: 17px !important; }
  .hero-inner > div:last-child { gap: 0 !important; }
  .ng-teaser { margin: 0 auto 16px !important; transform: rotate(4deg); }
  .ng-teaser:hover { transform: rotate(4deg); }

  /* Knöpfe volle Breite, gut zu treffen */
  section a[style*="padding: 17px 28px"], section a[style*="padding: 16px 27px"], section a[style*="padding: 16px 26px"], section a[style*="padding: 15px 25px"] { flex: 1 1 100%; justify-content: center; text-align: center; }

  /* Kontaktformular luftiger am Rand */
  form#kontaktformular { padding: 24px 18px !important; }
  footer > div { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Mini-Teaser in der Kopfzeile (nur Handy) */
.ng-mini { display: none; }
@media (max-width: 760px) {
  .ng-teaser { display: none !important; }
  .hero-inner > div:last-child { display: none !important; }
  .ng-mini {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto; padding: 9px 12px 7px; overflow: hidden;
    background: #FFFBF3; color: #134B5F; text-decoration: none; border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.45); transform: rotate(7deg); min-height: 44px;
  }
  .ng-mini:hover, .ng-mini:focus-visible { opacity: 1; color: #134B5F; }
  .ng-mini img { width: 26px; height: 26px; flex: none; }
  .ng-mini-streifen { position: absolute; left: 0; right: 0; top: 0; height: 4px; display: grid; grid-template-columns: repeat(4, 1fr); }
  .ng-mini-text { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
  .ng-mini-neu { font-family: Archivo, sans-serif; font-weight: 900; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; background: #E11D48; padding: 3px 6px; border-radius: 999px; align-self: flex-start; animation: ng-puls 2.4s ease-in-out infinite; }
  .ng-mini-name { font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
  .ng-mini ~ .menu-btn { margin-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ng-mini-neu { animation: none; } }

/* Handy: Kopfzeile bleibt oben stehen, der Rest scrollt darunter */
@media (max-width: 760px) {
  header { position: sticky !important; top: 0; z-index: 30; }
  section[id], main [id] { scroll-margin-top: 84px; }
}

/* Aufgeklappte Foldables und kleine Tablets (761–1100 px):
   Text und NutriGiro-Karte nebeneinander, grosses Logo aus, Kopfzeile bleibt stehen */
@media (min-width: 761px) and (max-width: 1100px) {
  header { position: sticky !important; top: 0; z-index: 30; }
  section[id], main [id] { scroll-margin-top: 92px; }
  .hero-inner { flex-wrap: nowrap !important; gap: 40px !important; padding-top: 56px !important; padding-bottom: 64px !important; }
  .hero-inner > div:first-child { flex: 1 1 auto !important; }
  .hero-inner > div:last-child { flex: 0 0 330px !important; padding-right: 18px; }
  .ng-teaser { max-width: 312px !important; }
  #top { overflow-x: clip; }
  .ng-neu { font-size: 10px !important; padding: 5px 9px !important; letter-spacing: .1em !important; }
  .ng-teaser img[width="40"] { width: 32px !important; height: 32px !important; }
  .hero-logo { display: none !important; }
  .ng-teaser { max-width: 340px !important; margin: 0 !important; }
  .ng-phone { width: 115px !important; padding-right: 14px !important; }
  header nav { gap: 8px 20px !important; }
}

/* Boxen-Gruppen: 3 Boxen entweder alle nebeneinander oder alle untereinander,
   4 Boxen: 4 nebeneinander, 2 × 2 oder untereinander (nie 2 + 1 oder 3 + 1) */
.boxen-3 {
  grid-template-columns: repeat(auto-fit, minmax(
    max(calc((100% - 2 * var(--bgap)) / 3),
        min(100%, calc((3 * var(--bmin) + 2 * var(--bgap) - 100%) * 999))), 1fr)) !important;
}
.boxen-4 {
  grid-template-columns: repeat(auto-fit, minmax(
    max(calc((100% - 3 * var(--bgap)) / 4),
        min(calc((100% - var(--bgap)) / 2), calc((4 * var(--bmin) + 3 * var(--bgap) - 100%) * 999)),
        min(100%, calc((2 * var(--bmin) + var(--bgap) - 100%) * 999))), 1fr)) !important;
}

/* Sehr schmale Displays (unter 360 px): lange Wörter trennen, Raster einspaltig */
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 359px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } }
@media (max-width: 359px) {
  [style*="repeat(auto-fit"]:not(.boxen-3):not(.boxen-4) { grid-template-columns: 1fr !important; }
}

/* Handy: NutriGiro-Bild auf der Startseite kompakt (Logo und Handy nebeneinander) */
@media (max-width: 760px) {
  #nutrigiro > div { gap: 36px !important; }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] {
    flex: 1 1 100% !important; flex-wrap: nowrap !important; justify-content: center !important;
    gap: 18px !important; padding: 28px 20px 0 !important; overflow: hidden; align-items: flex-end !important;
  }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] > img { width: 72px !important; height: 72px !important; align-self: center; margin-bottom: 28px; }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] > span {
    width: 150px !important; border-width: 6px !important; border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important; transform: none !important; box-shadow: 0 -4px 20px rgba(19,75,95,.18) !important;
    max-height: 230px; overflow: hidden;
  }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] > span img { border-radius: 14px 14px 0 0 !important; }
}

/* Handy: Abschnitte noch kompakter (weniger Weissraum zwischen den Bereichen) */
@media (max-width: 760px) {
  section > div[style*="padding: 104px 24px"], section > div[style*="padding: 96px 24px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  section > div[style*="padding: 72px 24px"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  section > div[style*="gap: 56px"], section > div[style*="gap: 64px"] { gap: 32px !important; }
  section > div[style*="padding: 40px 24px"] { padding-top: 28px !important; padding-bottom: 28px !important; }
}

/* Tablets und aufgeklappte Foldables (761–1180 px): weniger Weissraum, PC-Ansicht bleibt unverändert */
@media (min-width: 761px) and (max-width: 1180px) {
  section > div[style*="padding: 104px 24px"], section > div[style*="padding: 96px 24px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section > div[style*="padding: 72px 24px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  section > div[style*="gap: 56px"], section > div[style*="gap: 64px"] { gap: 40px !important; }
  section > div[style*="padding: 40px 24px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
}

/* Handys quer (niedrige Displays): so kompakt wie hochkant, schmalere Kopfzeile */
@media (orientation: landscape) and (max-height: 500px) {
  section > div[style*="padding: 104px 24px"], section > div[style*="padding: 96px 24px"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  section > div[style*="padding: 72px 24px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
  section > div[style*="gap: 56px"], section > div[style*="gap: 64px"] { gap: 28px !important; }
  section > div[style*="padding: 40px 24px"] { padding-top: 24px !important; padding-bottom: 24px !important; }
  .hero-inner { padding-top: 32px !important; padding-bottom: 40px !important; }
  header > div { padding-top: 8px !important; padding-bottom: 8px !important; }
  header > div > a img { height: 34px !important; }
  header nav a { padding-top: 6px !important; padding-bottom: 6px !important; }
  section[id], main [id] { scroll-margin-top: 60px; }
}

/* Handy: NutriGiro-Bild direkt unter die Überschrift statt ans Ende des Abschnitts */
@media (max-width: 760px) {
  #nutrigiro > div { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 20px !important; }
  #nutrigiro > div > div:first-child { display: contents !important; }
  #nutrigiro > div > div:first-child > p:nth-of-type(1) { order: 1; }
  #nutrigiro > div > div:first-child > h2 { order: 2; }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] { order: 3; margin: 4px 0; }
  #nutrigiro > div > div:first-child > p:nth-of-type(2) { order: 4; }
  #nutrigiro > div > div:first-child > ul { order: 5; }
  #nutrigiro > div > div:first-child > div { order: 6; padding-top: 4px !important; }
}

/* Handy, NutriGiro-Seite: Handy-Bilder (Lagern, Einkaufen) direkt unter die Überschrift */
@media (max-width: 760px) {
  main div:has(> div[style*="flex: 0 1 280px"]) { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 20px !important; }
  main div > div:has(+ div[style*="flex: 0 1 280px"]) { display: contents !important; }
  main div > div:has(+ div[style*="flex: 0 1 280px"]) > * { order: 4; }
  main div > div:has(+ div[style*="flex: 0 1 280px"]) > p:first-child { order: 1; }
  main div > div:has(+ div[style*="flex: 0 1 280px"]) > h2 { order: 2; }
  main div > div[style*="flex: 0 1 280px"] { order: 3; flex: none !important; width: 220px !important; margin: 4px auto 8px !important; }
}

/* Tablets / aufgeklappte Foldables: NutriGiro-Bilder bleiben rechts neben dem Text statt darunter */
@media (min-width: 761px) and (max-width: 1100px) {
  #nutrigiro > div { flex-wrap: nowrap !important; gap: 36px !important; align-items: center !important; }
  #nutrigiro > div > div:first-child { flex: 1 1 auto !important; }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] {
    flex: 0 0 250px !important; flex-direction: column !important; flex-wrap: nowrap !important;
    justify-content: flex-end !important; align-items: center !important; gap: 20px !important;
    padding: 28px 20px 0 !important; overflow: hidden;
  }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] > img { width: 72px !important; height: 72px !important; }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] > span {
    width: 180px !important; border-width: 7px !important; border-radius: 24px 24px 0 0 !important;
    border-bottom: 0 !important; transform: none !important; box-shadow: 0 -4px 20px rgba(19,75,95,.18) !important;
    max-height: 300px; overflow: hidden; flex: none;
  }
  #nutrigiro a[aria-label="Mehr zu NutriGiro"] > span img { border-radius: 16px 16px 0 0 !important; }
  main div:has(> div[style*="flex: 0 1 280px"]) { flex-wrap: nowrap !important; gap: 36px !important; }
  main div > div:has(+ div[style*="flex: 0 1 280px"]) { flex: 1 1 auto !important; }
  main div > div[style*="flex: 0 1 280px"] { flex: 0 0 230px !important; width: 230px !important; margin: 0 !important; }
}

/* Feinschliff nach Gesamtprüfung */
@media (max-width: 760px) {
  .ng-mini { flex-shrink: 0; }
  header > div > a:first-child { flex-shrink: 1; min-width: 0; }
  header > div > a:first-child img { max-width: 100%; height: auto !important; max-height: 40px; }
}
@media (max-width: 380px) {
  .ng-mini { gap: 6px; padding: 8px 10px 6px; }
  .ng-mini img { width: 22px; height: 22px; }
  .ng-mini-name { font-size: 15px; }
  .ng-mini ~ .menu-btn { margin-left: 10px; }
  header > div { gap: 10px !important; }
}
/* Grössere Tippflächen auf Touch-Geräten */
@media (max-width: 1180px) {
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
  #kontakt a[href^="tel:"], #kontakt a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  header nav a { padding-top: 12px !important; padding-bottom: 12px !important; }
  header > div { padding-top: 4px !important; padding-bottom: 4px !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  header > div > a:first-child { min-height: 44px; display: flex !important; align-items: center; }
}