/* =========================================================================
   QUADRONET Layout - Kopfleiste, Hauptnavigation, Burgermenue
   -------------------------------------------------------------------------
   Aus dem Eisberg-Entwurf uebernommen. Drei Stufen:
     ab 1181 px   eine Zeile, Kacheln mit Nummer
     761-1180 px  Logo oben, Kacheln darunter in einer Zeile; Schrift,
                  Abstaende und Innenraender wachsen mit der Fensterbreite
                  (clamp aus rem + vw), Umbruch nur noch als Notnagel
     bis  760 px  Burgermenue (nur wenn Skripte laufen - sonst bleibt die
                  umbrechende Fassung stehen und alles ist erreichbar)

   Abweichungen vom Entwurf, beide wegen TYPO3:
   - Farben je Menuepunkt als Klasse f-0 ... f-5 (Seitenfeld
     "Navigationsfarbe") statt style="--f:...": CSP ohne 'unsafe-inline'.
   - Treppe der Untermenues per :nth-child statt style="--i:...".
   - Die Kopfhoehe heisst --qn-ankerabstand (setzt base.js), nicht --kopfh.
   ========================================================================= */

@property --kopf {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@layer qn.theme {

  /* ----- Farben der Menuepunkte ----------------------------------------
     "Standard" (f-0) setzt KEINE Farbe:
     - Hauptpunkte bekommen sie dann nach Position, wie in der Vorlage
       (01 Orange, 02 Hellorange, 03 Gold, 04 Petrol, 05 Blaugrau,
       ab 06 wieder Orange);
     - Untermenuepunkte erben die Farbe ihres Hauptpunkts.
     Eine im Seitenfeld gewaehlte Farbe (f-1 ... f-6) geht immer vor -
     die Regeln dafuer stehen NACH den Positionsregeln und haben dieselbe
     Spezifitaet. */
  .navi > li                  { --f: #FF8800; }
  .navi > li:nth-child(2)     { --f: #FFA94D; }
  .navi > li:nth-child(3)     { --f: #D9A441; }
  .navi > li:nth-child(4)     { --f: #79B0C0; }
  .navi > li:nth-child(5)     { --f: #95A9BE; }

  :is(.navi, .unter) > li.f-1 { --f: #FFA94D; }   /* Hellorange - Webdesign */
  :is(.navi, .unter) > li.f-2 { --f: #D9A441; }   /* Gold - Referenzen */
  :is(.navi, .unter) > li.f-3 { --f: #79B0C0; }   /* Petrol - Fotografie, Hilfe */
  :is(.navi, .unter) > li.f-4 { --f: #95A9BE; }   /* Blaugrau - Programmierung, Agentur */
  :is(.navi, .unter) > li.f-5 { --f: #7FB6A6; }   /* Gruen - Hosting */
  :is(.navi, .unter) > li.f-6 { --f: #FF8800; }   /* Orange (fest) */

  /* ----- Leiste: bleibt oben stehen und schrumpft ----------------------
     KEIN backdrop-filter: er macht die Leiste zum Bezugsrahmen fuer
     position:fixed - das Burger-Panel war dann 49 px hoch statt
     bildschirmhoch. */
  .kopf {
    --kopf: 1;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--carbon);
    border-bottom: 1px solid rgba(255, 169, 77, calc(.10 + .22 * (1 - var(--kopf))));
    /* Der Schatten waechst, waehrend die Leiste zusammenfaehrt. */
    box-shadow: 0 calc(6px + 10px * (1 - var(--kopf))) calc(18px + 22px * (1 - var(--kopf)))
                -12px rgba(0, 0, 0, calc(.35 + .3 * (1 - var(--kopf))));
  }

  .kopf__reihe {
    display: flex;
    align-items: center;
    gap: clamp(.8rem, 2.4vw, 2rem);
    padding-block: calc(.3rem + 1rem * var(--kopf));
  }

  .kopf__marke { display: block; flex: none; line-height: 0; }
  /* Das breite Logo (600 x 68) wird ueber die HOEHE gefuehrt: 28 px oben,
     beim Zusammenfahren bis 17 px. Breite folgt (max. ~247 px). */
  .kopf__marke img { height: calc(16px + 12px * var(--kopf)); width: auto; }

  .kopf__navi { margin-left: auto; min-width: 0; }

  .navi {
    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
    counter-reset: np;
  }
  .navi > li { flex: 0 1 auto; min-width: 0; counter-increment: np; }

  /* ----- Parallelogramm-Kachel ----------------------------------------- */
  .kopf a.np {
    position: relative;
    display: block;
    text-decoration: none;
    padding: calc(.24rem + .32rem * var(--kopf)) clamp(.95rem, 1.5vw, 1.5rem)
             calc(.24rem + .32rem * var(--kopf)) clamp(.6rem, 1vw, 1rem);
    transform: skewX(calc(-1 * var(--winkel)));
    background: #1A2128;
    border: 1px solid rgba(233, 238, 242, .14);
    border-bottom: 2px solid var(--f);
    box-shadow: var(--sch-nah);
    transition: background .3s, border-color .3s;
  }
  /* Die Kachel erbt --f vom li. */
  .kopf a.np > span { display: block; transform: skewX(var(--winkel)); }

  .kopf .nr {
    font-size: calc(.5rem + .12rem * var(--kopf));
    letter-spacing: .2em;
    line-height: 1.6;
    color: var(--hell-2);
    font-variant-numeric: tabular-nums;
  }
  .kopf .nr::before { content: counter(np, decimal-leading-zero); }

  .kopf .tt {
    font-size: calc(.63rem + .1rem * var(--kopf));
    font-weight: 500;
    letter-spacing: .07em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hell);
  }

  /* Hover nur bei echter Maus/Trackpad: Touchgeraete "kleben" :hover nach
     dem Antippen fest - die Kachel bliebe farbig, das Untermenue offen.
     Am Touchgeraet zeigt li.ist-offen (theme.js) den Zustand. (24.10.2026) */
  @media (hover: hover) {
    .kopf a.np:hover { background: var(--f); border-color: var(--f); }
    .kopf a.np:hover :is(.tt, .nr) { color: #0D1419; }
  }
  .kopf a.np:focus-visible,
  .kopf .navi > li.ist-offen > a.np { background: var(--f); border-color: var(--f); }
  .kopf a.np:focus-visible :is(.tt, .nr),
  .kopf .navi > li.ist-offen > a.np :is(.tt, .nr) { color: #0D1419; }
  .kopf .navi > li.ist-offen > .np .tt::after { border-color: #0D1419; }

  /* ----- Aktiver Hauptpunkt: ganz in seiner Farbe ---------------------
     li.ist-aktiv setzt NaviPunkt.html fuer den Hauptpunkt, in dessen Zweig
     die aktuelle Seite liegt ("Home" nur auf der Startseite selbst).
     Nur Flaeche und Schriftfarbe - keine dickere Kante, damit Leiste und
     Untermenues nicht springen. Vorlesesoftware bekommt aria-current.
     Schrift #0D1419 auf allen Navigationsfarben >= 7:1.
     Rueckweg: diesen Block loeschen. (24.10.2026) */
  .kopf .navi > li.ist-aktiv > a.np { background: var(--f); border-color: var(--f); }
  .kopf .navi > li.ist-aktiv > a.np :is(.tt, .nr) { color: #0D1419; }
  .kopf .navi > li.ist-aktiv.hat-unter > .np .tt::after { border-color: #0D1419; }

  .kopf__tel {
    margin-left: .5rem;
    align-self: center;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: .04em;
    font-size: calc(.78rem + .06rem * var(--kopf));
    color: var(--orange-hell);
  }
  .kopf__tel:hover { color: var(--hell); }

  /* ----- Untermenues: gegenlaeufige Schraege, Treppe nach rechts ------- */
  .kopf li.hat-unter { position: relative; }
  .kopf .unter {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    min-width: max-content;
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition: opacity .22s ease, translate .22s ease, visibility .22s;
  }
  /* Oeffnen: Maus per :hover, Tastatur per :focus-within, Touch per
     li.ist-offen (theme.js: 1. Antippen oeffnet, 2. Antippen oeffnet die
     Seite - nach dem Vorbild Edesheim). */
  .kopf li.hat-unter:focus-within > .unter,
  .kopf li.hat-unter.ist-offen > .unter { opacity: 1; visibility: visible; translate: 0 0; }
  @media (hover: hover) {
    .kopf li.hat-unter:hover > .unter { opacity: 1; visibility: visible; translate: 0 0; }
  }
  /* Escape schliesst auch ein per Tastatur offenes Untermenue (WCAG 1.4.13):
     theme.js setzt li.ist-zu, bis der Fokus den Punkt verlaesst. */
  .kopf li.hat-unter.ist-zu > .unter { opacity: 0; visibility: hidden; translate: 0 -8px; }

  /* Letzter Menuepunkt (Kontakt): Untermenue rechtsbuendig verankern.
     Linksbuendig ragte es bei 1181-1272 px ueber den Fensterrand - auch
     unsichtbar zaehlt es zur Scrollbreite (3-7 px Querscrollen), sichtbar
     wurde es am Rand abgeschnitten. Die Treppe bleibt gleich, weil alle
     Eintraege ohnehin an einer gemeinsamen rechten Kante enden.
     Rueckweg: diese Regel loeschen. (23.10.2026, Playwright 761-1700 px) */
  .kopf .navi > li:last-child > .unter { left: auto; right: 0; }

  .kopf .unter li:nth-child(2) { margin-left: 11px; }
  .kopf .unter li:nth-child(3) { margin-left: 22px; }
  .kopf .unter li:nth-child(4) { margin-left: 33px; }
  .kopf .unter li:nth-child(5) { margin-left: 44px; }
  .kopf .unter li:nth-child(6) { margin-left: 55px; }
  .kopf .unter li:nth-child(n+7) { margin-left: 66px; }

  /* Zusammenhaengend: kein Abstand, keine doppelten Raender; nur der
     letzte Eintrag traegt die farbige Kante. */
  .kopf .unter a {
    display: block;
    text-decoration: none;
    padding: .46rem 1.15rem .46rem .8rem;
    background: #161D25;
    border: 1px solid rgba(233, 238, 242, .16);
    transform: skewX(var(--winkel));
    transition: background .25s, border-color .25s;
  }
  .kopf .unter li + li a { border-top: 0; }
  .kopf .unter li:last-child a { border-bottom: 2px solid var(--f, rgba(214, 232, 244, .8)); }
  .kopf .unter a > span {
    display: block;
    transform: skewX(calc(-1 * var(--winkel)));
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hell);
  }
  @media (hover: hover) {
    .kopf .unter a:hover { background: var(--f, #D6E8F4); border-color: var(--f, #D6E8F4); }
    .kopf .unter a:hover > span { color: #0D1419; }
  }
  .kopf .unter a:focus-visible,
  .kopf .unter a:active { background: var(--f, #D6E8F4); border-color: var(--f, #D6E8F4); }
  .kopf .unter a:focus-visible > span,
  .kopf .unter a:active > span { color: #0D1419; }
  .kopf .unter a[aria-current="page"] > span { color: var(--orange-hell); }

  /* Pfeil am Punkt mit Untermenue */
  .kopf li.hat-unter > .np .tt::after {
    content: "";
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-left: .6em;
    vertical-align: .18em;
    border-right: 1.5px solid var(--orange-hell);
    border-bottom: 1.5px solid var(--orange-hell);
    transform: rotate(45deg);
    transition: transform .22s;
  }
  .kopf li.hat-unter:focus-within > .np .tt::after,
  .kopf li.hat-unter.ist-offen > .np .tt::after { transform: rotate(225deg); vertical-align: .32em; }
  @media (hover: hover) {
    .kopf li.hat-unter:hover > .np .tt::after { transform: rotate(225deg); vertical-align: .32em; }
  }

  /* ----- Burger-Knopf: dasselbe Parallelogramm ------------------------- */
  .burger {
    display: none;
    margin-left: auto;
    position: relative;
    padding: .62rem .95rem .62rem .8rem;
    cursor: pointer;
    background: #1A2128;
    border: 1px solid rgba(233, 238, 242, .16);
    border-bottom: 2px solid var(--orange);
    transform: skewX(calc(-1 * var(--winkel)));
  }
  .burger i {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px 0;
    background: var(--hell);
    transform: skewX(var(--winkel));
    transition: transform .25s, opacity .2s;
  }
  html.nav-offen .burger i:nth-child(1) { transform: skewX(var(--winkel)) translateY(6px) rotate(45deg); }
  html.nav-offen .burger i:nth-child(2) { opacity: 0; }
  html.nav-offen .burger i:nth-child(3) { transform: skewX(var(--winkel)) translateY(-6px) rotate(-45deg); }
  .burger:focus-visible { outline: 2px solid var(--orange-hell); outline-offset: 3px; }

  html.nav-offen { overflow: hidden; }

  /* ----- Schrumpfen beim Scrollen: reines CSS ---------------------------
     Nur wo der Browser scroll-getriebene Animationen kann und Bewegung
     erwuenscht ist. Sonst bleibt die Leiste einfach gross. */
  @keyframes kopf-schrumpft { from { --kopf: 1; } to { --kopf: .12; } }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .kopf {
        animation: kopf-schrumpft 1s linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 260px;
      }
    }
  }

  @media (max-width: 1500px) { .kopf__tel { display: none; } }

  /* ----- Schmale Fenster: Logo oben, Kacheln darunter --------------------
     Umbrechen statt seitwaerts schieben: Ein Scroll-Container wuerde die
     aufklappenden Untermenues abschneiden. */
  @media (max-width: 1180px) {
    /* Hier stand ".kopf .nr { display: none; }" - wirkungslos, weil
       ".kopf a.np > span" (spezifischer) display:block setzt. Die Nummern
       waren also immer sichtbar; so bleibt es (24.10.2026). Sollen sie
       hier verschwinden: ".kopf a.np > span.nr { display: none; }". */
    .kopf__reihe {
      flex-wrap: wrap;
      row-gap: calc(.16rem + .34rem * var(--kopf));
      padding-block: calc(.22rem + .78rem * var(--kopf));
    }
    .kopf__navi { flex: 1 0 100%; margin-left: 0; }
    .navi {
      flex-wrap: wrap;
      gap: clamp(.22rem, .08rem + .35vw, .34rem);
      padding: calc(.04rem + .12rem * var(--kopf)) 0 calc(.12rem + .3rem * var(--kopf));
    }
    .navi > li { flex: 0 0 auto; min-width: auto; }
    /* Mitwachsen 768 -> 1180 px (Werte bei 1180 = bisheriger Stand):
       Innenrand rechts 11 -> 16 px, links 8 -> 12 px,
       Schrift 11,4 -> 11,84 px, Sperrung .05 -> .07em.
       Bei 768 px bleiben so ~70 px Luft (Scrollbalken, groessere
       Browserschrift); vorher fehlten ~33 px und Kontakt brach um.
       rem-Anteil haelt die Werte beim Browser-Zoom mit (WCAG 1.4.4).
       Rueckweg: 30-kopf.css.vor-fluid */
    .kopf a.np {
      padding: calc(.16rem + .22rem * var(--kopf)) clamp(.68rem, .105rem + 1.214vw, 1rem)
               calc(.16rem + .22rem * var(--kopf)) clamp(.5rem, .0525rem + .932vw, .74rem);
    }
    .kopf .tt {
      font-size: calc(clamp(.71rem, .661rem + .107vw, .74rem) * (.81 + .19 * var(--kopf)));
      letter-spacing: clamp(.05em, .005rem + .063vw, .07em);
    }
    .kopf li.hat-unter > .np .tt::after { margin-left: .45em; }
    /* Vorletzter Punkt (Hilfe) steht hier nah am rechten Rand: Untermenue
       ebenfalls rechtsbuendig, sonst ragt es (unsichtbar) ueber den Rand
       und erzeugt Querscrollen (768 px: 35 px). */
    .kopf .navi > li:nth-last-child(2) > .unter { left: auto; right: 0; }
    .kopf__marke img { height: calc(14px + 10px * var(--kopf)); }
  }

  /* ----- Telefon: Burgermenue -------------------------------------------
     (scripting: enabled): Ohne Skript gibt es keinen Knopf, der das Panel
     oeffnen koennte - dann bleibt die umbrechende Fassung von oben stehen.
     Das Panel braucht top UND bottom, sonst hat es keine Hoehe und
     overflow-y greift nicht. */
  @media (max-width: 760px) and (scripting: enabled) {
    .burger { display: block; }
    .kopf__reihe { flex-wrap: nowrap; }
    .kopf__navi {
      position: fixed;
      left: 0;
      right: 0;
      top: var(--qn-ankerabstand, 118px);
      bottom: 0;
      flex: none;
      margin: 0;
      padding: 1rem var(--qn-rand) 2rem;
      background: #12181D;
      border-top: 1px solid rgba(255, 169, 77, .28);
      overflow-y: auto;
      overscroll-behavior: contain;
      visibility: hidden;
      opacity: 0;
      translate: 0 -10px;
      transition: opacity .25s ease, translate .25s ease, visibility .25s;
    }
    html.nav-offen .kopf__navi { visibility: visible; opacity: 1; translate: 0 0; }

    .navi { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .4rem; padding: 0; }
    .navi > li { width: 100%; }
    .kopf a.np { padding: .72rem 1.15rem .72rem .9rem; }
    .kopf a.np > span.nr { display: inline-block; margin-right: .7rem; font-size: .62rem; }
    /* inline-block, nicht inline: transform greift nicht an Inline-Boxen -
       die Gegenschraege fiele weg und der Text stuende kursiv. */
    .kopf a.np > span.tt { display: inline-block; font-size: .86rem; }
    .kopf li.hat-unter > .np .tt::after { display: none; }

    /* Alle Ebenen stehen offen - auf dem Telefon die verlaesslichste Form. */
    .kopf .unter {
      position: static;
      opacity: 1;
      visibility: visible;
      translate: 0 0;
      margin: .3rem 0 .5rem 1.4rem;
    }
    .kopf .unter li:nth-child(n) { margin-left: 0; }
    .kopf .unter a { padding: .55rem 1rem .55rem .8rem; }
    .kopf .unter a > span { font-size: .74rem; }
  }
}

/* =========================================================================
   Konto-Kachel (Kundenlogin), 25.10.2026
   -------------------------------------------------------------------------
   Markup: Overrides/QnFeloginAjax/AccountTrigger.html, eingebunden in
   Kopf.html nach der Navigation. Dieselbe Kachel wie die Menuepunkte
   (8-Grad-Schraege, Dunkelton, farbige Unterkante), nur mit Icon statt
   Text. Unterkante grau = niemand angemeldet, orange + Punkt = angemeldet.
   Hoehe folgt dem Schrumpfen der Leiste (--kopf) mit derselben Rechnung
   wie die Menuekacheln (Innenrand + Nummer + Titel + 3 px Rand):
     ab 1181 px   rechts neben "Kontakt", Abstand wie zwischen den Kacheln
     761-1180 px  Ende der Kachelzeile (Raster: Logo oben, Menue + Konto
                  darunter) - so waechst die Kopfleiste nicht
     bis  760 px  links neben dem Burger, gleiche Hoehe wie der Burger
   Rueckweg: diesen Block loeschen und die Zeile in Kopf.html entfernen.
   ========================================================================= */
@layer qn.theme {

  .kopf__konto {
    --k-kante: rgba(233, 238, 242, .38);
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    block-size: calc(2.1305rem + .967rem * var(--kopf) + 3px);
    inline-size: calc(2.2rem + .85rem * var(--kopf));
    margin-left: calc(.3rem - clamp(.8rem, 2.4vw, 2rem));   /* Lueckenabstand wie .navi */
    color: var(--hell);
    text-decoration: none;
    background: #1A2128;
    border: 1px solid rgba(233, 238, 242, .14);
    border-bottom: 2px solid var(--k-kante);
    box-shadow: var(--sch-nah);
    transform: skewX(calc(-1 * var(--winkel)));
    transition: background .3s, border-color .3s, color .3s;
  }
  .kopf__konto-icon {
    position: relative;
    display: block;
    line-height: 0;
    transform: skewX(var(--winkel));
  }
  .kopf__konto-icon svg {
    width: calc(1.1rem + .3rem * var(--kopf));
    height: auto;
  }

  /* Angemeldet: orange Kante + Punkt am Icon */
  .kopf__konto.is-logged-in { --k-kante: var(--orange); color: var(--orange-hell); }
  .kopf__konto.is-logged-in .kopf__konto-icon::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 2px #1A2128;
  }

  @media (hover: hover) {
    .kopf__konto:hover { background: var(--orange); border-color: var(--orange); color: #0D1419; }
    .kopf__konto:hover .kopf__konto-icon::after { box-shadow: 0 0 0 2px var(--orange); background: #0D1419; }
  }
  .kopf__konto:focus-visible {
    outline: 2px solid var(--orange-hell);
    outline-offset: 3px;
    background: var(--orange);
    border-color: var(--orange);
    color: #0D1419;
  }
  .kopf__konto:focus-visible .kopf__konto-icon::after { box-shadow: 0 0 0 2px var(--orange); background: #0D1419; }
  /* Fenster offen: Kachel bleibt "gedrueckt" */
  .kopf__konto[aria-expanded="true"] { background: var(--orange); border-color: var(--orange); color: #0D1419; }

  @media (max-width: 1180px) {
    /* Raster statt Umbruch: Logo | (leer), Menue | Konto */
    .kopf__reihe {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: clamp(.22rem, .08rem + .35vw, .34rem);
    }
    .kopf__marke { grid-column: 1; grid-row: 1; justify-self: start; }
    .kopf__navi { grid-column: 1; grid-row: 2; }
    .kopf__konto {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
      /* oben auf Hoehe der Kacheln (= Innenrand oben von .navi) */
      margin: calc(.04rem + .12rem * var(--kopf)) 0 0;
      block-size: calc(1.965rem + .783rem * var(--kopf) + 3px);
      inline-size: calc(2rem + .75rem * var(--kopf));
    }
  }

  @media (max-width: 760px) and (scripting: enabled) {
    .kopf__reihe { display: flex; }
    .kopf__konto {
      order: 1;
      align-self: center;
      margin: 0 0 0 auto;
      block-size: 2.8rem;
      inline-size: 3rem;
    }
    .kopf__konto-icon svg { width: 1.35rem; }
    .burger { order: 2; margin-left: .5rem; }
  }

  @media (forced-colors: active) {
    .kopf__konto { border-bottom-color: CanvasText; }
    .kopf__konto.is-logged-in { border-bottom-color: Highlight; }
  }
}

/* =========================================================================
   Telefon-Kopf passt in 320-760 px, 29.10.2026
   -------------------------------------------------------------------------
   Fehler live: Logo (213 px) + Lupe + Konto + Burger + Abstaende brauchten
   405 px. Auf einem 360-px-Telefon ragte der Burger aus dem Bild; Chrome
   dehnt dann die Layout-Breite auf 405 px, und alles mit position:fixed
   (Menue-Panel, Cookie-Dialog) wurde ebenfalls 405 px breit und rechts
   abgeschnitten.
   Loesung: Die drei Tore sind einheitlich 44 x 44 px (Fingertipp-Ziel,
   WCAG 2.5.5), das Logo schrumpft in den Restplatz - bei 360 px ca. 186 px,
   bei 320 px ca. 146 px breit. Hoehe folgt weiter dem Schrumpfen (--kopf).
   Spezifitaet .kopf__reihe > ... schlaegt 96-suche.css (laedt spaeter).
   Rueckweg: diesen Block loeschen (Sicherung 30-kopf.css.vor-telefonkopf).
   ========================================================================= */
@layer qn.theme {
  @media (max-width: 760px) and (scripting: enabled) {
    .kopf__reihe { column-gap: .45rem; }

    .kopf__reihe > .kopf__marke {
      flex: 0 1 auto;
      min-width: 0;
      margin-right: .4rem;
    }
    /* Ersetzte Elemente halten bei max-width + max-height das
       Seitenverhaeltnis - das Logo wird nie verzerrt. */
    .kopf__reihe > .kopf__marke img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: calc(14px + 10px * var(--kopf));
    }

    .kopf__reihe > :is(.kopf__suche, .kopf__konto) {
      block-size: 2.75rem;
      inline-size: 2.75rem;
      flex: none;
    }
    .kopf__reihe > .kopf__suche { margin: 0 0 0 auto; }
    .kopf__reihe > .kopf__konto,
    .kopf__reihe > .kopf__suche ~ .kopf__konto { margin-left: 0; }
    .kopf__reihe > :is(.kopf__suche, .kopf__konto) svg { width: 1.25rem; }

    .kopf__reihe > .burger {
      flex: none;
      box-sizing: border-box;
      display: grid;
      place-content: center;
      block-size: 2.75rem;
      inline-size: 2.75rem;
      padding: 0;
      margin-left: 0;
    }
    .kopf__reihe > .burger i { margin: 2px 0; }
    html.nav-offen .kopf__reihe > .burger i:nth-child(1) { transform: skewX(var(--winkel)) translateY(4px) rotate(45deg); }
    html.nav-offen .kopf__reihe > .burger i:nth-child(3) { transform: skewX(var(--winkel)) translateY(-4px) rotate(-45deg); }
  }
}