/* ================================================================== LUSTVIERTEL — ULM / CHROME Rahmen der Seite: Kopfbalken, Altersschranke, Fuss, Einwilligung, Brotkrume. Laedt nach ulm.css und setzt genau die Bauteile neu, die dort nur entschaerft, aber nicht neu gebaut wurden. Warum diese Datei ueberhaupt noetig ist: Der Rahmen war der letzte Rest des spanischen Entwurfs. Die schwebende Pille in der Mitte, der Glaseffekt, die Kursivserife im Wortzeichen, die runde Modalbox — das sind vier Formen, die alle dasselbe sagen: Software-Startseite 2021. Ulm sagt: Beschilderung. Beschilderung heisst: eine Kante, die durchlaeuft. Der Balken sitzt nicht IM Bild, er begrenzt es. Er hat keine Transparenz, weil ein Schild nichts durchscheinen laesst, und keinen Radius, weil ein Schild geschnitten und nicht gegossen wird. Die Marke steht in der linken Fluchtlinie des Satzspiegels, die Wege stehen in einer buendigen Reihe daneben, die eine Handlung steht als geschlossene Flaeche rechts. Drei Zonen, eine Linie. Reihenfolge im : nach ulm.css. Sonst gewinnen wieder casa.css und enhance.css mit Kapsel, Verlauf und Schlagschatten. ================================================================== */ /* ================================================================== 1 — ZUSATZTOKEN Nur, was der Rahmen braucht und ulm.css noch nicht kennt. ================================================================== */ :root{ /* Balkenhoehe als Variable, weil drei Dinge davon abhaengen: der Balken selbst, die Oberkante des Mobilmenues und der obere Freiraum der Seite. Ein Wert, keine drei Stellen zum Vergessen. */ --nav-h:64px; /* Haarlinie auf schwarzem Grund. --hair aus ulm.css ist schwarz auf Papier und im Fussfeld unsichtbar; die Umkehrung fehlte. */ --hair-p:#f4f2ed40; --hair-p2:#f4f2ed26; /* Die Fahne als ein einziger Wert. Drei Bauteile tragen dasselbe 6px-Band (Altersschranke, Fuss, Einwilligung). Einmal definiert, damit die Drittel nicht auseinanderlaufen. */ --fahne:linear-gradient(90deg, var(--sw) 0 33.333%, var(--rt) 33.333% 66.666%, var(--gd) 66.666% 100%); } /* Sprungziele duerfen nicht unter den Balken rutschen. */ html{scroll-padding-top:calc(var(--nav-h) + 16px)} /* ================================================================== 2 — KOPFBALKEN Aus der schwebenden Leiste wird ein Schild: volle Breite, flach, eine schwarze Linie unten. Die Linie ist das ganze Bauteil — sie trennt Rahmen von Inhalt und ersetzt Schatten, Unschaerfe und Farbverlauf, die vorher dieselbe Aufgabe unsauber geloest haben. ================================================================== */ header.nav{ position:fixed !important;top:0;left:0;right:0;z-index:200; padding:0 !important; background:var(--pap) !important; /* deckend: nichts scheint durch */ border-bottom:1px solid var(--sw) !important; box-shadow:none !important; } /* casa.css zieht unter dem Balken ein 2px-Fahnenband. Zwei Kanten uebereinander sind eine Kante zu viel; die schwarze Linie gewinnt. */ header.nav::after{display:none !important} header.nav .nav-inner{ display:flex;align-items:center;gap:0; height:var(--nav-h) !important; max-width:var(--maxw) !important; margin:0 auto; padding-inline:var(--sp); } /* ---------------- Wortzeichen ------------------------------------- Die Kursivserife war der Widerspruch: eine Schreibfeder als Logo ueber einer Groteskseite. Ersetzt durch fette Versalien, eng getrackt — ein Wort als Block, nicht als Unterschrift. Das SVG daneben bleibt strikt 26x26 und quadratisch; hier wird ihm nur Platz und eine feste Groesse zugesichert, damit es nicht mitwaechst. */ header.nav .brand{ display:flex;align-items:center;gap:10px; font-family:var(--grot) !important; font-style:normal !important; font-weight:800 !important; font-size:1.04rem !important; text-transform:uppercase; letter-spacing:.02em !important; /* eng: das Wort soll ein Block sein */ line-height:1; color:var(--sw) !important; border-bottom:0 !important; /* die globale rote Linkkante raus */ margin-right:var(--sp); flex:none; } header.nav .brand span{letter-spacing:inherit;color:var(--sw) !important} header.nav .brand svg{ width:26px;height:26px;flex:none;display:block;overflow:visible; } header.nav .brand:hover, header.nav .brand:hover span{color:var(--rt) !important} /* ---------------- Wegereihe --------------------------------------- Keine Pille mehr: die Links stehen buendig in einer Reihe, jeder in seiner eigenen Zelle, getrennt durch Haarlinien. Die Zellen laufen ueber die volle Balkenhoehe, damit die Umkehrung beim Ueberfahren als Flaeche und nicht als Etikett erscheint. */ header.nav nav.pill{ position:static !important; transform:none !important; display:flex !important;align-items:stretch; align-self:stretch; margin:0 !important; gap:0 !important; padding:0 !important; background:none !important; border:0 !important; border-left:1px solid var(--hair-2) !important; /* Fuge zur Marke */ overflow:visible; } header.nav nav.pill a{ display:inline-flex;align-items:center; padding:0 16px !important; font-family:var(--grot) !important; font-weight:600 !important; font-size:.72rem !important; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; color:var(--sw) !important; background:none !important; border:0 !important; transition:none !important; } header.nav nav.pill a + a{border-left:1px solid var(--hair) !important} /* Umkehrung statt Tonung: harter Schnitt, kein Uebergang. */ header.nav nav.pill a:hover, header.nav nav.pill a:focus-visible{ background:var(--sw) !important; color:var(--pap) !important; } /* ---------------- Die eine Handlung ------------------------------- Bestenliste ist der einzige Knopf im Rahmen, also bekommt er die geschlossene Flaeche: schwarz, rechtsbuendig auf der Rasterkante, ueber die volle Balkenhoehe. Rot bleibt dem Ueberfahren vorbehalten — ein rotes Element pro Bildschirm, so steht es in ulm.css. */ header.nav a.nav-cta{ margin-left:auto !important; align-self:stretch; display:inline-flex;align-items:center; gap:0; padding:0 24px !important; background:var(--sw) !important; color:var(--pap) !important; border:0 !important; font-family:var(--grot) !important; font-weight:700 !important; font-size:.72rem !important; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; transform:none !important; transition:background .12s linear !important; } header.nav a.nav-cta:hover{ background:var(--rt) !important;color:var(--pap) !important;transform:none !important; } /* Der Glanzstreifen, der ueber den Knopf faehrt: reine Zier. */ header.nav a.nav-cta::after{display:none !important} /* Der Stern ist ein Bildchen ohne Funktion — das Wort sagt bereits alles. Ulm streicht, was doppelt spricht. */ header.nav a.nav-cta .tp-star, .nav-mobile a.nm-cta .tp-star{display:none !important} /* ---------------- Zwischenbreite 901–1279 ------------------------- Hier hatte casa.css die Pille nach rechts geschoben. Mit fuenf Wegen und einem Knopf wird es eng, also verkleinert sich Schrift und Zelle — die Reihe bleibt aber buendig an der Marke stehen und wandert nicht in die Mitte oder nach rechts. */ @media (min-width:901px) and (max-width:1279px){ header.nav .brand{font-size:.96rem !important;margin-right:18px} header.nav nav.pill{margin-left:0 !important;margin-right:0 !important} header.nav nav.pill a{padding:0 11px !important;font-size:.64rem !important;letter-spacing:.1em} header.nav a.nav-cta{padding:0 16px !important;font-size:.64rem !important;letter-spacing:.1em} } /* ================================================================== 3 — BURGER UND MOBILMENUE Der Burger war ein abgerundetes Glasplaettchen. Drei schwarze Balken auf Papier reichen: das Zeichen ist seit fuenfzehn Jahren gelernt, es braucht keinen Traeger. Das Menue wird kein schwebendes Kaertchen mehr, sondern eine Verlaengerung des Schilds: volle Breite, Papiergrund, Zeilen durch Haarlinien getrennt. Es klappt nicht auf, es ist da oder nicht — Ulm blendet nicht weich ein. ================================================================== */ .nav-mobile{display:none !important} @media (max-width:900px){ :root{--nav-h:56px} header.nav{ padding:0 !important; background:var(--pap) !important; border-bottom:1px solid var(--sw) !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; } header.nav .nav-inner{height:var(--nav-h) !important;padding-inline:16px} header.nav .brand{font-size:.95rem !important;margin-right:0} header.nav nav.pill{display:none !important} .nav-burger{ display:inline-flex !important;flex-direction:column;justify-content:center; gap:5px;margin-left:auto; width:44px;height:44px;padding:11px 6px; background:none !important;border:0 !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; cursor:pointer; } .nav-burger span{ display:block;height:2px;width:100%; background:var(--sw) !important; transition:none !important; /* harter Schnitt, kein Klappen */ } /* Das Kreuz bleibt: es zeigt einen Zustand an, ist also Funktion. */ .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-mobile{ display:none !important; position:fixed;top:calc(var(--nav-h) + 1px);left:0;right:0;z-index:190; flex-direction:column;gap:0 !important; padding:0 !important;margin:0; background:var(--pap) !important; border:0 !important; border-bottom:1px solid var(--sw) !important; opacity:1 !important;transform:none !important; transition:none !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; max-height:calc(100vh - var(--nav-h) - 1px); overflow-y:auto; } .nav-mobile.open{display:flex !important;pointer-events:auto} .nav-mobile a{ display:flex;align-items:center; padding:15px 16px !important; font-family:var(--grot) !important; font-weight:600 !important;font-size:.8rem !important; text-transform:uppercase;letter-spacing:.14em; color:var(--sw) !important; background:none !important; border:0 !important; border-top:1px solid var(--hair-2) !important; } .nav-mobile a:first-child{border-top:0 !important} .nav-mobile a:hover,.nav-mobile a:focus{ background:var(--sw) !important;color:var(--pap) !important; } /* Auch mobil bleibt die eine Handlung eine schwarze Flaeche — linksbuendig wie alles andere, nicht zentriert. */ .nav-mobile a.nm-cta{ justify-content:flex-start !important;text-align:left !important; margin-top:0 !important;font-weight:700 !important; background:var(--sw) !important;color:var(--pap) !important; } .nav-mobile a.nm-cta:hover{background:var(--rt) !important;color:var(--pap) !important} } /* ================================================================== 4 — FREIRAUM UNTER DEM BALKEN Der geerbte Wert (116px) stammt aus einer 80px hohen, schwebenden Leiste mit Aussenabstand. Das Schild ist 65px hoch (64 + Linie), also wird der Freiraum aus der Variablen gerechnet statt geraten. Am Telefon sinkt --nav-h auf 56px und der Wert folgt automatisch. ================================================================== */ main.wrap.page,.page{ padding-top:calc(var(--nav-h) + 44px) !important; } /* Die Startseite hat kein .page, sondern direkt Sektionen. Der Abschnittsabstand aus ulm.css reicht am Telefon nicht unter das Schild — hier steht die Untergrenze. Bewusst ohne !important, damit die Hero-Schicht sie ueberschreiben darf. */ main#contenido > section:first-child{ padding-top:calc(var(--nav-h) + 2.4rem); } /* ================================================================== 5 — ALTERSSCHRANKE War: gerundetes Fenster, mittig, Foto mit Goldring und Schlagschatten. Ist: ein Ulmer Bogen. Papierfeld ueber der ganzen Flaeche, darauf eine geschnittene Tafel in der linken Fluchtlinie des Satzspiegels, Fahnenband als Oberkante, Satz buendig links. Das Foto bleibt. Begruendung: Ulm hat Fotografie nie abgelehnt, sondern sie ins Raster gezwungen — hart beschnitten, ohne Rahmen, ohne Verlauf, als Flaeche gleichwertig neben dem Satz. Genau so sitzt es hier: exakt quadratisch, in der ersten Spalte, ohne Ring. ================================================================== */ #age-gate{ position:fixed;inset:0;z-index:9999; display:block !important; background:var(--pap) !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; overflow-y:auto; /* Die Tafel steht auf derselben Linie wie der Satzspiegel der Seite, nicht in der Bildmitte. */ padding:clamp(24px,9vh,110px) var(--sp) clamp(24px,9vh,110px) max(var(--sp), calc((100vw - var(--maxw)) / 2 + var(--sp))); } #age-gate[data-hidden="true"]{display:none !important} .ag-box{ max-width:680px; margin:0 !important; padding:26px !important; text-align:left !important; border:1px solid var(--sw) !important; border-top:6px solid transparent !important; /* Fahne im oberen Randbereich: das Band ist Teil der Kante, kein zusaetzliches Element. Drei gleiche Drittel, hart geschnitten. Bewusst als Einzelangaben statt Kurzform — faellt die Kurzform beim Parsen durch, waere auch der Papiergrund weg. */ background-color:var(--pap) !important; background-image:var(--fahne) !important; background-repeat:no-repeat !important; background-position:left top !important; background-size:100% 6px !important; background-origin:border-box !important; background-clip:border-box !important; } .ag-foto{ display:block; width:100% !important;max-width:none !important; aspect-ratio:16/5; /* am Telefon ein harter Streifen */ height:auto; object-fit:cover;object-position:50% 40%; margin:0 0 20px !important; border:0 !important; } .ag-box .ag-h{ font-family:var(--disp) !important; font-weight:400 !important; text-transform:uppercase; font-size:clamp(1.7rem,4.2vw,2.5rem) !important; line-height:.94;letter-spacing:-.012em; color:var(--sw) !important; max-width:18ch; margin:0 0 14px !important; text-align:left !important; } .ag-box p.muted,.ag-box .muted{ font-family:var(--grot) !important; font-size:.95rem !important;line-height:1.5; color:var(--sw-2) !important; max-width:56ch;margin:0 !important;text-align:left !important; } /* Zwei Gewichte, nicht zwei Knoepfe: die schwarze Flaeche fuehrt, der Ausstieg ist ein unterstrichener Text. Ein zweiter Rahmen wuerde beide gleich wichtig machen. */ .ag-actions{ display:flex !important;flex-direction:row !important; align-items:center;justify-content:flex-start !important; gap:26px;flex-wrap:wrap; margin-top:24px !important; padding-top:20px; border-top:1px solid var(--hair-2); } .ag-actions .btn{margin:0} .ag-leave{ background:none !important;border:0 !important;padding:0 !important; font-family:var(--grot) !important; font-size:.74rem !important;font-weight:500 !important; text-transform:uppercase;letter-spacing:.12em; color:var(--sw-2) !important; text-decoration:underline !important;text-underline-offset:4px; text-decoration-thickness:1px; cursor:pointer; } .ag-leave:hover{color:var(--rt) !important} /* Ab 620px zwei Spalten: Foto als Quadrat in der ersten Spalte, Satz in der zweiten. Das ist die Ulmer Grundfigur — Bild und Text auf derselben Oberkante, gleiche Rinne wie im Seitenraster. */ @media (min-width:620px){ .ag-box{ display:grid; grid-template-columns:180px minmax(0,1fr); column-gap:var(--sp); align-items:start; padding:30px !important; } .ag-foto{ grid-column:1;grid-row:1 / span 3; width:180px !important;height:180px; aspect-ratio:1/1; /* hart quadratisch beschnitten */ margin:0 !important; } .ag-box .ag-h, .ag-box .muted, .ag-box .ag-actions{grid-column:2} } /* ================================================================== 6 — FUSSFELD Die einzige Stelle, an der eine grosse schwarze Flaeche ihre Berechtigung hat: der Fuss ist das Ende des Blattes, kein Inhalt. Papierfarbene Schrift auf Schwarz, Wege als buendige Versalreihe zwischen zwei Haarlinien. Das Fahnenband oben bleibt, wird aber hart: 6px, drei gleiche Drittel. Das schwarze Drittel liest sich gegen das Papier der Seite darueber — dort ist es die Kante selbst. ================================================================== */ .site-footer{ position:relative; background:var(--sw) !important; color:var(--pap) !important; border-top:0 !important; margin-top:0 !important; padding:clamp(38px,5.5vw,64px) 0 clamp(34px,5vw,58px) !important; } .site-footer::before{ content:'';position:absolute;top:0;left:0;right:0; height:6px !important;opacity:1 !important; background:var(--fahne) !important; border-image:none !important; } .site-footer .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp)} /* Der Affiliate-Hinweis bleibt gesetzt hervorgehoben, aber ohne Kasten: auf schwarzem Grund reicht die rote Kante links. */ .site-footer .disclosure{ background:none !important; border:0 !important; border-left:6px solid var(--rt) !important; padding:2px 0 2px 18px !important; margin:0 0 30px !important; color:var(--pap) !important; font-family:var(--grot) !important; font-size:.9rem !important;line-height:1.5; max-width:72ch !important; } .site-footer .foot-nav{ display:flex !important;flex-wrap:wrap; gap:0 !important;margin:0 !important; border-top:1px solid var(--hair-p) !important; border-bottom:1px solid var(--hair-p) !important; } .site-footer .foot-nav a{ display:inline-flex;align-items:center; padding:14px 16px !important; font-family:var(--grot) !important; font-weight:600 !important;font-size:.68rem !important; text-transform:uppercase;letter-spacing:.14em; color:var(--pap) !important; border:0 !important; border-left:1px solid var(--hair-p2) !important; transition:none !important; } /* Der erste Weg steht exakt auf der Fluchtlinie — kein Einzug. */ .site-footer .foot-nav a:first-child{border-left:0 !important;padding-left:0 !important} .site-footer .foot-nav a:hover, .site-footer .foot-nav a:focus-visible{ background:var(--pap) !important;color:var(--sw) !important; } .site-footer .muted,.site-footer p.muted,.site-footer .small, .site-footer p{ color:#f4f2ed99 !important; font-family:var(--grot) !important; } .site-footer .muted,.site-footer p.muted,.site-footer .small{ font-size:.78rem !important;letter-spacing:.01em; margin:22px 0 0 !important;max-width:70ch; } @media (max-width:520px){ /* Am Telefon wird aus der Reihe ein Stapel: eine Zeile pro Weg, durch Haarlinien getrennt. Gleiche Logik, andere Achse. */ .site-footer .foot-nav{border-bottom:0 !important} .site-footer .foot-nav a{ width:100%;padding:13px 0 !important; border-left:0 !important; border-bottom:1px solid var(--hair-p2) !important; } .site-footer .foot-nav a:hover{background:none !important;color:var(--rt) !important} } /* ================================================================== 7 — EINWILLIGUNGSBANNER Gleiche Sprache wie die Altersschranke, nur am unteren Rand: geschnittene Kante, Fahnenband oben, Satz links, zwei quadratische Knoepfe. Es faehrt nicht mehr herein — ein Hinweis, der sich selbst ankuendigt, ist eine Werbeform. ================================================================== */ .lv-consent{ position:fixed;left:0;right:0;bottom:0;z-index:9998; transform:none !important; transition:none !important; border:0 !important; border-top:6px solid transparent !important; border-image:none !important; /* casa.css hing hier die Fahne rein */ box-shadow:none !important; background-color:var(--pap) !important; background-image:var(--fahne) !important; background-repeat:no-repeat !important; background-position:left top !important; background-size:100% 6px !important; background-origin:border-box !important; background-clip:border-box !important; } .lv-consent-in{ max-width:var(--maxw);margin:0 auto; padding:18px var(--sp) !important; display:flex;align-items:center;gap:26px;flex-wrap:wrap; text-align:left; } .lv-consent-txt{ margin:0;flex:1 1 320px;min-width:260px; font-family:var(--grot) !important; font-size:.88rem !important;line-height:1.5; color:var(--sw-2) !important; max-width:78ch;text-align:left !important; } .lv-consent-txt strong{color:var(--sw) !important;font-weight:650} .lv-consent-txt a{ color:var(--sw) !important; text-decoration:none; border-bottom:2px solid var(--rt) !important; } .lv-consent-txt a:hover{color:var(--rt) !important} .lv-consent-btns{display:flex;align-items:stretch;gap:12px;flex-shrink:0} .lv-consent .btn{ padding:13px 24px !important;font-size:.74rem !important;letter-spacing:.12em; margin:0; } /* Ablehnen ist gleich gross, aber offen: Umriss statt Flaeche. Die Hierarchie liegt in der Fuellung, nicht in der Groesse. */ .lv-consent .lv-no{ background:none !important; border:1px solid var(--sw) !important; color:var(--sw) !important; font-family:var(--grot) !important; font-weight:700 !important;font-size:.74rem !important; text-transform:uppercase;letter-spacing:.12em; padding:13px 24px !important; cursor:pointer; transition:background .12s linear; } .lv-consent .lv-no:hover{background:var(--sw) !important;color:var(--pap) !important} @media (max-width:760px){ .lv-consent-in{padding:16px !important;gap:16px} .lv-consent-btns{width:100%} .lv-consent-btns .btn,.lv-consent .lv-no{flex:1;justify-content:center;text-align:center} } /* ================================================================== 8 — BROTKRUME ulm.css gibt ihr bereits gesperrte Versalien. Was fehlte, war die Zuordnung: eine Haarlinie darunter macht aus der Zeile die Kopfzeile des Dokuments statt eines losen Etiketts. ================================================================== */ .ls-crumb{ display:block; max-width:none !important; margin:0 0 1.7rem !important; padding:0 0 .55rem !important; border-bottom:1px solid var(--hair-2) !important; line-height:1.4 !important; color:var(--sw-2) !important; text-align:left !important; justify-content:flex-start !important; /* lqx.css zentrierte sie */ opacity:1 !important; } .ls-crumb a{ display:inline; color:var(--sw) !important; border-bottom:0 !important; padding:0 !important;margin:0 !important; } .ls-crumb a:hover{color:var(--rt) !important} .ls-crumb span{margin:0 .55rem !important;opacity:1 !important;color:var(--sw-2) !important} /* ================================================================== NACHTRAG — Altersabfrage: Lage korrigiert Die Tafel stand fluchtlinks UND ganz oben. Fluchtlinks ist richtig (Ulm zentriert nicht), oben links allein auf einem 1440er Schirm liest sich aber wie ein Layoutfehler, nicht wie eine Setzung. Loesung: waagerecht bleibt sie auf der Satzspiegelkante, senkrecht sitzt sie in der optischen Mitte. Das ist die uebliche Ulmer Aufteilung — eine Achse gesetzt, eine Achse ausgeglichen — und die Tafel bekommt gleichzeitig ihre volle Breite zurueck. ================================================================== */ #age-gate{ display:flex !important; align-items:center; justify-content:flex-start; padding-block:clamp(24px,6vh,72px) !important; } .ag-box{ width:100%; max-width:720px !important; padding:clamp(22px,2.6vw,34px) !important; } @media(max-width:620px){ #age-gate{align-items:flex-start;padding-block:clamp(20px,5vh,48px) !important} }