/* Schaltbare Zusätze. Muss ganz oben stehen - @import ist sonst
   unwirksam. Die Datei wird vom Reiter System geschrieben und enthält
   entweder nichts oder eine Regel zum Ausblenden.
   Auf diesem Weg wirkt der Schalter auf allen Seiten, ohne dass in
   jede einzelne eine Zeile eingetragen werden muss. */
@import url("foerderbaer_sac.css");

/* ============================================================
   Untermenüs in der Kopfzeile

   Steht hier, weil diese Datei auf allen Seiten liegt - so gibt es die
   Regeln genau einmal statt 26-mal.

   Aufbau: Ein .menu-grp enthält einen Knopf und darunter .menu-sub mit
   den Verweisen. Aufgeklappt wird über die Klasse "auf", die das Skript
   setzt - zusätzlich über :focus-within, damit es auch mit der Tastatur
   funktioniert.
   ============================================================ */
.menu-grp{position:relative;display:inline-flex}
.menu-top{background:none;border:0;padding:0;margin:0;cursor:pointer;
          font:inherit;color:inherit;display:inline-flex;align-items:center;gap:5px}
.menu-pf{font-size:11px;line-height:1;transition:transform .15s;opacity:.7}
.menu-grp.auf .menu-pf{transform:rotate(180deg)}
.menu-sub{position:absolute;top:calc(100% + 10px);left:-14px;min-width:210px;
          background:#fff;border:1px solid #e3ece7;border-radius:12px;
          box-shadow:0 10px 28px rgba(16,32,48,.13);
          padding:6px;display:none;flex-direction:column;gap:1px;z-index:70}
.menu-grp.auf .menu-sub,
.menu-grp:focus-within .menu-sub{display:flex}
.menu-sub a{padding:9px 12px;border-radius:8px;white-space:nowrap;
            font-weight:600;font-size:14px;color:#5b6b7b;text-decoration:none}
@media(hover:hover){.menu-sub a:hover{background:#f2f8f5;color:#14281f}}
/* Unsichtbare Brücke zwischen Knopf und Klappfeld - sonst schließt es,
   sobald der Zeiger die Lücke überquert. */
.menu-grp.auf::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}

/* Im Klappmenü des Handys gibt es keinen Platzmangel: Dort werden die
   Gruppen flach ausgeklappt, damit niemand zweimal tippen muss. */
@media(max-width:820px){
  .menu-grp{display:block;width:100%}
  .menu-top{display:none}
  .menu-sub{position:static;display:flex;border:0;box-shadow:none;
            padding:0;min-width:0;background:none}
  .menu-sub a{padding:11px 16px;border-radius:0}
}

/* ============================================================
   Förderbär – Logo im Seitenkopf
   foerderbaer_logo.css   (v1.0, 05.08.2026)

   EINE Datei für alle Seiten. Willst du das Logo ändern - Größe,
   Farbe, Rundung - änderst du es hier, und es gilt überall.
   Vorher stand dieselbe Gestaltung in 28 HTML-Dateien.

   Der zugehörige Baustein im HTML sieht so aus und ist auf allen
   Seiten gleich:

     <a class="brand" href="index.html" aria-label="Förderbär – zur Startseite">
       <span class="peek">
         <img class="bear" src="foerderbaer_baer.svg" alt="" aria-hidden="true">
         <span class="banner">Förder<span class="b">bär</span></span>
         <img class="paw paw-l" src="foerderbaer_greifpfote.svg" alt="" aria-hidden="true">
         <img class="paw paw-r" src="foerderbaer_greifpfote.svg" alt="" aria-hidden="true">
       </span>
     </a>

   Der Schriftzug ist ECHTER TEXT - lesbar für Suchmaschinen und
   Screenreader, markierbar mit der Maus, skaliert mit der
   Schriftgröße des Nutzers. Nur Bär und Pfoten sind Grafik.

   ------------------------------------------------------------
   MASSE: aus dem gedruckten Pullover-Logo ausgemessen und als
   Verhältnis zur Bärenbreite festgehalten. Ändere --fb-baer,
   und alles andere wandert mit.

     Überstand des Bären   0.687   (gemessen 0.693)
     Pfotenbreite          0.222   (gemessen 0.223)
     Pfotenposition        0.296   (gemessen 0.312)
     Schildhöhe            0.556   (gemessen 0.564)
     Eckenradius           0.111   (gemessen 0.101)

   WICHTIG zur Bärengröße: Der Bär ist Pixelgrafik aus 27 Einheiten
   Breite. Nur Vielfache davon bleiben gestochen scharf:
        27 px = klein     54 px = Standard     81 px = groß
   Krumme Zwischenwerte machen die Pixel unterschiedlich breit -
   das sieht man besonders an den Augen.
   ============================================================ */

:root{
  --fb-baer: 54px;        /* 27 · 54 · 81 – siehe oben */
  --fb-schrift: 19px;
  --fb-rand: 2px;
}

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.brand .peek{
  position:relative;
  display:inline-block;
  padding-top:calc(var(--fb-baer) * 0.687);
}

.brand .bear{
  position:absolute;
  left:50%;
  top:0;
  width:var(--fb-baer);
  height:auto;
  transform:translateX(-50%);
  z-index:1;
  display:block;
}

.brand .banner{
  position:relative;
  z-index:2;
  display:block;
  background:#fff;
  border-width:var(--fb-rand);
  border-style:solid;
  border-color:var(--green, #1f7a54);
  border-radius:6px;
  padding:2px 11px;
  /* Dieselbe Schriftfolge wie in der Druckvorlage, damit der
     Schriftzug dem Pullover so nah wie möglich kommt. */
  font-family:'DejaVu Sans', Arial, Helvetica, sans-serif;
  font-weight:800;
  font-size:var(--fb-schrift);
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--ink, #1a2430);
  white-space:nowrap;
}
.brand .banner .b{ color:var(--green, #1f7a54); }

.brand .paw{
  position:absolute;
  z-index:3;
  width:calc(var(--fb-baer) * 0.222);
  height:auto;
  top:calc(var(--fb-baer) * 0.597);
  display:block;
}
.brand .paw-l{ left:calc(50% - var(--fb-baer) * 0.407); }
.brand .paw-r{ right:calc(50% - var(--fb-baer) * 0.407); transform:scaleX(-1); }

/* Kopfzeile braucht Platz für den überstehenden Bären */
header .nav{ min-height:calc(var(--fb-baer) * 0.687 + 41px); }

/* Kleine Bildschirme: etwas kompakter, aber nicht winzig.

   Warum hier KEIN Vielfaches von 27 nötig ist: Handys haben zwei-
   bis dreifache Pixeldichte. Aus 44 CSS-Pixeln werden 88 bis 132
   echte Bildpunkte - Rundungen fallen dort nicht auf. Die Regel mit
   den scharfen Stufen 27/54/81 zählt vor allem an Bildschirmen mit
   einfacher Dichte, also am Rechner. */
@media(max-width:560px){
  :root{
    --fb-baer: 44px;
    --fb-schrift: 17px;
    --fb-rand: 1.8px;
  }
  .brand .banner{ border-radius:5px; padding:2px 10px; }
}

/* Die Fußzeilen-Marke nutzt dieselbe Klasse, aber ohne Lockup.
   Diese Regel hält sie unverändert. */
footer .brand > img{ width:34px; height:34px; display:block; }


/* ============================================================
   Förderbär – Wert, Betonung, Bewegung   (09.08.2026)

   Steht hier, weil diese Datei auf allen 29 Seiten liegt. Eine
   Änderung wirkt überall - kein Eintrag in 29 HTML-Dateien.

   ------------------------------------------------------------
   DIE FARBEN HABEN JE EINE AUFGABE. Das ist der ganze Gedanke,
   nicht "mehr Farbe":

     Grün   #1f7a54   Marke und Weg      Logo, Knöpfe, Verweise
     Petrol #0d6a8a   Wert und Fakt      Zahlen, Ergebnisse
     Gold   #c9a227   bezahlt            NUR "Empfohlen"/"Anzeige"
     Grau   #8a97a3   recherchiert       Stufe 1

   Gold ist bewusst NICHT die Zweitfarbe, obwohl es besser zum
   Bären passt: Es bedeutet auf dieser Seite bereits "dafür hat
   jemand bezahlt". Nutzt man es auch für Zahlen, verliert die
   Anzeigenkennzeichnung ihre Bedeutung - rechtlich (§ 5a Abs. 4
   UWG) wie geschäftlich.

   Petrol liegt farblich neben dem Grün, streitet also nicht mit
   dem Logo, wirkt aber sachlich statt werblich.
   ============================================================ */

:root{
  --wert:#0d6a8a;
  --wert-d:#0a5570;
  --wert-soft:#e4f1f6;
  --wert-line:#b9dbe7;
}

/* ---------- Werte sind Werte ----------
   Alle Träger von Zahlen bekommen dieselbe Farbe und Ziffern in
   gleicher Breite (tabular-nums), damit Beträge untereinander
   stehen statt zu tanzen. */
.stat .v,
.summary .big,
.prog .amt,
.amt{
  color:var(--wert-d);
  font-variant-numeric:tabular-nums;
}
.stat .v .count{ font-variant-numeric:tabular-nums; }

/* ---------- Betonung im Fließtext ----------
   Der eigentliche Zweck: Wer eine lange Ratgeberseite überfliegt,
   soll in drei Sekunden sehen, ob ihn der Text angeht. Fett allein
   reicht dafür nicht - es hebt sich zu wenig ab.

   Nur DIREKTE Kinder von Absatz und Listenpunkt. Sonst würde auch
   ein <b> innerhalb eines Verweises eingefärbt, und der Verweis
   verlöre seine Signalfarbe. */
.prose p > b, .prose p > strong,
.prose li > b, .prose li > strong{
  color:var(--wert-d);
  /* Zarte Unterlegung nur auf der unteren Hälfte: markiert, ohne
     den Absatz bunt zu machen. */
  background:linear-gradient(180deg,transparent 62%,var(--wert-soft) 62%);
  padding:0 1px;
  border-radius:2px;
}

/* ---------- Sichtbare Abschnitte ----------
   Volle Farbbänder gingen nur mit einem zusätzlichen Element je
   Abschnitt - .secn ist ein zentrierter Inhaltsblock, kein Band.
   Struktur entsteht hier deshalb typografisch: mehr Luft davor und
   eine kurze Marke in Markenfarbe. Wirkt beim Überfliegen genauso
   und braucht keine Änderung an den 29 Dateien. */
.prose h2{
  margin-top:44px;
  padding-top:19px;
  position:relative;
}
.prose h2::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:38px; height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--green,#1f7a54),var(--wert));
}
.prose h2:first-of-type{ margin-top:26px; }

/* ---------- Merksatz ----------
   Für den Ein-Satz-Kasten je Abschnitt. Wer eilig ist, liest nur
   diesen. Muss im HTML gesetzt werden: <p class="merk">…</p> */
.merk{
  border-left:3px solid var(--wert);
  background:linear-gradient(90deg,var(--wert-soft),transparent 78%);
  border-radius:0 10px 10px 0;
  padding:11px 15px;
  margin:14px 0;
  font-size:14.5px;
  line-height:1.6;
}
/* Muss .prose p > b schlagen (0-2-1), sonst bekäme das "Kurz:" im Kasten
   die Unterlegung ein zweites Mal - auf farbigem Grund sieht das schmutzig
   aus. Deshalb hier bewusst mit .prose davor. */
.prose p.merk > b, .merk b{ color:var(--wert-d); background:none; padding:0; }

/* ---------- Bewegung ----------
   Sparsam und mit einem Zweck: Die Anhebung sagt "anklickbar".
   Zwei Pixel, 180 ms - mehr wirkt billig. */
.card, .pc, .fbp-card{
  transition:transform .18s ease, box-shadow .18s ease;
}
@media(hover:hover){
  .pc:hover, .fbp-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(16,32,48,.13);
  }
}

/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat -
   viele Ältere, Menschen mit Migräne oder empfindlichem
   Gleichgewichtssinn - bekommt hier gar nichts. Der Inhalt bleibt
   vollständig lesbar; es fällt nur die Bewegung weg. */
@media(prefers-reduced-motion:reduce){
  .card, .pc, .fbp-card{ transition:none; }
  .pc:hover, .fbp-card:hover{ transform:none; box-shadow:none; }
}

/* ---------- Wechselnde Sektionsbänder ----------
   Lange Ratgeber- und Rechnerseiten liefen bisher durchgehend auf
   #fbfcfd - nichts sagte "hier fängt etwas Neues an". Jede zweite
   Sektion bekommt deshalb einen sehr blassen Grund. Er soll gliedern,
   nicht auffallen: Der Unterschied liegt bei rund drei Prozent
   Helligkeit, gerade genug fürs Auge beim Scrollen. Die Marken- und
   Wertfarben bleiben den Inhalten vorbehalten.

   Warum nicht :nth-of-type(even)? Das zählt nach Tag, nicht nach
   Klasse - nachgemessen ging es an drei Stellen daneben:
     - Auf den acht Rechnerseiten steht ein <div class="rl-load"> vor
       den Sektionen. Es zählt mit und dreht die Reihenfolge um: dort
       läge das Band auf 1, 3, 5 statt auf 2, 4, 6.
     - Auf index.html träfe es <div class="modal">.
     - Zur Laufzeit hängen die Skripte .fbnav und .fba-ov an <body>;
       das Anfrage-Overlay bekäme Band samt 100vmax-Schatten.
   ":nth-child(... of .secn)" zählt nur die Sektionen selbst und ist
   gegen alles immun, was sonst noch unter <body> liegt.

   Die Ausnahme :not(:has(.sac-slim)): Der Shop-And-Connect-Streifen
   ist über foerderbaer_sac.css auf display:none gesetzt, seine
   Sektion bleibt aber im Fluss und ist 0 Pixel hoch. Zählte sie mit,
   stünden auf 16 Seiten zwei Bänder sichtbar nebeneinander (auf
   rechner-waermepumpe etwa Sektion 4 und 6). Sie wird deshalb aus der
   Zählung genommen und bekommt selbst keinen Grund - der Streifen
   bringt seinen eigenen mit, sobald der Schalter ihn wieder zeigt.

   Kennt ein Browser "of S" oder :has() nicht, fällt die ganze Regel
   weg und alles sieht aus wie bisher. Bewusst ohne Übergang: Der
   Grund steht beim Aufbau fest, es bewegt sich nichts, also gibt es
   auch für prefers-reduced-motion nichts abzuschalten. */
.secn:nth-child(even of .secn:not(:has(.sac-slim))){
  position:relative;
}
/* Der Grund liegt auf einem eigenen Feld hinter der Sektion, nicht
   auf der Sektion selbst. Zwei Gründe, beide nachgemessen:

   Erstens braucht das Band oben und unten Luft. Die Sektionen grenzen
   wegen zusammenfallender Außenabstände bündig an ihren Inhalt an -
   ohne Luft endete der Grund exakt an der Kartenkante und sähe aus
   wie ein Rahmen. Die 16px reichen in den Abstand zur nächsten
   Sektion hinein, der meist bei 34px liegt.

   Zweitens stoßen manche Sektionen ohne jeden Abstand aneinander
   (auf ratgeber-spartipps.html etwa der Fachbetrieb-Hinweis und der
   Förder-Check darunter). Läge der Grund auf der Sektion, deckten
   diese 16px dort den Nachbarn zu. Hinter dem Inhalt (z-index:-1)
   stört er nicht: Kästen mit eigenem Grund bleiben vollständig
   sichtbar, daneben läuft das Band einfach durch.

   Der Zuschnitt sitzt am Feld, nicht an der Sektion. Deshalb bleiben
   Kartenschatten und die zwei Pixel Anhebung beim Überfahren
   unversehrt - lägen sie an der Sektion, würde beides abgeschnitten. */
.secn:nth-child(even of .secn:not(:has(.sac-slim)))::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-16px 0;
  background:#f2f7f4;
  box-shadow:0 0 0 100vmax #f2f7f4;
  clip-path:inset(0 -100vmax);
}

/* ============================================================
   Knöpfe

   Steht hier und nicht in den 29 Seiten: Auf allen 29 wird diese
   Datei unmittelbar nach dem seiteneigenen </style> geladen (jeweils
   9 Bytes dahinter, nachgemessen). Bei gleicher Spezifität gewinnt
   damit die spätere Regel - die .btn-Blöcke in den Seiten bleiben
   unverändert und werden hier überschrieben.

   Das Problem war nicht Geschmack: Ein Knopf sah aus wie eine farbige
   Fläche, nicht wie etwas zum Drücken. Es gab keine Tastatur-
   Markierung (:focus-visible kam auf keiner Seite vor) und keine
   Rückmeldung beim Drücken (:active ebenso wenig). Wer mit der
   Tastatur navigiert, konnte nicht sehen, wo er steht.

   Dagegen hier drei Dinge: eine Kante und eine leichte Erhebung,
   damit der Knopf über dem Text steht statt darin zu liegen; ein
   Zustand für Überfahren UND für Drücken; ein Fokusring, der auf
   weißem Grund wie auf dem Sektionsband trägt.

   Rangfolge: gefüllt = die eine Haupthandlung, ghost = die
   Nebenhandlung, Textlink = alles Weitere. Bisher standen gefüllt und
   ghost fast gleich stark da; ghost verliert deshalb den Schatten
   fast vollständig und trägt nur noch Kante und Schrift.

   Farben bleiben in der Grünfamilie: --green in Ruhe, --green-d beim
   Überfahren und Drücken, für Kanten dasselbe Grün mit Deckkraft.
   Kein Gold - das ist der Anzeigenkennzeichnung vorbehalten. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  /* 44px ist das Mindestmaß für alles, was mit dem Finger getroffen
     wird. Vorher lagen 66 der 168 Knöpfe darunter, die Kopfzeile bei
     37px. */
  min-height:44px;
  padding:11px 18px;
  border:1px solid var(--green-d,#155e40);
  border-radius:11px;
  background:var(--green,#1f7a54);
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  /* Zwei Schatten: der harte Millimeter setzt die Kante ab, der
     weiche hebt den Knopf an. Zusammen ergibt das "anfassbar", ohne
     dass es nach Spielzeug aussieht. */
  box-shadow:0 1px 1px rgba(16,32,48,.05), 0 2px 5px rgba(16,32,48,.10);
  transition:background .15s ease, border-color .15s ease,
             box-shadow .15s ease, transform .15s ease;
}
/* Nur für Zeigergeräte: Auf dem Handy bleibt der Überfahren-Zustand
   sonst nach dem Tippen kleben. */
@media(hover:hover){
  .btn:hover:not([disabled]){
    background:var(--green-d,#155e40);
    box-shadow:0 2px 3px rgba(16,32,48,.07), 0 6px 14px rgba(16,32,48,.15);
    transform:translateY(-1px);
  }
}
/* Beim Drücken kehrt sich die Erhebung um: Der Knopf geht einen Pixel
   nach unten, der Schatten wandert nach innen. Das ist die
   Rückmeldung, die vorher ganz fehlte. */
.btn:active:not([disabled]){
  background:var(--green-d,#155e40);
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(6,26,18,.25);
}
/* Der Ring liegt außerhalb des Knopfes, getrennt durch einen Spalt in
   Hintergrundfarbe - so bleibt er auch auf dem grünen Knopf selbst
   sichtbar. :focus-visible statt :focus, damit er bei der Maus nicht
   aufblitzt, bei der Tastatur aber immer kommt. */
.btn:focus-visible{
  outline:3px solid var(--green-d,#155e40);
  outline-offset:3px;
}

.btn.big{
  min-height:52px;
  padding:14px 24px;
  font-size:16px;
  border-radius:12px;
  gap:10px;
}

/* Die Nebenhandlung. Acht der 29 Seiten hatten gar keine eigene
   ghost-Regel - dort waren diese Knöpfe voll grün und damit optisch
   gleichrangig mit der Haupthandlung. Ab hier sehen sie überall
   gleich aus. Die Kante ist dasselbe Grün mit Deckkraft, kräftiger
   als das bisherige #cfe6db, weil sie ohne Füllung allein tragen
   muss. */
.btn.ghost{
  background:#fff;
  color:var(--green-d,#155e40);
  border:1px solid rgba(31,122,84,.40);
  box-shadow:0 1px 2px rgba(16,32,48,.06);
}
@media(hover:hover){
  .btn.ghost:hover:not([disabled]){
    background:var(--green-soft,#e8f4ee);
    border-color:var(--green,#1f7a54);
    box-shadow:0 2px 6px rgba(16,32,48,.10);
  }
}
.btn.ghost:active:not([disabled]){
  background:var(--green-soft,#e8f4ee);
  box-shadow:inset 0 2px 4px rgba(16,32,48,.14);
}

/* Das Skript der Warteliste setzt beim Absenden disabled und schreibt
   "…" in den Knopf. Bisher sah er dabei aus wie immer. */
.btn[disabled], .btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Icons tragen erst, wenn sie Abstand und eine gemeinsame Grundlinie
   haben - dafür sorgt das flex mit gap oben. Etwas größer als die
   bisherigen 15,4px, sonst gehen die feinen Pixelgrafiken neben der
   fetten Schrift unter. flex:none, damit das Icon bei langer
   Beschriftung nicht gestaucht wird - vorher stand es auf shrink:1.

   Hier steht bewusst "svg" und nicht nur ".px": Die vier Icon-Knöpfe
   werden von den Skripten erzeugt, und deren <svg> trägt gar keine
   Klasse - nachgemessen auf allen vier. Eine Regel auf .px allein
   liefe ins Leere. In Knöpfen kommen ausschließlich diese Icons vor.

   Das !important steht hier ungern, ist aber der einzige Weg: Die
   Skripte schreiben style="width:1.1em;height:1.1em" direkt ans <svg>,
   und ein Attribut-Stil schlägt jede Klassenregel. Nur die beiden
   Maße sind so gesetzt, alles andere bleibt normal überschreibbar.
   Sauberer wäre, den Inline-Stil in foerderbaer_anfrage.js und
   foerderbaer_finder.js zu streichen - dann kann diese Zeile ohne
   !important stehen. */
.btn svg, .btn .px{
  width:1.25em !important;
  height:1.25em !important;
  flex:none;
}

/* Zwei Nachzieher, beide gemessen:

   .rplz-box a.btn setzt in den Seiten display:inline-block und ist
   mit (0,2,1) spezifischer als .btn - ohne diese Zeile bliebe genau
   der Knopf "Regionale Förderprogramme ansehen" ohne Icon-Ausrichtung.

   .cta-head wird unter 820px ausgeblendet, weil dort der Burger
   übernimmt. Diese Regel steht in den Seiten mit (0,1,0), also gleich
   spezifisch wie .btn hier - mein display:inline-flex käme später und
   würde den Knopf auf dem Handy wieder einblenden. Deshalb hier
   nochmal mit (0,2,0). */
.rplz-box a.btn{ display:inline-flex; }
@media(max-width:820px){
  .btn.cta-head{ display:none; }
}

/* ---------- "Förder-Check" stand zweimal in der Kopfzeile ----------
   Auf 22 Seiten gab es den Punkt doppelt: einmal als Textlink im Menü,
   einmal als Knopf daneben - gleiche Beschriftung, gleiches Ziel, keine
   200 Pixel auseinander.

   Entfernen konnte man den Link nicht: Unterhalb 820px ist der KNOPF
   ausgeblendet (Regel darüber), dort ist der Menüpunkt der einzige Weg
   zum Förder-Check. Umgekehrt ist auf breiten Schirmen der Knopf da.

   Deshalb tragen genau diese Links die Klasse "nur-menue" und
   verschwinden, sobald der Knopf sichtbar wird. Die beiden Regeln sind
   exakt gegenläufig - eines von beidem ist immer zu sehen.

   NICHT markiert sind die Betriebe-Seiten: Dort heißt der Knopf
   "Eintragen" und führt woanders hin, der Menüpunkt wird also gebraucht. */
@media(min-width:821px){
  .nav .links a.nur-menue{ display:none; }
}

/* Wer "Bewegung reduzieren" eingestellt hat, bekommt die Zustände
   weiterhin - nur eben ohne Verschiebung und ohne Überblendung. Die
   Farb- und Schattenwechsel bleiben, sie sind die eigentliche
   Rückmeldung. */
@media(prefers-reduced-motion:reduce){
  .btn{ transition:none; }
  .btn:hover, .btn:active{ transform:none; }
}