/* Seegarten Klinik - gemeinsames Stylesheet. Zusammengefuehrt aus den drei fruheren HTML-Dateien; Blockgrenzen unten markiert. */ :root{color-scheme:light} img{max-width:100%} [hidden]:not([hidden=until-found]){display:none!important} :root{ --bg:#F4F6F4; --surface:#FFFFFF; --surface-2:#EAEEEA; --ink:#242220; --ink-muted:#6E6763; --slate:#5C544F; --accent:#8F0000; --accent-fill:#BF0000; --accent-tint:#FBEAEA; --line:#DFD9D5; --focus:#0B6E8F; /* Formularfelder (27.09.2026, Punkte 294/295). Vorher lagen die Felder dunkel auf dem noch dunkleren Seitengrund, der Rand bei 1,3 : 1 - "kaum sichtbar, fast schwarz" (Chefarzt). Ein erster Anlauf (Feld #2A231E, Rand #756B63) war ihm noch zu wenig: "nicht freundlich". Jetzt dunkel ein deutlich helleres Feld und ein heller Rand (rund 5 : 1 gegen die Flaeche); hell der Rand rund 3 : 1 gegen Weiss statt vorher 1,35 : 1, der Feldgrund bleibt der Seitengrund. */ --feld-grund:#F4F6F4; --feld-rand:#9C938C; /* Abgrenzung der haftenden Navigationszeile, sobald sie oben klebt (.is-stuck). Auf dunklem Grund traegt ein Schatten kaum; die Abgrenzung leistet dort vor allem die durchgehende untere Linie, der Schatten gibt nur Tiefe dazu. */ --nav-stuck:0 8px 16px -10px rgba(20,30,36,0.5); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#15120F; --surface:#1D1815; --surface-2:#241E19; --ink:#ECE8E5; --ink-muted:#B7AFA9; --slate:#ADA49D; --accent:#FF4D4D; --accent-fill:#D10000; --accent-tint:rgba(209,0,0,0.20); --line:#332E29; --focus:#6FD3E8; --feld-grund:#3A322C; --feld-rand:#93887F; --nav-stuck:0 10px 20px -10px rgba(0,0,0,0.85); } } :root[data-theme="dark"]{ --bg:#15120F; --surface:#1D1815; --surface-2:#241E19; --ink:#ECE8E5; --ink-muted:#B7AFA9; --slate:#ADA49D; --accent:#FF4D4D; --accent-fill:#D10000; --accent-tint:rgba(209,0,0,0.20); --line:#332E29; --focus:#6FD3E8; --feld-grund:#3A322C; --feld-rand:#93887F; --nav-stuck:0 10px 20px -10px rgba(0,0,0,0.85); } *{box-sizing:border-box;} /* Abstand fuer Sprungmarken, damit die haftende Navigationszeile nichts verdeckt */ html{scroll-behavior:smooth; scroll-padding-top:72px;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} } body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Work Sans", -apple-system, "Segoe UI", sans-serif; font-size:16px; line-height:1.55; } /* Deutsche Komposita brauchen eine Trennstelle. Gemeldet am 18.09.2026 fuer zwei Artikel, die bei 320 px waagrecht ueberliefen - die Ursache war nicht die Tabelle, sondern der Seitentitel: "Krampfaderverödung" ist bei 32 px 326 px breit, der Platz misst 265. Nachgemessen mit der echten Schrift ueber alle 452 Titel: Von 70 Woertern ab 15 Zeichen passen 53 nicht - "Konsultationsvorbereitung" braucht 402 px. Es waren also nie zwei Seiten, sondern jede mit einem langen Wort im Titel. hyphens:auto trennt nach den Regeln der Sprache () und wird nur taetig, wenn der Platz nicht reicht - auf breiten Schirmen aendert sich nichts. overflow-wrap:break-word bleibt als Netz fuer das, was die Trennung nicht kann: Markennamen, Messwerte, Adressen. */ h1,h2,h3{ font-family:"Fraunces", Georgia, serif; font-weight:460; color:var(--ink); text-wrap:balance; hyphens:auto; overflow-wrap:break-word; margin:0; } a{color:inherit;} a:focus-visible, button:focus-visible{outline:2px solid var(--focus); outline-offset:3px;} .mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums;} /* Die Rubrik ueber Titeln und Abschnitten. Bis zum 23.09.2026 stand sie auf 0,72 rem (11,5 px) - die kleinste Schrift der Website, und auf dem Foto der Startseite ging sie unter. Auf Wunsch des Chefarztes erst dort, dann auf der Startseite und schliesslich ueberall groesser und kraeftiger. Schrift und Versalien bleiben, damit sie als Rubrik erkennbar bleibt. */ .eyebrow{ font-family:"IBM Plex Mono", monospace; font-size:0.98rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); /* Seit der groesseren Schrift passt ein langes Einzelwort in Versalien und Festbreite schmal nicht mehr in die Zeile: "KONSULTATIONS- VORBEREITUNG" schob den Gesundheitsfragebogen bei 320 px um 19 px hinaus. Erst trennt die Sprache, und nur wo sie nichts findet, bricht overflow-wrap notfalls irgendwo. */ hyphens:auto; overflow-wrap:anywhere; } @media (max-width:560px){ .eyebrow{font-size:0.84rem;} } /* --wrap-rand steht als Variable da, damit etwas, das randlos ueber die ganze Fensterbreite laufen soll, sich mit genau diesem Mass wieder herausschieben kann - ohne die Zahl ein zweites Mal zu nennen. Benutzt vom Bandfoto der Startseite (.hero-band-hell .wrap::before). */ .wrap{--wrap-rand:32px; max-width:1180px; margin:0 auto; padding-left:var(--wrap-rand); padding-right:var(--wrap-rand);} @media (max-width:720px){ .wrap{--wrap-rand:20px;} } /* logo Seit dem 17.09.2026 eine Zeichnung statt zweier Bilddateien: Das SVG steht als im Dokument (siehe app/partials/header.php), die Schrift zeichnet in currentColor. Damit faellt die ganze Umschalterei weg. Vorher lagen zwei PNG vor, hell und dunkel, und fuenf Regeln blendeten je nach Farbschema die eine ein und die andere aus - waehrend der Browser BEIDE holte, auch die unsichtbare. Jetzt ist es eine Farbe. Die Hoehe kommt aus der Regel, die Breite rechnet der Browser aus dem viewBox (296 x 74 mit den Quadraten, 270 x 80,9 mit dem Wellenzeichen - welche Fassung gilt, steht in app/config.php). Die Masse am Bild, die am selben Tag noetig waren, damit die Kopfzeile nicht zurechtrutscht, eruebrigen sich: Ein SVG bringt sein Seitenverhaeltnis mit, es muss auf nichts warten. */ .brand{display:flex; align-items:center; gap:10px; text-decoration:none;} /* Die drei Logohoehen laufen ueber --logo-skala. Gesetzt wird der Wert am (app/layout.php) aus der eingestellten Logofassung; ohne ihn gilt 1, also genau die bisherigen Masse. Gemessen wird das Logo ueber die Hoehe - eine hoehere Zeichnung heisst bei gleicher Hoehe kleinerer Schriftzug. Die Wellenfassung ist 80,9 statt 74 Einheiten hoch; ohne diese Rechnung waere SEEGARTEN KLINIK 8,6 % kleiner geworden. */ .brand .logo{height:calc(72px * var(--logo-skala, 1)); width:auto; display:block; color:#434242;} /* Fusszeile 48 statt 40 px, also 20 % groesser (27.09.2026, Punkt 296). */ footer .brand .logo{height:calc(48px * var(--logo-skala, 1));} /* Im Dunkelmodus schreibt das Logo weiss - wie die bisherige zweite Datei. Das Rot bleibt in beiden Faellen #BF0000; es steckt fest in der Zeichnung und folgt absichtlich NICHT dem dunklen Akzent (#D10000). */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand .logo{color:#FFFFFF;} } :root[data-theme="dark"] .brand .logo{color:#FFFFFF;} .brand-tag{font-family:"IBM Plex Mono", monospace; font-size:0.68rem; letter-spacing:0.08em; color:var(--ink-muted); border-left:1px solid var(--line); padding-left:10px;} /* header: obere Zeile mit grossem Logo, darunter die haftende Navigationszeile */ /* Der ganze Header haftet, aber um die Hoehe der Logo-Zeile nach oben versetzt: beim Scrollen laeuft das Logo hinaus und die Navigationszeile bleibt oben stehen. Der Wert entspricht Logohoehe 72px plus Innenabstand 20px + 18px. Die Logohoehe zieht mit --logo-skala mit (siehe .brand .logo), der Versatz muss also mitrechnen - sonst bliebe bei einer hoeheren Fassung ein Streifen des Logos oben stehen oder die Navigationszeile rutschte darunter weg. Bei Skala 1 ergibt die Rechnung wieder genau -110px. */ header{position:sticky; top:calc(-38px - 72px * var(--logo-skala, 1)); z-index:20; background:var(--bg);} /* nur oben/unten setzen: die seitlichen Abstaende kommen von .wrap */ .headertop{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:20px; padding-bottom:18px;} .headertools{display:flex; align-items:center; gap:18px;} .headertools a.tel{font-family:"IBM Plex Mono", monospace; font-size:0.86rem; color:var(--ink); text-decoration:none; white-space:nowrap;} .headertools a.tel:hover{color:var(--accent);} /* Der Sprachumschalter (24.09.2026): "DE | EN" in der Schrift der Telefonnummer. Die aktuelle Sprache steht kraeftig und ohne Verweis da, die andere ist ein Verweis. Der Trennstrich kommt aus dem CSS, damit ein Vorleseprogramm ihn nicht mitliest. Er bleibt auch auf dem Telefon sichtbar, wo die Nummer ausgeblendet wird - dort braucht man ihn am ehesten, wenn ein Verweis auf die falsche Sprache geteilt wurde. */ .sprachwahl{display:flex; align-items:center; font-family:"IBM Plex Mono", monospace; font-size:0.86rem;} .sprachwahl > * + *::before{content:"|"; color:var(--line); margin:0 8px;} .sprachwahl span{color:var(--ink); font-weight:600;} .sprachwahl a{color:var(--ink-muted); text-decoration:none;} .sprachwahl a:hover{color:var(--accent);} .headernavrow{ position:relative; z-index:1; background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* Die Klasse setzt site.js, sobald die Zeile oben anstoesst: dann kommt zur Linie noch ein Schatten, damit sich die Zeile vom durchlaufenden Inhalt abhebt. Bewusst ohne transition: der Uebergang von box-shadow:none auf einen Wert blieb in Chrome beim transparenten Startwert haengen, der Schatten kam gar nicht erst zum Vorschein. */ .headernavrow.is-stuck{box-shadow:var(--nav-stuck);} .navbar{display:flex; align-items:center; justify-content:space-between; gap:24px;} /* Traegt seit dem 21.09.2026 nur noch den Menue-Knopf; auf dem Desktop ist sie damit leer und nimmt keinen Platz mehr weg. Die Regel fuer den roten Knopf darin ist mit ihm weggefallen. */ .navactions{display:flex; align-items:center; gap:14px;} nav.mainnav ul{display:flex; list-style:none; margin:0; padding:0;} nav.mainnav li{display:flex; align-items:center; position:relative;} /* Trennstrich zwischen den Menuepunkten: nur in Texthoehe, nicht ueber die ganze Zeile - sonst wirkt die Navigation wie eine Tabelle. */ nav.mainnav li + li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:1.05em; background:var(--line); } /* Die seitliche Polsterung stand vom 07.09.2026 bis zum 21.09.2026 auf 22px (Punkt 27, "Hauptnavigation groesser"). Der neunte Punkt hat einen Teil davon gekostet: Die Kopfzeile ist wie der ganze Inhalt auf 1180px gedeckelt und waechst mit dem Fenster NICHT mit, der Leiste bleiben also 1116px, davon 110 fuer den Anmeldeknopf. Zweimal an einem Abend gemessen, und der zweite Messwert zaehlt: (1) neun Punkte, Etikett "International", roter Knopf noch da (110px): pad 22 -> 1249, 133 zu viel; pad 16 -> 1141, 25 zu viel; pad 14 -> 1105, 11 uebrig. Genommen war 14. (2) derselbe Stand OHNE den roten Knopf "Anmeldung" - er ist auf Entscheid des Chefarztes aus der Kopfzeile weg: pad 24 -> 1175, 59 zu viel pad 20 -> 1103, 13 uebrig pad 22 -> 1139, 23 zu viel pad 18 -> 1067, 49 uebrig pad 21 -> 1121, 5 zu viel pad 16 -> 1031, 85 uebrig Genommen ist 18px. Nicht 20 oder 21, obwohl sie naeher an den frueheren 22 lagen: 5 bzw. 13 Pixel Reserve sind keine - eine andere Schriftfassung oder ein Browser, der anders rundet, und die Leiste faellt wieder um. Bei 18px sind es 49. ACHTUNG BEI EINEM ZEHNTEN PUNKT: Er passt nur, wenn er kurz ist - 49px reichen fuer ein Wort von etwa vier Zeichen. Nachmessen, nicht schaetzen: Die Leiste hat 1116px. */ nav.mainnav a{ display:inline-flex; align-items:center; gap:8px; font-size:0.98rem; font-weight:600; color:var(--ink); text-decoration:none; padding:16px 18px; white-space:nowrap; border-bottom:2px solid transparent; } nav.mainnav li:first-child a{padding-left:0;} nav.mainnav a:hover{color:var(--accent);} nav.mainnav .chev{width:10px; height:7px; flex-shrink:0; opacity:0.7;} /* Aufklappmenue: oeffnet bei Mauszeiger und bei Tastaturfokus */ nav.mainnav .sub{ position:absolute; top:100%; left:0; min-width:266px; z-index:30; background:var(--surface); border:1px solid var(--line); box-shadow:0 20px 44px -24px rgba(20,30,36,0.45); padding:6px 0; display:none; } nav.mainnav li:first-child .sub{left:-4px;} nav.mainnav .hassub:hover > .sub, nav.mainnav .hassub:focus-within > .sub{display:block;} nav.mainnav .hassub:hover > a .chev{transform:rotate(180deg);} /* Untermenue eine Stufe leichter als die Hauptpunkte */ nav.mainnav .sub a{display:block; padding:10px 18px; font-size:0.88rem; font-weight:400; border-bottom:none;} nav.mainnav .sub a:hover{background:var(--surface-2); color:var(--ink);} .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:2px; background:none; color:var(--ink); cursor:pointer; } .theme-toggle:hover{border-color:var(--ink-muted);} .theme-toggle svg{width:17px; height:17px; display:block;} .theme-toggle .icon-moon{display:none;} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none;} :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block;} } :root[data-theme="dark"] .theme-toggle .icon-sun{display:none;} :root[data-theme="dark"] .theme-toggle .icon-moon{display:block;} /* Mobiler Menue-Knopf: drei Striche statt des Wortes "Menue", und er steht rechts aussen (die Anordnung kommt aus dem Umschaltpunkt weiter unten). Bei geoeffnetem Menue werden daraus ein Kreuz - das zeigt, dass derselbe Knopf wieder schliesst. Die Umschaltung haengt an aria-expanded, das site.js ohnehin setzt; so gibt es keinen zweiten Zustand, der davon abweichen koennte. 44 mal 44 Pixel wie die Aufklapper im Menue selbst. */ .menubtn{display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; background:none; border:1px solid var(--line); border-radius:2px; color:var(--ink); cursor:pointer;} .menubtn:hover{border-color:var(--ink-muted);} .menubtn svg{width:20px; height:14px; display:block;} .menubtn .icon-kreuz{display:none;} .menubtn[aria-expanded="true"] .icon-striche{display:none;} .menubtn[aria-expanded="true"] .icon-kreuz{display:block;} /* Umschaltpunkt zum Mobilmenue. Er richtet sich nach der Breite, die die Navigationszeile braucht: mit ACHT Punkten sind das 1140px, nachgemessen am 20.09.2026 beim Nachbau der Akademie (Punkt 198). Mit sieben Punkten waren es 1083px. Zum Vergleich: sechs Punkte brauchten 981px. Acht Punkte gab es schon einmal - als Medaesthetics kurz eigenstaendig stand -, sie brauchten mit diesem langen Wort aber 1222px und damit mehr als der Inhaltsbereich (1180px), weshalb es unter MediWiki gewandert ist. "Akademie" ist kurz genug, dass die Leiste einzeilig bleibt. Kommt ein Menuepunkt dazu, muss dieser Wert MITWACHSEN. Nachmessen: die Seite in einem Rahmen schmaler ziehen und die kleinste Breite nehmen, bei der documentElement.scrollWidth noch hineinpasst. Vergisst man es, laeuft die Leiste still unter dem Fensterrand hinaus - und zwar nur in einem schmalen Band von Fensterbreiten, das beim Ausprobieren niemand trifft. */ @media (max-width:1139px){ nav.mainnav{display:none;} /* Die Navigationszeile traegt mobil nur noch die drei Striche. Bis zum 21.09.2026 stand links davon der rote Knopf "Anmeldung"; dafuer waren order:2 und space-between da - Anmeldung links, Striche rechts aussen. Mit einem einzigen Kind schoebe space-between es nach LINKS, also flex-end: Die Striche gehoeren an den rechten Rand, wo die Hand ist. */ .menubtn{display:inline-flex;} .navactions{flex:1 1 auto; justify-content:flex-end;} .headertools a.tel{display:none;} /* 44px Logo + 14px + 12px Innenabstand; die Logohoehe zieht wie oben mit --logo-skala mit, der Versatz rechnet mit. Bei Skala 1: -70px. */ header{top:calc(-26px - 44px * var(--logo-skala, 1));} .headertop{padding-top:14px; padding-bottom:12px;} .brand .logo{height:calc(44px * var(--logo-skala, 1));} .navbar{justify-content:space-between; padding-top:8px; padding-bottom:8px;} } /* Das Mobilmenue ist mit sieben Punkten und achtzehn Unterpunkten rund 1500px hoch. Es haengt als absolute Ebene in der haftenden Kopfzeile und wandert damit beim Scrollen mit, statt den unteren Teil freizugeben - ohne eigenes Scrollen waren auf einem Telefon mit 667px Hoehe nur 11 der 29 Punkte erreichbar, Team, Patienten-Info, MediWiki und Kontakt gar nicht. Das Feld scrollt deshalb selbst. overscroll-behavior haelt den Schwung darin, statt ihn an die Seite dahinter weiterzugeben. Die genaue Hoehe setzt site.js beim Oeffnen und beim Scrollen; der Wert hier ist der Rueckfall ohne Javascript. 128px ist die Kopfzeile in voller Hoehe, dvh statt vh, weil die Adressleiste auf dem Telefon ein- und ausfaehrt. */ .mobile-nav{position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 18px 40px -22px rgba(20,30,36,0.35); max-height:calc(100vh - 128px); max-height:calc(100dvh - 128px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;} .mobile-nav .wrap{display:flex; flex-direction:column; padding-top:8px; padding-bottom:8px;} .mobile-nav a{font-size:0.95rem; color:var(--ink); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line);} .mobile-nav .wrap > a:last-child{border-bottom:none;} .mobile-nav .sublink{padding-left:16px; font-size:0.88rem; color:var(--ink-muted);} /* Hauptpunkt mit Aufklapper. Der Name traegt weiter zur Bereichsseite, der Pfeil daneben oeffnet die Unterpunkte - beides getrennt, damit der Bereich selbst erreichbar bleibt. Die Trennlinie wandert dabei vom Verweis auf die Zeile, sonst endete sie vor dem Pfeil. */ .mobile-nav .mobile-zeile{display:flex; align-items:center; border-bottom:1px solid var(--line);} .mobile-nav .mobile-zeile > a{flex:1 1 auto; border-bottom:none;} /* 16 + 12 + 16 = 44px breit, und align-self:stretch gibt ihm die volle Zeilenhoehe von 52px - die uebliche Mindestgroesse fuer eine Tippflaeche auf dem Telefon ist 44 mal 44. Der Pfeil steht MITTIG (21.09.2026, auf deinen Wunsch). Bis dahin klebte er rechts (22px links, 10px rechts) - richtig, solange er nur ein Zeichen am Zeilenende war, falsch, seit der Block eine eigene sichtbare Flaeche ist: Was in einer Flaeche steht, gehoert in ihre Mitte. Die 44px Breite bleiben, die Polsterung ist nur gleichmaessig verteilt. Der Block ist EINGEFAERBT (21.09.2026, auf Befund des Chefarztes): Bis dahin stand dort nur ein blasser grauer Pfeil, und niemand konnte sehen, dass die Zeile zwei verschiedene Ziele hat - links der Name, der auf die Bereichsseite fuehrt, rechts der Pfeil, der die Unterpunkte aufklappt. Der Pfeil sah nach Verzierung der Zeile aus, nicht nach eigener Flaeche. Die Farbe steht als var(--accent-fill), NICHT als #BF0000: Im dunklen Modus ist der Akzent #D10000, und eine feste Farbe bliebe dort stehen. Im Stylesheet stehen ueberhaupt nur zwei fest geschriebene Farben, und das soll so bleiben. */ .mobile-auf{flex:none; align-self:stretch; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; padding:0 16px; background:var(--accent-tint); color:var(--accent-fill); border-left:1px solid var(--line); transition:background-color 0.18s ease, color 0.18s ease;} .mobile-auf .chev{width:12px; height:8px; transition:transform 0.18s ease;} /* Offen kehrt sich der Block um: volle Akzentflaeche, weisser Pfeil. Damit sagt dieselbe Flaeche zweierlei - dass sie ein eigenes Ziel ist, und welche Unterpunkte gerade offen stehen. Der Pfeil dreht sich ohnehin. */ .mobile-auf[aria-expanded="true"]{background:var(--accent-fill); color:#fff;} .mobile-auf[aria-expanded="true"] .chev{transform:rotate(180deg);} /* Im dunklen Modus ist der Akzent auf seinem eigenen blassen Grund nicht mehr zu lesen: Die Flaeche ist dort rgba(209,0,0,0.20) und mischt mit dem Seitengrund zu rgb(65,19,17) - ein #D10000 darauf ergibt GEMESSEN 2.80 : 1, unter der Schwelle von 3 : 1 fuer Bedienzeichen. Hell stimmt dasselbe Rot mit 5.62 : 1. Die vier Werte nach der Regel: hell zu 5.62, hell offen 6.53, dunkel zu 12.99, dunkel offen 5.66. Das rote Feld bleibt also in beiden Modi, nur der Pfeil darauf wird hell. Dieselbe Lehre wie bei der Sonne im Wellenband: Farbe wirkt relativ zum Grund, und dasselbe Rot kann nicht auf hellem und auf dunklem Grund zugleich tragen. Offen braucht es die Regel nicht - dort steht der Pfeil weiss auf der vollen Flaeche (5.66 : 1). */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mobile-auf[aria-expanded="false"]{color:var(--ink);} } :root[data-theme="dark"] .mobile-auf[aria-expanded="false"]{color:var(--ink);} .mobile-unter{display:flex; flex-direction:column;} .mobile-nav .mobile-tel{font-family:"IBM Plex Mono",monospace; color:var(--ink-muted);} /* Die Gegenregel zum Umschaltpunkt oben: ab 1140px traegt die Hauptleiste wieder, das Feld muss weg. Die Zahl MUSS die Zahl oben plus eins sein. Sie stand auf 1021, als der Umschaltpunkt schon auf 1082 lag - zwischen 1021 und 1082 Pixeln war nav.mainnav ausgeblendet und das Feld zugleich zwangsweise versteckt, der Menue-Knopf konnte also nichts oeffnen. */ @media (min-width:1140px){ .mobile-nav{display:none !important;} } /* buttons */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; font-size:0.92rem; font-weight:500; text-decoration:none; border-radius:2px; border:1px solid transparent; white-space:nowrap; } .btn-primary{background:var(--accent-fill); color:#fff;} .btn-primary:hover{background:var(--accent);} /* background:transparent ist nicht ueberfluessig. Bis zum 19.09.2026 stand hier keiner, und bei den zehn Geisterknoepfen auf fiel das nie auf - ein hat keinen eigenen Grund. Der erste Geisterknopf auf einem