/* ============================================================
   ATG-Gigerl – Menueleisten
   Liegt unter: fileadmin/templates/css/menu.css
   Stand: 17.09.2026

   Ersetzt vollstaendig: menue.css, mediaquery.css, mmenu.css
   sowie die Kopfbereich-Regeln aus design.css und handy.css.

   Aufbau der Datei
   ----------------
    1. Grundgeruest (Kopf, Container, Kleben beim Scrollen)
    2. Kontaktzeile ganz oben
    3. Hauptzeile: Logo, Hauptmenue, Schaltflaechen
    4. Aufklappmenues am Desktop
    5. Produktleiste (zweites Menue)
    6. Mobilmenue (Off-Canvas)
    7. Breakpoints: 1024–1439 / 768–1023 / bis 767 / bis 379

   Vorgehen bei den Breakpoints: Desktop-First.
   Grundwerte = ab 1440px, danach vier max-width-Bloecke.
   Begruendung: Das Design ist kein gleichmaessiges
   Herunterskalieren, sondern wechselt zweimal die Struktur
   (Produktleiste faellt unter 1024px weg, Kontaktzeile unter
   768px). Jede Breite bekommt eigene Werte.

   Kein !important. Alle Klassen mit Praefix "atg-", damit sie
   sich mit dem Bootstrap-Package nicht ins Gehege kommen.
   ============================================================ */


/* ============================================================
   1. GRUNDGERUEST
   ============================================================ */

/* Der Kopf klebt als GANZES beim Scrollen, seit 28.10.2026
   einschliesslich der Kontaktzeile (vorher schob sie sich mit
   einem negativen top aus dem Bild). Die klebende Hoehe steht
   in --atg-sticky-h und ist die Summe der drei Zeilen.

   Einzeln duerfen .atg-headbar und .atg-productbar NICHT sticky
   sein: ein sticky-Element klebt nur innerhalb seines
   Elterncontainers, und .atg-header ist genau so hoch wie der
   Kopf selbst - es gaebe keine Strecke zum Kleben, alles wuerde
   mit nach oben scrollen. Genau dieser Fehler steckte bis zum
   18.09.2026 in der Datei. */
.atg-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: var(--atg-font);
    background: var(--atg-white);
}

/* Innenabstaende und Rahmen zaehlen zur angegebenen Groesse.
   Ohne das waere die Schaltflaeche "Feedback geben" durch ihren
   1px-Rahmen zwei Pixel hoeher als angegeben. */
.atg-header *,
.atg-header *::before,
.atg-header *::after {
    box-sizing: border-box;
}

.atg-container {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--atg-content-max) + 2 * var(--atg-gutter));
    margin: 0 auto;
    padding: 0 var(--atg-gutter);
}

/* Reset der Menuelisten – Bootstrap Reboot gibt ULs einen linken
   Innenabstand, den wir hier nicht wollen.

   WICHTIG: Die Listen werden einzeln aufgezaehlt und NICHT ueber
   ".atg-header ul" angesprochen. Ein Selektor aus Klasse plus
   Element ist spezifischer als eine Klasse allein und wuerde
   jedes spaetere padding wieder ueberschreiben - genau das hat
   den Aufklappmenues ihr Innenpolster genommen und die dritte
   Ebene um sieben Pixel nach oben verschoben. */
.atg-nav__list,
.atg-nav__sub,
.atg-pnav__list,
.atg-pnav__sub,
.atg-panel__list,
.atg-panel__sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.atg-header a {
    text-decoration: none;
    color: inherit;
}

/* Sichtbarer Fokusrahmen fuer Tastaturbedienung. */
.atg-header a:focus-visible,
.atg-header button:focus-visible {
    outline: 2px solid var(--atg-accent);
    outline-offset: 2px;
}

/* Nur fuer Screenreader */
.atg-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   2. KONTAKTZEILE GANZ OBEN
   ------------------------------------------------------------
   Scrollt bewusst mit weg. Wuerde sie mitkleben, waeren
   dauerhaft 216 statt 174 Pixel belegt.
   ============================================================ */

.atg-topbar {
    height: var(--atg-topbar-h);
    background: var(--atg-topbar);
    color: var(--atg-on-dark-soft);
    font-size: var(--atg-fs-topbar);
    line-height: 1;
}

.atg-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.atg-topbar__right {
    display: flex;
    align-items: center;
    gap: 28px;
}

.atg-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--atg-on-dark-soft);
    transition: color var(--atg-transition);
}

a.atg-topbar__item:hover {
    color: var(--atg-accent);
}

.atg-topbar__item svg {
    flex: none;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
}


/* ============================================================
   3. HAUPTZEILE: LOGO, HAUPTMENUE, SCHALTFLAECHEN
   ============================================================ */

/* position: relative nur, damit z-index greift - die weisse Zeile
   muss ueber der Produktleiste liegen, sonst verschwinden die
   Aufklappmenues des Hauptmenues dahinter. */
.atg-headbar {
    position: relative;
    z-index: 2;
    height: var(--atg-headbar-h);
    background: var(--atg-white);
}

.atg-headbar__inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.atg-logo {
    display: block;
    flex: none;
    margin-right: auto;
}

.atg-logo img {
    display: block;
    height: 70px;
    width: auto;
}

/* ---------- Hauptmenue ---------- */

/* Volle Zeilenhoehe, damit die Aufklappmenues an der Unterkante
   der Leiste ansetzen und nicht direkt unter der Schrift. */
.atg-nav {
    align-self: stretch;
    height: 100%;
}

.atg-nav__list {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 36px;
}

.atg-nav__list > li {
    position: relative;
    display: flex;
    align-items: center;
}

.atg-nav__list > li > a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: var(--atg-fs-nav);
    font-weight: 400;
    color: var(--atg-ink);
    white-space: nowrap;
    transition: color var(--atg-transition);
}

/* Beim Ueberfahren erscheint ein duenner tuerkiser Strich knapp
   unter der Schrift – dieselbe Bildsprache wie beim aktiven
   Punkt der Produktleiste. Dauerhaft sichtbar ist nichts, es
   entsteht also keine Unruhe. */
.atg-nav__list > li > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: calc(50% + 15px);
    height: 2px;
    background: var(--atg-accent);
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity var(--atg-transition), transform var(--atg-transition);
}

.atg-nav__list > li > a:hover,
.atg-nav__list > li:focus-within > a,
.atg-nav__list > li.is-active > a {
    color: var(--atg-accent-deep);
}

.atg-nav__list > li > a:hover::after,
.atg-nav__list > li:focus-within > a::after,
.atg-nav__list > li.is-active > a::after {
    opacity: 1;
    transform: scaleX(1);
}

/* ---------- Schaltflaeche "Feedback geben" ---------- */

/* Zwei Schaltflaechen nebeneinander: links "Zum Onlineshop"
   gefuellt, rechts "Feedback geben" als Umriss. Dasselbe Paar
   wie im Abschnitt Service - beide gehen beim Darueberfahren
   auf dieselbe tuerkise Flaeche. */
.atg-cta-paar {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--atg-cta-gap);
    margin-left: 36px;
}

/* ".atg-header" steht bei den Farben mit davor, und zwar
   absichtlich: weiter oben setzt ".atg-header a { color:
   inherit }" die Schriftfarbe aller Links im Kopf. Dieser
   Selektor ist aus Klasse plus Element gebaut und damit
   spezifischer als eine Klasse allein - ".atg-cta--voll"
   wuerde verlieren, und die weisse Schrift des gefuellten
   Knopfes bliebe dunkel auf dunklem Grund, also unsichtbar.
   Beim Umriss-Knopf faellt dasselbe nicht auf, weil der
   geerbte Wert zufaellig ebenfalls dunkel ist. */
.atg-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    height: var(--atg-cta-h);
    padding: 0 var(--atg-cta-pad);
    border: var(--atg-cta-line-w) solid var(--atg-cta-line);
    border-radius: var(--atg-radius);
    font-size: var(--atg-cta-fs);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--atg-transition),
                border-color var(--atg-transition),
                color var(--atg-transition);
}

.atg-header .atg-cta {
    color: var(--atg-cta-line);
}

.atg-header .atg-cta--voll {
    background: var(--atg-cta-fill-bg);
    border-color: var(--atg-cta-fill-bg);
    color: var(--atg-cta-fill-fg);
}

.atg-header .atg-cta:hover,
.atg-header .atg-cta:focus-visible {
    background: var(--atg-cta-hover);
    border-color: var(--atg-cta-hover);
    color: var(--atg-cta-fill-fg);
}

/* Pfeil nach schraeg oben: das Ziel liegt auf einer anderen
   Website und oeffnet in einem neuen Tab. */
.atg-cta__ico {
    flex: none;
    width: var(--atg-cta-ico);
    height: var(--atg-cta-ico);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Icon-Schaltflaechen (Mail, Telefon, Burger) ----------
   Am Desktop ausgeblendet, ab 1023px sichtbar. */

.atg-iconbtn {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--atg-radius);
    background: var(--atg-petrol);
    color: var(--atg-white);
    cursor: pointer;
    transition: background-color var(--atg-transition);
}

.atg-iconbtn:hover {
    background: var(--atg-accent-deep);
}

.atg-iconbtn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.atg-iconbtn + .atg-iconbtn {
    margin-left: 8px;
}

/* Feedback, Mail und Telefon in Logo-Tuerkis, damit sie sich vom
   Burger absetzen und als Direktkontakt lesbar sind. */
.atg-iconbtn--feedback,
.atg-iconbtn--mail,
.atg-iconbtn--phone {
    background: var(--atg-accent);
    color: var(--atg-petrol);
}

.atg-iconbtn--feedback:hover,
.atg-iconbtn--mail:hover,
.atg-iconbtn--phone:hover {
    background: var(--atg-accent-deep);
    color: var(--atg-white);
}

/* Burger: drei Balken, werden im geoeffneten Zustand zum Kreuz. */
.atg-burger__box {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.atg-burger__box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .22s ease, opacity .12s ease, top .22s ease;
}

.atg-burger__box span:nth-child(1) { top: 0; }
.atg-burger__box span:nth-child(2) { top: 6px; }
.atg-burger__box span:nth-child(3) { top: 12px; }

.atg-burger[aria-expanded="true"] .atg-burger__box span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.atg-burger[aria-expanded="true"] .atg-burger__box span:nth-child(2) {
    opacity: 0;
}

.atg-burger[aria-expanded="true"] .atg-burger__box span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}


/* ============================================================
   4. AUFKLAPPMENUES AM DESKTOP
   ------------------------------------------------------------
   Oeffnen bei Mauszeiger UND bei Tastaturfokus (:focus-within).
   Im Bestand ging nur :hover – per Tastatur war das Menue
   damit nicht bedienbar.
   ============================================================ */

.atg-nav__sub {
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 20;
    min-width: 250px;
    max-width: 340px;
    padding: 6px 0;
    background: var(--atg-white);
    border: 1px solid var(--atg-line);
    border-radius: var(--atg-radius);
    box-shadow: 0 12px 28px rgba(16, 40, 52, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--atg-transition), transform var(--atg-transition), visibility var(--atg-transition);
}

/* Aufklappen. Die zweite Zeile ist fuer die dritte Ebene
   zustaendig – ohne sie bleibt ein Untermenue im Untermenue
   unsichtbar, obwohl TYPO3 es ausgibt. */
.atg-nav__list > li:hover > .atg-nav__sub,
.atg-nav__list > li:focus-within > .atg-nav__sub,
.atg-nav__sub li:hover > .atg-nav__sub,
.atg-nav__sub li:focus-within > .atg-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.atg-nav__sub li {
    position: relative;
}

.atg-nav__sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    font-size: 16px;
    color: var(--atg-ink);
    transition: background-color var(--atg-transition), color var(--atg-transition);
}

.atg-nav__sub a:hover,
.atg-nav__sub li:focus-within > a {
    background: #F2F6F8;
    color: var(--atg-accent-deep);
}

.atg-nav__sub li.is-active > a {
    color: var(--atg-accent-deep);
    font-weight: 600;
}

/* Punkte mit einer weiteren Ebene bekommen einen Pfeil.
   Im Bestand war dafuer eine Klasse vorgesehen, die das
   TypoScript nie ausgegeben hat – der Pfeil erschien nie. */
.atg-nav__sub li.has-sub > a::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
}

/* Dritte Ebene: klappt seitlich auf.
   Das negative top gleicht exakt das Innenpolster von 6px aus,
   damit der erste Eintrag auf gleicher Hoehe steht wie der
   Punkt, zu dem er gehoert. */
.atg-nav__sub .atg-nav__sub {
    top: -6px;
    left: 100%;
}

/* Wuerde ein Aufklappmenue rechts aus dem Fenster laufen, setzt
   menu.js diese Klasse und es oeffnet zur anderen Seite.
   Betrifft vor allem die hinteren Punkte der Produktleiste. */
.atg-nav__sub.atg-sub--links {
    right: -18px;
    left: auto;
}

.atg-nav__sub .atg-nav__sub.atg-sub--links {
    right: 100%;
    left: auto;
}


/* ============================================================
   5. PRODUKTLEISTE (ZWEITES MENUE)
   ============================================================ */

.atg-productbar {
    position: relative;
    z-index: 1;
    height: var(--atg-productbar-h);
    background: var(--atg-petrol);
}

/* Die Hoehe muss durchgereicht werden, sonst ist der Link nur so
   hoch wie seine Schrift – der Unterstrich am aktiven Punkt saesse
   dann direkt unter dem Text statt am Boden der Leiste. */
.atg-productbar > .atg-container,
.atg-pnav,
.atg-pnav__list {
    height: 100%;
}

.atg-pnav__list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
}

/* Sieben lange deutsche Begriffe muessen in einer Zeile bleiben.
   space-between verteilt den Rest gleichmaessig – damit sitzt der
   erste Punkt buendig am linken und der letzte am rechten
   Containerrand. Der gap ist nur die Untergrenze. */

.atg-pnav__list > li {
    position: relative;
    display: flex;
    align-items: stretch;
}

.atg-pnav__list > li > a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: var(--atg-fs-product);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--atg-on-dark);
    transition: color var(--atg-transition);
}

.atg-pnav__list > li > a:hover,
.atg-pnav__list > li:focus-within > a {
    color: var(--atg-accent);
}

/* Aktiver Punkt: tuerkis plus Unterstrich am Leistenboden. */
.atg-pnav__list > li.is-active > a {
    color: var(--atg-accent);
}

.atg-pnav__list > li.is-active > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--atg-accent);
}

/* Aufklappmenue der Produktleiste – dunkel, passend zur Leiste. */
.atg-pnav__sub {
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 20;
    min-width: 250px;
    max-width: 340px;
    padding: 6px 0;
    background: var(--atg-petrol);
    border-radius: 0 0 var(--atg-radius) var(--atg-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--atg-transition), transform var(--atg-transition), visibility var(--atg-transition);
}

.atg-pnav__list > li:hover > .atg-pnav__sub,
.atg-pnav__list > li:focus-within > .atg-pnav__sub,
.atg-pnav__sub li:hover > .atg-pnav__sub,
.atg-pnav__sub li:focus-within > .atg-pnav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.atg-pnav__sub li {
    position: relative;
}

.atg-pnav__sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    font-size: 16px;
    color: var(--atg-on-dark);
    transition: background-color var(--atg-transition), color var(--atg-transition);
}

.atg-pnav__sub a:hover,
.atg-pnav__sub li:focus-within > a {
    background: rgba(255, 255, 255, .08);
    color: var(--atg-accent);
}

.atg-pnav__sub li.is-active > a {
    color: var(--atg-accent);
    font-weight: 600;
}

.atg-pnav__sub li.has-sub > a::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
}

/* Dritte Ebene: klappt seitlich auf, buendig zum Ueberpunkt
   (siehe Erklaerung beim Hauptmenue). */
.atg-pnav__sub .atg-pnav__sub {
    top: -6px;
    left: 100%;
}

.atg-pnav__sub.atg-sub--links {
    right: -18px;
    left: auto;
}

.atg-pnav__sub .atg-pnav__sub.atg-sub--links {
    right: 100%;
    left: auto;
}


/* ============================================================
   6. MOBILMENUE (OFF-CANVAS)
   ------------------------------------------------------------
   Ersetzt mmenu. Liegt direkt unter der weissen Zeile und
   fuellt den Rest des Bildschirms. Die genaue Position setzt
   menu.js beim Oeffnen, weil die Kontaktzeile darueber beim
   Scrollen wegfaellt.
   ============================================================ */

.atg-panel {
    position: fixed;
    top: var(--atg-headbar-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--atg-white);
    -webkit-overflow-scrolling: touch;
}

.atg-panel.is-open {
    display: block;
}

.atg-panel__inner {
    padding: 0 var(--atg-gutter) 40px;
}

.atg-panel__label {
    margin: 0;
    padding: 26px 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atg-muted);
}

/* ---------- Menuepunkte im Panel ---------- */

/* Der Menuepunkt selbst ist der Flex-Container: Link und
   Aufklapp-Schaltflaeche nebeneinander, die Unterebene bricht
   als volle Zeile darunter um. So braucht es kein zusaetzliches
   Wrapper-Element, das TYPO3 gar nicht ausgeben wuerde. */
.atg-panel__list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 1px solid var(--atg-line);
}

.atg-panel__list > li > a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 55px;
    padding: 8px 0;
    font-size: 16px;
    color: var(--atg-petrol);
    transition: color var(--atg-transition);
}

/* Derselbe Farbwechsel wie im grossen Menue – wirkt am Handy
   auch beim Antippen, nicht nur bei Maus. */
.atg-panel__list > li > a:hover,
.atg-panel__list > li > a:active,
.atg-panel__list > li > a:focus-visible,
.atg-panel__list > li.is-active > a {
    color: var(--atg-accent-deep);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--atg-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* Aufklapp-Schaltflaeche. Wird von menu.js eingefuegt, aber nur
   bei Punkten, die im Seitenbaum tatsaechlich Unterseiten haben. */
.atg-panel__toggle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--atg-muted);
    cursor: pointer;
    transition: color var(--atg-transition);
}

.atg-panel__toggle:hover,
.atg-panel__toggle:active {
    color: var(--atg-accent-deep);
}

.atg-panel__toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform .2s ease;
}

.atg-panel__toggle[aria-expanded="true"]::before {
    transform: rotate(135deg) translate(-3px, 3px);
}

/* ---------- Unterebene im Panel ---------- */

.atg-panel__sub {
    flex: 0 0 100%;
    display: none;
    padding-bottom: 6px;
}

.atg-panel__sub.is-open {
    display: block;
}

.atg-panel__sub > li + li {
    border-top: 1px solid var(--atg-line);
}

/* Auch hier ist der Menuepunkt der Flex-Container, damit eine
   dritte Ebene als eigene Zeile darunter aufklappen kann. */
.atg-panel__sub > li {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.atg-panel__sub > li > a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 49px;
    padding: 6px 0 6px 16px;
    font-size: 15px;
    color: #4A5860;
    transition: color var(--atg-transition);
}

/* Dritte Ebene: eine Stufe weiter eingerueckt */
.atg-panel__sub .atg-panel__sub > li > a {
    min-height: 45px;
    padding-left: 32px;
    font-size: 14px;
}

.atg-panel__sub > li > a:hover,
.atg-panel__sub > li > a:active,
.atg-panel__sub > li > a:focus-visible,
.atg-panel__sub > li.is-active > a {
    color: var(--atg-accent-deep);
}

.atg-panel__sub > li.is-active > a {
    font-weight: 600;
}

/* ---------- Knopfpaar unter den Menuepunkten ----------
   Dieselben beiden Schaltflaechen wie im Kopf der grossen
   Breiten. Bei Tablet-Breite nebeneinander, am Handy
   untereinander (--atg-pcta-dir). */

.atg-panel__cta {
    display: flex;
    flex-direction: var(--atg-pcta-dir);
    gap: var(--atg-pcta-gap);
    margin-top: var(--atg-pcta-top);
}

.atg-panel__cta .atg-cta {
    flex: var(--atg-pcta-flex);
}


/* Solange das Panel offen ist, soll die Seite dahinter nicht
   mitscrollen. menu.js setzt die Klasse am <body>. */
body.atg-panel-open {
    overflow: hidden;
}


/* ============================================================
   7. BREAKPOINT 1024–1439px
   ============================================================ */

@media (max-width: 1439.98px) {

    :root {
        --atg-topbar-h:      40px;
        --atg-headbar-h:     94px;
        --atg-productbar-h:  58px;
        --atg-sticky-h:     192px;

        --atg-fs-topbar:     13px;

        /* ACHTUNG, hier weicht die Umsetzung bewusst von der
           starren Vorgabe "jede Breite ein fester Wert" ab.

           Dieser Bereich ist 416px breit - von 1024 bis 1439px.
           Bei 1280px, der Breite der Design-Vorlage, stehen
           beide Leisten genau so, wie sie sollen. Bei 1024px
           fehlen rund 260px: die sieben Begriffe der
           Produktleiste wuerden umbrechen, und in der weissen
           Zeile wuerde die Schaltflaeche "Feedback geben" aus
           dem Container laufen.

           Mit festen Werten ist das nicht loesbar. Deshalb
           laufen Seitenrand, Logohoehe, Schriftgroessen und
           Abstaende zwischen 1024 und 1280px gleitend mit und
           stehen ab 1280px auf den Werten der Vorlage.

           Wer einen Wert aendert, aendert BEIDE Enden: die
           Untergrenze gilt bei 1024px, die Obergrenze ab
           1280px. Die Zahl in der Mitte ist nur die Gerade
           dazwischen. */
        --atg-gutter:        clamp(32px, 18.75vw - 160px, 80px);
        --atg-fs-nav:        clamp(15px, 0.3906vw + 11px, 16px);
        --atg-fs-product:    clamp(14px, 0.78125vw + 6px, 15px);
        --atg-abstand-nav:   clamp(16px, 4.688vw - 32px, 28px);

        --atg-cta-h:         39px;
        --atg-cta-pad:       clamp(14px, 1.5625vw - 2px, 18px);
        --atg-cta-fs:        14px;
        --atg-cta-gap:       10px;
        --atg-cta-ico:       16px;
    }

    .atg-logo img { height: clamp(50px, 2.344vw + 26px, 56px); }

    .atg-nav__list { gap: var(--atg-abstand-nav); }

    .atg-cta-paar { margin-left: var(--atg-abstand-nav); }

    .atg-nav__list > li > a::after { top: calc(50% + 14px); }

    .atg-topbar__right { gap: 24px; }
}


/* ============================================================
   8. BREAKPOINT 768–1023px
   ------------------------------------------------------------
   Beide Menueleisten verschwinden, ebenso die Kontaktzeile
   (seit 28.10.2026) und der Text-Knopf "Feedback geben". Es
   bleiben Logo, Mail, Telefon und der Burger. Die beiden
   Schaltflaechen stehen jetzt im Burger-Menue.
   ============================================================ */

@media (max-width: 1023.98px) {

    :root {
        --atg-topbar-h:       0px;
        --atg-headbar-h:     92px;
        --atg-productbar-h:   0px;
        --atg-sticky-h:      92px;
        --atg-gutter:        30px;

        --atg-cta-h:         44px;
        --atg-cta-pad:       20px;
        --atg-cta-fs:        15px;
        --atg-cta-ico:       17px;
    }

    .atg-topbar,
    .atg-nav,
    .atg-productbar {
        display: none;
    }

    .atg-logo img { height: 60px; }

    /* Das Knopfpaar steht hier nicht mehr im Kopf, sondern
       unter den Menuepunkten im Burger-Menue. */
    .atg-cta-paar { display: none; }

    .atg-iconbtn { display: inline-flex; }

    /* Die Sprechblase entfaellt - "Feedback geben" steht als
       Knopf im Burger-Menue. Im Kopf bleiben Mail und Telefon. */
    .atg-iconbtn--feedback { display: none; }

    .atg-iconbtn--mail,
    .atg-iconbtn--phone { display: inline-flex; }

    .atg-iconbtn + .atg-iconbtn { margin-left: 8px; }

    .atg-burger { width: 48px; height: 48px; }
}


/* ============================================================
   9. BREAKPOINT bis 767px
   ------------------------------------------------------------
   Kontaktzeile faellt weg, dafuer kommen Feedback-, Mail- und
   Telefon-Schaltflaeche neben den Burger. Der Text-Knopf
   "Feedback geben" wird hier zur Sprechblase (29.09.2026).

   Vier Symbole und das Logo passen bei 380px nur, wenn beide
   kleiner werden. Logo, Symbolgroesse und Abstand laufen
   deshalb zwischen 380 und 767px gleitend mit (Tokens
   --atg-hb-* in tokens.css): bei 767px die alten Werte 46/44/8,
   bei 380px 40/40/6. Unter 380px feste Werte, siehe Abschnitt 10.
   ============================================================ */

@media (max-width: 767.98px) {

    :root {
        --atg-topbar-h:       0px;
        --atg-headbar-h:     78px;
        --atg-productbar-h:   0px;
        --atg-sticky-h:      78px;
        --atg-gutter:        20px;

        /* Am Handy stehen die beiden Knoepfe im Burger-Menue
           untereinander, jeder ueber die volle Breite. */
        --atg-pcta-dir:      column;
        --atg-pcta-flex:     0 0 auto;
    }

    .atg-logo img { height: var(--atg-hb-logo-h); }

    .atg-iconbtn--mail,
    .atg-iconbtn--phone { display: inline-flex; }

    .atg-iconbtn {
        width: var(--atg-hb-icon);
        height: var(--atg-hb-icon);
    }

    .atg-iconbtn + .atg-iconbtn { margin-left: var(--atg-hb-icon-gap); }

    .atg-iconbtn svg {
        width: 20px;
        height: 20px;
    }
}


/* ============================================================
   10. BREAKPOINT bis 379px
   ------------------------------------------------------------
   Logo, drei Schaltflaechen und Seitenabstand passen auf einem
   iPhone SE (375px) sonst nicht nebeneinander.
   ============================================================ */

@media (max-width: 379.98px) {

    :root {
        --atg-headbar-h:     72px;
        --atg-sticky-h:      72px;
        --atg-gutter:        16px;
    }

    /* Logo, Symbole und Abstand kommen aus --atg-hb-* in
       tokens.css (unter 380px: 40 / 38 / 4). */
}