/* keytos.de/neu · Notch (Jonas, 15.10.2026)
   Oben schwebend wie die Notch im System (KategorieNavbar): links das Keytos-Logo, mittig die sechs Seiten – nur Text,
   keine Icons –, rechts „Projekt anfragen“. Alle in derselben Pillenform. Maße wie im System: 50 px hoch, 6 px Innenrand,
   Einträge 36 px, aktive Seite als graue Füllung, Glas mit oberer Lichtkante. Weil die Seite weiß ist (im System liegt die
   Notch auf Grau), trägt sie hier einen Haarrand und einen weichen Schatten – sonst wäre sie unsichtbar.
   (16.10.2026 kurz als größere, animierte „Dynamic Island“ – am 18.10. auf Jonas' Wunsch zurückgenommen.) */
:root {
  --notch-h: 50px;
  --notch-bg: rgba(255, 255, 255, .72);
  --notch-rand: rgba(0, 0, 0, .08);
  --notch-kante: rgba(255, 255, 255, .8);
  --notch-schatten: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .08);
  --notch-aktiv: rgba(120, 120, 128, .14);
}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main { min-height: 100vh; min-height: 100svh; }

/* Leiste: drei Spalten, die Mitte sitzt immer genau mittig. Klicks zwischen den Pillen gehen an die Seite darunter. */
.notch-leiste { position: fixed; z-index: 100; top: 12px; left: var(--grid-gutter-width); right: var(--grid-gutter-width); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; pointer-events: none; }
.notch-leiste > * { pointer-events: auto; }

.notch { display: flex; align-items: center; height: var(--notch-h); margin: 0; border: 1px solid var(--notch-rand); border-radius: 999px; background: var(--notch-bg); box-shadow: inset 0 1px 1px var(--notch-kante), var(--notch-schatten); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); color: var(--primitive-black); font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-bold); line-height: 1; text-decoration: none; white-space: nowrap; }
@media (prefers-reduced-transparency: reduce) { .notch { background: #f5f5f7; -webkit-backdrop-filter: none; backdrop-filter: none; } }

.notch--logo { justify-self: start; gap: 8px; padding: 0 18px 0 10px; font-size: 17px; letter-spacing: -.01em; }
.notch--logo img { flex: none; width: 28px; height: 28px; }
.notch--anfragen { justify-self: end; padding: 0 24px; border-color: var(--primitive-black); background: var(--primitive-black); color: var(--primitive-white); box-shadow: var(--notch-schatten); }
/* „Projekt anfragen“ (Jonas, 16.10.2026): wie der Knopf am Ende von /neu/konzept – Text, rechts ein weißer Kreis mit Pfeil, der
   ringsum gleich viel Abstand zum Rand hat; gleiche Höhe wie Logo und Notch (--notch-h). --k = Kreis. */
.notch--anfragen { --k: calc(var(--notch-h) - 20px); gap: 12px; padding: 0 calc((var(--notch-h) - var(--k)) / 2 - 1px) 0 22px; white-space: nowrap; }
.notch--anfragen .knopf-kreis { width: var(--k); height: var(--k); }

.notch--nav { padding: 6px; }
.notch--nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.notch--nav a { position: relative; display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; color: #474747; text-decoration: none; /* statt gray-800 #5a5a5a: durch das 72-%-Glas über dunklen Bildern blieben nur 3,8:1 – #474747 hält dort 4,6:1 und auf Weiß 9:1 (QA 23.10.2026) */ transition: color .2s var(--ease-cubic-in-out), background-color .2s var(--ease-cubic-in-out); }
.notch--nav a[aria-current] { background: var(--notch-aktiv); color: var(--primitive-black); }
/* Touch: Trefffläche 44 px hoch (Apple HIG), sichtbar bleibt der 36-px-Eintrag. */
@media (pointer: coarse) { .notch--nav a::after { content: ""; position: absolute; inset: -4px 0; } }

@media (hover: hover) {
  .notch--nav a:hover { color: var(--primitive-black); }
  .notch--logo, .notch--anfragen, .notch--menue { transition: background-color .2s var(--ease-cubic-in-out); }
  .notch--logo:hover, .notch--menue:hover { background: rgba(255, 255, 255, .92); }
  .notch--anfragen:hover { background: var(--color-gray-900); }
}
@media (prefers-reduced-motion: no-preference) {
  .notch--logo:active, .notch--anfragen:active, .notch--menue:active, .notch--nav a:active { transform: scale(.97); }
}
/* Knappe Desktop-Breiten (1020–1279 px): Seiten etwas enger und der Knopf kompakter, damit alles in eine Zeile passt */
@media (min-width: 1020px) and (max-width: 1279.98px) {
  .notch--nav a { padding: 0 12px; font-size: 15px; }
  .notch--anfragen { --k: 34px; gap: 8px; padding-left: 16px; font-size: 14px; }
}

/* Footer-Ergänzungen (aus dem bisherigen Entwurf übernommen) */
.stack > p { margin: 0; }
.footer__aux p { margin: 0; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 18px; letter-spacing: -.02em; color: var(--primitive-white); text-decoration: none; }
.footer__brand img { width: 30px; height: 30px; border-radius: 7px; }
.footer__fineprint p { margin: 0; }
/* Unter 1020 px (Jonas, 18.10.2026: „Inhalte unten gut dargestellt“): Marke, Anschrift und Kleingedrucktes linksbündig wie die
   Link-Gruppen darüber – vorher stand das Logo links, der Text darunter mittig, und die Rechtslinks brachen mittig auseinander. */
@media (max-width: 1019.98px) {
  .footer__aux, .footer__fineprint { align-items: flex-start; text-align: left; }
  .footer__fineprint-list { justify-content: flex-start; gap: 8px 20px; }
}

/* Schmaler als 1020 px (Handy, iPad, schmale Fenster; Jonas, 17.10.2026): links das Logo, rechts ein runder Knopf mit drei
   senkrechten Strichen. Er öffnet ein Menü über den ganzen Bildschirm (.notch-tafel): alle Seiten groß in der Titelschrift, die
   aktuelle grau, unten „Projekt anfragen“ und der direkte Kontakt. Mit Skript wächst die Tafel als Kreis aus dem Knopf und die
   Striche werden zum X (_fuss.php); ohne Bewegung geht sie sofort auf. Ab 1020 passt die ganze Leiste (~940 px). */
.notch--menue { display: none; }
.notch-tafel { display: none; }
@media (max-width: 1019.98px) {
  .notch-leiste { grid-template-columns: 1fr auto; }
  .notch-leiste > .notch { position: relative; z-index: 1; } /* Logo und Knopf liegen über der offenen Tafel */
  .notch--nav, .notch--anfragen { display: none; }
  .notch--menue { display: grid; place-items: center; justify-self: end; width: var(--notch-h); padding: 0; cursor: pointer; }
  .notch--menue:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .notch__striche { display: flex; align-items: center; gap: 5px; height: 18px; }
  .notch__striche i { display: block; width: 2px; height: 18px; border-radius: 2px; background: var(--primitive-black); }
  /* ohne GSAP: das X per CSS */
  .notch-leiste:not(.ist-bewegt).ist-offen .notch__striche i:nth-child(1) { transform: translateX(7px) rotate(45deg); }
  .notch-leiste:not(.ist-bewegt).ist-offen .notch__striche i:nth-child(2) { opacity: 0; }
  .notch-leiste:not(.ist-bewegt).ist-offen .notch__striche i:nth-child(3) { transform: translateX(-7px) rotate(-45deg); }

  .notch-tafel { position: fixed; inset: 0; z-index: 0; display: flex; flex-direction: column; gap: 40px; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(12px + var(--notch-h) + 36px) var(--grid-gutter-width) calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--primitive-white); color: var(--primitive-black); font-family: var(--font-sans); }
  .notch-tafel[hidden] { display: none; }
  .notch-tafel__liste { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .notch-tafel__liste li { overflow: hidden; padding-bottom: .08em; } /* Maske: die Seiten steigen beim Öffnen daraus auf */
  .notch-tafel__liste a { display: inline-block; padding: 4px 0; color: inherit; font-size: clamp(38px, 11vw, 64px); font-weight: var(--weight-light); letter-spacing: -.045em; line-height: 1.05; text-decoration: none; }
  .notch-tafel__liste a[aria-current] { color: var(--color-gray-500); } /* hier bin ich – wie die zweite, graue Titelzeile */
  .notch-tafel__liste a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 6px; }
  .notch-tafel__unten { display: grid; gap: 12px; margin-top: auto; }
  .notch-tafel__anfragen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 12px 0 26px; border-radius: 999px; background: var(--primitive-black); color: var(--primitive-white); font-size: 18px; font-weight: var(--weight-bold); text-decoration: none; }
  .notch-tafel__anfragen .knopf-kreis { width: 42px; height: 42px; }
  .notch-tafel__anfragen:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .notch-tafel__kontakt { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin: 0; font-size: 15px; }
  .notch-tafel__kontakt a { padding: 12px 0; color: var(--color-gray-800); text-decoration: none; }
  html.menue-offen { overflow: hidden; } /* Seite dahinter steht still */
}
@media (max-width: 1019.98px) and (hover: hover) { .notch-tafel__liste a:hover { color: var(--color-gray-800); } .notch-tafel__anfragen:hover { background: var(--color-gray-900); } }
@media (min-width: 744px) and (max-width: 1019.98px) { .notch-tafel { padding-left: 48px; padding-right: 48px; } .notch-tafel__unten { justify-items: start; } .notch-tafel__anfragen { min-width: 320px; } .notch-tafel__kontakt { justify-content: flex-start; } }
@media (max-width: 374.98px) { .notch-leiste { left: 12px; right: 12px; } }
@media (max-width: 339.98px) { .notch-leiste { left: 8px; right: 8px; } }

/* Knöpfe auf allen /neu-Seiten (Jonas, 16.10.2026): rund. Beim Drücken federn sie per GSAP (_fuss.php) – deshalb hier keine
   CSS-Übergänge auf transform, sonst laufen beide gegeneinander. Ohne Skript bleibt die :active-Verkleinerung der Seiten. */
main :is(.ang-knopf, .kt-knopf, .ki-knopf, .kz-knopf, .cta--primary, .cta--secondary) { border-radius: 999px; transition-property: background-color, color, box-shadow; }
/* Pfeil-Knöpfe wie „Projekt anfragen“ auf /neu/konzept (.kz-knopf): Kreis mit Pfeil rechts im Knopf, eingesetzt von _fuss.php */
main .ist-pfeilknopf.ist-pfeilknopf { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding-right: 9px; }
.knopf-kreis { display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: var(--knopf-kreis, #fff); }
.knopf-pfeil { grid-area: 1 / 1; color: var(--knopf-grund, #000); font-size: 17px; font-weight: var(--weight-bold); line-height: 1; }
.knopf-pfeil--neu { opacity: 0; } /* zweiter Pfeil nur mit Bewegung (fliegt beim Hover herein) */

/* Fuß (QA 23.10.2026, WCAG 2.4.3): im Quelltext von _fuss.php stehen die Linkgruppen jetzt VOR dem Logo-Block, weil sie am Handy oben
   stehen – so folgt die Tab-Reihenfolge dem Bild. squarespace.css dreht am Handy mit column-reverse und setzt ab Tablet column/row voraus,
   dass der Logo-Block zuerst kommt; hier gedreht, Optik unverändert. */
.footer__content { flex-direction: column; }
@media (min-width: 1020px) { .footer__content { flex-direction: column-reverse; } }
@media (min-width: 1280px) { .footer__content { flex-direction: row-reverse; } }