/* Newsletter-Anmeldung "Die Lage". Fuss, Fenster (Desktop) und Leiste (Handy) aus einer Quelle. WICHTIG ZUM FENSTER: position:fixed bricht, sobald ein VORFAHRE ein transform, filter oder eine Animation mit fill-mode traegt, denn der wird dann zum enthaltenden Block. Symptom ist der halb geblurrte Hintergrund. Deshalb haengt das Fenster direkt am und nie in einer Section. */ .nl-kick { font-family: var(--font-d, 'Space Mono', monospace); font-size: var(--fs-xxs, .69rem); letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #0b5560); } .nl-h { font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 400; line-height: 1.25; margin: .5rem 0 .6rem; color: var(--ink, #1a1a1a); } .nl-t { font-size: var(--fs-sm, .9rem); line-height: 1.65; color: var(--gray-700, #33312e); margin: 0 0 .9rem; } .nl-probe { font-size: var(--fs-sm, .9rem); line-height: 1.5; color: var(--ink, #1a1a1a); border-left: 2px solid var(--accent, #0b5560); padding: .35rem 0 .35rem .8rem; margin: 0 0 1rem; border-radius: 0; /* einseitige Kante bleibt eckig */ } .nl-probe span { display: block; font-family: var(--font-d, 'Space Mono', monospace); font-size: var(--fs-xxs, .69rem); letter-spacing: .06em; text-transform: uppercase; color: var(--gray-600, #5f5c57); margin-bottom: .25rem; } .nl-lab { display: block; font-size: var(--fs-xs, .8rem); color: var(--gray-700, #33312e); margin-bottom: .3rem; } .nl-opt { color: var(--gray-600, #5f5c57); font-size: var(--fs-xxs, .69rem); } .nl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nl-in { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-sm, .9rem); padding: .6rem .75rem; background: var(--paper-2, #faf8f5); border: 1px solid var(--hairline, #ddd8d0); border-radius: 0; color: var(--ink, #1a1a1a); } .nl-in:focus-visible { outline: 2px solid var(--accent, #0b5560); outline-offset: 1px; } .nl-sel { flex: 0 0 7.5rem; } .nl-namen { margin-top: .75rem; } .nl-namen-reihe { display: flex; gap: .5rem; flex-wrap: wrap; } .nl-namen-reihe .nl-in:not(.nl-sel) { flex: 1 1 8rem; } .nl-check { display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 1rem; font-size: var(--fs-xs, .8rem); line-height: 1.55; color: var(--gray-700, #33312e); } .nl-check input { margin-top: .2rem; flex: 0 0 auto; } .nl-check a { color: var(--accent, #0b5560); } .nl-btn { display: block; width: 100%; font: inherit; font-size: var(--fs-sm, .9rem); padding: .7rem 1.2rem; background: var(--accent, #0b5560); color: #fff; border: 1px solid var(--accent, #0b5560); border-radius: 0; cursor: pointer; } .nl-btn:hover { background: #0d6470; } .nl-btn:disabled { opacity: .6; cursor: default; } .nl-fein { font-family: var(--font-d, 'Space Mono', monospace); font-size: var(--fs-xxs, .69rem); line-height: 1.6; color: var(--gray-600, #5f5c57); margin: .7rem 0 0; } .nl-fein a { color: var(--accent, #0b5560); } /* Die Fallen. Nicht display:none, das ueberspringen manche Automaten. */ .nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Erfolg */ .nl-ok-h { font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-size: 1.3rem; font-weight: 400; line-height: 1.3; margin: .5rem 0 .6rem; color: var(--ink, #1a1a1a); } .nl-ok-t { font-size: var(--fs-sm, .9rem); line-height: 1.65; color: var(--gray-700, #33312e); margin: 0; } /* ------------------------------------------------------------ Fuss */ .nl-fuss { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; padding: 2.5rem 0 2rem; border-top: 1px solid var(--hairline, #ddd8d0); } @media (max-width: 760px) { .nl-fuss { grid-template-columns: 1fr; gap: 1.5rem; } } /* ------------------------------------------------------------ Band Steht mitten im Text und muss sich deshalb vom Fuss unterscheiden, sonst liest es sich als Dopplung. Der Fuss ist zweispaltig und offen, das Band ist eine geschlossene Flaeche mit Kante links. */ .nl-band { display: grid; grid-template-columns: 1fr minmax(16rem, 22rem); gap: 1.75rem; align-items: center; background: var(--paper-2, #faf8f5); border: 1px solid var(--hairline, #ddd8d0); border-left: 3px solid var(--accent, #0b5560); padding: 1.5rem 1.75rem; margin: 2.5rem 0; } /* Das Band steht MITTEN im Fliesstext, und Textseiten setzen ihre eigenen h2/p-Regeln. `.mthk-reading h2` (0,1,1) schlaegt `.nl-h` (0,1,0) und gab der Bandueberschrift auf der Methodikseite die fette Seitentypo samt Linie darunter. Deshalb hier durchgaengig zweistufig selektiert. */ .nl-band .nl-h { font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 400; line-height: 1.25; letter-spacing: 0; color: var(--ink, #1a1a1a); margin: .35rem 0 .6rem; padding: 0; border: 0; } .nl-band .nl-t { font-size: var(--fs-sm, .9rem); line-height: 1.65; color: var(--gray-700, #33312e); margin: 0; max-width: none; } .nl-band .nl-check { margin: .75rem 0 0; } .nl-band .nl-fein { margin-top: .5rem; } /* Feld und Knopf nebeneinander. Der Knopf schrumpft nicht mit. */ .nl-zeile { display: flex; gap: .5rem; } .nl-zeile .nl-in { flex: 1 1 auto; min-width: 0; } .nl-zeile .nl-btn { width: auto; flex: 0 0 auto; white-space: nowrap; } @media (max-width: 760px) { .nl-band { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.25rem 1.25rem 1.4rem; } /* Auf 360px bleibt vom Feld neben "Abonnieren" nichts uebrig. */ .nl-zeile { flex-direction: column; } .nl-zeile .nl-btn { width: 100%; } } /* ---------------------------------------------------- Fenster Desktop */ .nl-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(26, 26, 26, .45); display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .nl-modal .nl-karte { position: relative; width: 100%; max-width: 27.5rem; background: var(--paper, #fdfcfa); border: 1px solid var(--hairline, #ddd8d0); padding: 1.75rem 1.9rem 1.6rem; max-height: 90vh; overflow-y: auto; } .nl-zu { position: absolute; top: .6rem; right: .75rem; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--gray-600, #5f5c57); cursor: pointer; padding: .25rem .4rem; } .nl-zu:focus-visible { outline: 2px solid var(--accent, #0b5560); } /* ------------------------------------------------------ Leiste Handy */ .nl-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; } .nl-leiste .nl-karte { position: relative; background: var(--paper, #fdfcfa); border-top: 1px solid var(--hairline, #ddd8d0); box-shadow: 0 -2px 12px rgba(26, 26, 26, .08); padding: 1rem 1.1rem 1.1rem; /* Seit Anrede/Vorname/Nachname auch hier stehen (27.07.2026) kann die Karte auf kleinen Displays hoeher werden als der Bildschirm -- Deckel statt den ganzen Screen zu verdecken. */ max-height: 85vh; overflow-y: auto; } .nl-leiste .nl-h { font-size: 1.05rem; margin: .35rem 0 .6rem; } .nl-leiste .nl-fein { display: none; } /* Fund 27.07.2026: der Menü-FAB (.pk-burger, html/assets/base.css) sitzt fix bei bottom:1.25rem;right:1.25rem mit z-index:10001 -- HOEHER als die Leiste (z-index:9000). Die Leiste haengt an bottom:0 und waechst nach oben, der FAB bleibt an derselben Stelle stehen: sein unterer Bereich (wo seit heute Anrede/Vorname/Nachname den Abonnieren-Knopf nach unten schieben) liegt deshalb IMMER in der FAB-Zone, unabhaengig von der Kartenhoehe. Ein Deckel/Puffer per padding waere nur eine kosmetische Luecke am Kartenende; sauberer ist, den FAB genau so lange auszublenden, wie die Leiste offen ist -- er bleibt auf jeder anderen Seite/jedem anderen Zustand unveraendert erreichbar. Reines CSS, keine Kopplung an nav.js noetig: :has() reagiert automatisch, sobald das Leiste-Element im DOM erscheint/verschwindet. */ body:has(.nl-leiste) .pk-burger { display: none; } @media (prefers-reduced-motion: no-preference) { .nl-modal, .nl-leiste { animation: nl-auf .22s ease-out; } @keyframes nl-auf { from { opacity: 0; } to { opacity: 1; } } }