/* ================================================================== LUSTVIERTEL — ULM Design-Schicht nach Hochschule für Gestaltung Ulm / Otl Aicher. Diese Datei laedt als LETZTE. Sie ueberschreibt die Erbschaft aus Casa Lujuria — und zwar bewusst brutal, weil der Vorgaenger eine ganz andere Sprache spricht: warme Zeitschrift, Mittelachse, Bogen, Kursivserife, Schreibschrift, Schlagschatten, Leuchten. Ulm spricht das Gegenteil: Raster statt Komposition. Alles sitzt auf Spalten, die man sehen darf. Linien sind Haarlinien, keine Schatten. Flucht links. Nie zentriert. Flattersatz rechts. Zentrierter Text ist der schnellste Weg, deutsch NICHT auszusehen. Eine Schriftfamilie. Grotesk. Kursive Serifen und Schreibschrift sind hier keine Option, sondern ein Fehler. Keine Dekoration. Kein Verlauf, kein Leuchten, kein Korn, keine Kugeln, kein Schimmer, keine Rundung. Was keine Funktion hat, fliegt raus. Farbe als Flaeche, nicht als Effekt. Schwarz, Rot, Gold liegen flach nebeneinander wie bei Aicher 1972 — nie ineinander. Zahlen tragen die Struktur. 01 02 03 in der linken Spalte. Reihenfolge im nicht aendern: ulm.css muss nach dia.css stehen, sonst gewinnt wieder die alte Schicht. ================================================================== */ /* ================================================================== 1 — TOKEN ================================================================== */ :root{ /* Der Grund ist Papier, nicht Gold. Ein Goldfeld ueber die ganze Seite ist Dekoration; bei Ulm traegt Weiss, und die Fahnenfarben kommen als gesetzte Flaechen dazu. */ --pap:#f4f2ed; /* Papier, warmgrau */ --pap-2:#eae7e0; /* zweite Ebene */ --pap-3:#dedad1; /* Raster, Fuellung */ --sw:#0d0d0d; /* Schwarz — Schrift und Struktur */ --sw-2:#3a3a3a; /* Grauwert fuer Nebentext */ --rt:#dd0000; /* Rot — Signal, nur eins pro Bildschirm */ --gd:#ffce00; /* Gold — Flaeche, nie Text */ --hair:#0d0d0d1f; /* Haarlinie, 12 % */ --hair-2:#0d0d0d3d; /* Haarlinie kraeftig */ /* Raster: 12 Spalten, Rinne 24. Der Satzspiegel sitzt links. */ --sp:24px; --col:12; --maxw:1240px; /* Typo. Eine Familie, ein Display-Schnitt. Sonst nichts. */ --grot:"Inter Tight",Helvetica,Arial,sans-serif; --disp:var(--anton,"Anton SC","Inter Tight",sans-serif); --mono:ui-monospace,"SFMono-Regular",Menlo,monospace; } /* ================================================================== 2 — ABRISS Erst raeumen, dann bauen. Alles, was aus dem Zeitschriftenlayout kommt, wird hier abgeschaltet — nicht ueberschrieben, abgeschaltet. ================================================================== */ /* Zierschichten */ .orbs,.orb,.grain,.embers,.ember, .feat-glow,.cta-glow,.hd-glow, .ls-fan-sec::before,.lq-hook::before{ display:none !important; } /* Rundungen. Ulm hat keine. */ *,*::before,*::after{border-radius:0 !important} /* Schatten und Leuchten raus. Tiefe entsteht durch Linie und Flaeche, nicht durch Weichzeichner. */ *,*::before,*::after{ box-shadow:none !important; text-shadow:none !important; filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Verlaufsschrift, Schimmer, Farbverlaeufe im Text */ .shimmer,.shimmer-txt,.shimmer .word{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; -webkit-text-fill-color:currentColor !important; color:var(--rt) !important; animation:none !important; } /* Weichzeichner-Einblendungen. Ulm blendet nicht weich ein. */ .reveal{ opacity:1 !important; transform:none !important; filter:none !important; } .word{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; } /* ================================================================== 3 — SCHRIFT Kursivserife und Schreibschrift kommen aus dem spanischen Entwurf. Beide werden hier vollstaendig ersetzt, nicht nur umgefaerbt: das war der Grund, warum die Seite trotz neuer Farben gleich aussah. ================================================================== */ html,body, .serif,.hero-serif,.shimmer-txt, .cl-ed-h em,.cl-cita-frase,.ls-fb-word, .ls-disp-media span,.ls-manifesto .serif, .page .narrow .gmast-dek p:first-child, .feat-h2,.cta-h2,.cl-ed-h,.stat-num,h1,.hero-h1{ font-family:var(--grot) !important; font-style:normal !important; } body{ background:var(--pap); color:var(--sw); font-size:17px; line-height:1.55; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; } /* Display: kondensiert, versal, eng. Das ist der einzige Schnitt, der laut sein darf. */ h1,h2,.hero-h1,.feat-h2,.cta-h2,.show-h2,.cl-ed-h,.ls-disp-line{ font-family:var(--disp) !important; font-weight:400 !important; text-transform:uppercase; letter-spacing:-.012em; line-height:.92; color:var(--sw) !important; text-align:left !important; margin:0 0 .44em; text-wrap:balance; } h1,.hero-h1{font-size:clamp(3rem,7.4vw,6.6rem)} h2,.feat-h2,.cta-h2,.show-h2,.cl-ed-h{font-size:clamp(1.9rem,4.1vw,3.5rem);margin-top:0} h3{ font-family:var(--grot) !important; font-weight:700;font-size:1.06rem; letter-spacing:-.008em;line-height:1.25; text-transform:none;color:var(--sw) !important; } h4{font-family:var(--grot) !important;font-weight:600;font-size:.95rem} p,li,dd{color:var(--sw-2) !important;max-width:64ch} strong,b{color:var(--sw) !important;font-weight:650} em{font-style:normal;color:var(--sw) !important;font-weight:650} /* Vorzeile: gesperrte Versalien, das Ulmer Etikett. */ .eyebrow,.cl-ed-ojo,.cl-fr-ojo,.rank-pill,.stat-label, .badge,.soon-badge,.ls-crumb{ font-family:var(--grot) !important; text-transform:uppercase !important; letter-spacing:.16em !important; font-size:.66rem !important; font-weight:700 !important; color:var(--sw) !important; text-align:left !important; } .eyebrow{ margin:0 0 1.1rem;padding:0 0 .5rem; border-bottom:1px solid var(--hair-2); display:block; } .eyebrow::before{display:none !important} .lede,.hero-lede,.feat-sub{ font-family:var(--grot) !important; font-size:1.12rem !important;line-height:1.5; color:var(--sw-2) !important;max-width:52ch; text-align:left !important;font-style:normal !important; } /* Alles linksbuendig. Mittelachse ist die Signatur des Vorgaengers. */ .wrap,.narrow,.hero-wrap,.feat-head,.cta-band,.stats, .hero-cta,.ag-box,.cl-ed-in{text-align:left !important} /* ================================================================== 4 — RASTER Das Raster darf man sehen. Haarlinien statt Karten mit Schatten. ================================================================== */ .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp); } section{margin-top:0;padding-block:clamp(3.4rem,7vw,6.4rem)} section + section{border-top:1px solid var(--hair)} /* Ulmer Kolumne: laufende Nummer links, Inhalt rechts daneben. */ .wrap > .eyebrow{position:relative} @media(min-width:1000px){ .lq-lanes .wrap, #categorias.wrap, #escenarios.wrap{ display:grid; grid-template-columns:112px minmax(0,1fr); column-gap:var(--sp); } .lq-lanes .wrap > .eyebrow, #categorias > .eyebrow, #escenarios > .eyebrow{ grid-column:1;margin:0;border:0; writing-mode:vertical-rl;transform:rotate(180deg); align-self:start;letter-spacing:.24em !important; } .lq-lanes .wrap > *:not(.eyebrow), #categorias > *:not(.eyebrow), #escenarios > *:not(.eyebrow){grid-column:2} } hr{border:0;border-top:1px solid var(--hair-2);margin:3rem 0} /* ================================================================== 5 — FLAECHE UND FARBE Schwarz, Rot, Gold liegen nebeneinander, nie ineinander. Rot ist Signal: hoechstens ein rotes Element pro Bildschirm. ================================================================== */ .card,.glass,.feat-card,.step-card,.cat-card, .ls-verdict,.casa-aparte,.faq-item{ background:var(--pap) !important; border:1px solid var(--hair-2) !important; padding:22px !important; transition:background .12s linear,border-color .12s linear; } .card:hover,.feat-card:hover,.cat-card:hover{ transform:none !important; background:var(--pap-2) !important; border-color:var(--sw) !important; } a{color:var(--sw);text-decoration:none;border-bottom:1px solid var(--rt)} a:hover{color:var(--rt);text-decoration:none} .go,.cl-esc-go,.cl-ed-link{ font-family:var(--grot) !important; font-weight:700 !important;font-size:.8rem !important; text-transform:uppercase;letter-spacing:.1em; color:var(--sw) !important;border-bottom:2px solid var(--rt) !important; display:inline-block;padding-bottom:2px; } .go:hover,.cl-esc-go:hover,.cl-ed-link:hover{color:var(--rt) !important} /* Knopf: schwarze Flaeche, harte Kante, kein Radius, kein Schatten. Der rote Knopf ist die Ausnahme fuer genau eine Handlung. */ .btn{ background:var(--sw) !important;color:var(--pap) !important; border:0 !important; font-family:var(--grot) !important;font-weight:700 !important; font-size:.82rem !important;text-transform:uppercase;letter-spacing:.12em; padding:15px 26px !important; transition:background .12s linear; } .btn:hover{background:var(--rt) !important;transform:none !important} .btn .arrow{ background:none !important;color:currentColor !important; width:auto !important;height:auto !important;font-size:1em !important; } .btn-ghost{ background:transparent !important;color:var(--sw) !important; border:1px solid var(--sw) !important; } .btn-ghost:hover{background:var(--sw) !important;color:var(--pap) !important} .badge{padding:5px 9px !important;border:1px solid var(--sw) !important;background:none !important} .badge.good{background:var(--gd) !important;color:var(--sw) !important;border-color:var(--gd) !important} .badge.warn{background:var(--rt) !important;color:var(--pap) !important;border-color:var(--rt) !important} .rank-pill{color:var(--rt) !important} /* Zahlenblock: Ziffern gross, tabellarisch, in Anton. */ .stat-num{ font-family:var(--disp) !important;font-weight:400 !important; font-variant-numeric:tabular-nums;letter-spacing:-.02em; color:var(--sw) !important;font-size:clamp(2.6rem,5vw,4rem) !important; } .stats{ background:none !important;border:0 !important; border-top:2px solid var(--sw) !important; padding:26px 0 0 !important;gap:0 !important; } .stat{padding-right:var(--sp)} .stat + .stat::before{ left:0 !important;top:0 !important;height:100% !important; background:var(--hair-2) !important; } /* Das Ziffernkorn der Szenarien: Ulm setzt die Nummer als Bauteil. */ .cl-esc-n{ font-family:var(--disp) !important; font-size:clamp(2.4rem,5vw,4.2rem) !important; color:var(--sw) !important;opacity:1 !important; font-variant-numeric:tabular-nums;line-height:.85; } .cl-esc-row{border-top:1px solid var(--hair-2);padding-top:26px} .step-n{ font-family:var(--disp) !important;color:var(--gd) !important; font-style:normal !important;font-size:2.6rem !important; } /* Die Fahne bleibt, aber flach und hart: drei gleiche Drittel. */ .casa-cinta{ height:6px !important;width:132px !important;margin:0 0 1.4rem !important; background:linear-gradient(90deg,var(--sw) 0 33.33%,var(--rt) 33.33% 66.66%,var(--gd) 66.66% 100%) !important; } .disclosure{ background:var(--pap-2) !important;border:0 !important; border-left:6px solid var(--rt) !important; padding:16px 18px !important;color:var(--sw-2) !important; font-size:.86rem !important;max-width:none !important; } /* ================================================================== 6 — BEWEGUNG Ulm bewegt sich nicht. Was bleibt, ist ein harter Schnitt. ================================================================== */ *{animation-duration:.001s !important} .marquee-row{animation:marquee 30s linear infinite !important} .marquee-item{ font-family:var(--grot) !important;font-style:normal !important; font-weight:700 !important;font-size:1rem !important; text-transform:uppercase;letter-spacing:.1em;color:var(--sw) !important; } .marquee-sec{ border-top:2px solid var(--sw) !important; border-bottom:2px solid var(--sw) !important; padding:14px 0 !important;background:var(--gd) !important; } .mq-dot{color:var(--rt) !important;margin:0 22px !important} @media(prefers-reduced-motion:reduce){.marquee-row{animation:none !important}} /* ================================================================== 7 — DIE LETZTEN SPANISCHEN BAUTEILE Zwei Formen tragen den alten Entwurf fast allein. Beide raus. ================================================================== */ /* Der Strahlenkranz hinter dem Namen: Jahrmarktplakat, spanische Feria. Genau das Gegenteil eines Ulmer Grunds. */ .hero-sec::before,.hero-sec::after{display:none !important} .hero-sec{overflow:visible !important;min-height:0 !important} /* Die fuenf Torbogen. Der Bogen ist das spanischste Element im ganzen Entwurf — maurisch, nicht deutsch. Ulm kennt das Rechteck. Die globale Radius-Null oben killt die Form schon; hier wird die Geometrie sauber neu gesetzt statt nur beschnitten. */ .hd-face{ border-radius:0 !important; aspect-ratio:3/4 !important; border:1px solid var(--sw) !important; } .hd-card{transform:none !important;--rot:0deg !important;--arc:0px !important;--lift:0px !important} .hd-card:hover{transform:none !important} .hd-tit{ font-family:var(--grot) !important;font-weight:700 !important; font-size:.76rem !important;text-transform:uppercase;letter-spacing:.12em; color:var(--sw) !important;background:none !important; padding:10px 0 0 !important; } .hd-n{ font-family:var(--disp) !important;font-variant-numeric:tabular-nums; color:var(--pap) !important;background:var(--sw) !important; padding:2px 8px !important;font-size:.9rem !important; } .hd-glifo{ font-family:var(--grot) !important;font-style:normal !important; text-transform:uppercase;letter-spacing:.14em;font-size:.6rem !important; font-weight:700 !important; } /* ================================================================== 8 — DER GRUND dia.css legt ein ganzflaechiges Goldfeld unter die Seite (`body` und `body.lqx::before`), beides mit !important. Das war fuer den spanischen Entwurf richtig: dort IST die Farbe der Raum. Ulm macht das Gegenteil. Der Grund ist Papier. Schwarz, Rot und Gold werden GESETZT — als Balken, Felder, Marken — und wirken nur, solange sie auf Weiss liegen. Ein goldener Vollgrund frisst genau die Wirkung auf, wegen der man die Farben ueberhaupt nimmt. ================================================================== */ html,body,body.lqx{ background-color:var(--pap) !important; color:var(--sw) !important; } body::before,body::after, body.lqx::before,body.lqx::after{ content:none !important; display:none !important; background:none !important; } /* Das Papier bekommt keine Textur, aber eine Rasterspur: eine sehr leise senkrechte Linie im Viertelabstand. Man sieht sie kaum, sie haelt die Seite aber sichtbar auf Achse. */ body.lqx{ background-image:linear-gradient(90deg,var(--hair) 0 1px,transparent 1px 100%) !important; background-size:calc((min(100vw,var(--maxw)) - 2*var(--sp)) / 4) 100% !important; background-position:calc(50vw - min(50vw,var(--maxw)/2) + var(--sp)) 0 !important; background-attachment:fixed !important; } @media(max-width:900px){body.lqx{background-image:none !important}} /* ================================================================== 9 — SCHREIBMASCHINE AUS maquina.js schrieb Ueberschriften Buchstabe fuer Buchstabe mit blinkendem Cursor. Nettes Detail — aber es ist Zierde, und Ulm hat keine. Ausserdem stand jede Ueberschrift beim Laden erst unfertig da, was bei Versalzeilen dieser Groesse wie ein Fehler aussieht. Der Bootstrap, der `mq` an haengt, ist raus, also greift die Maschinerie nie. Das hier ist nur das Netz darunter: falls die Klasse aus irgendeinem Grund doch gesetzt wird, bleibt der Text trotzdem vollstaendig sichtbar. Verstecktes Wort = verlorener Text. ================================================================== */ .mq [data-mq],.mq .mq-wrap, [data-mq],.mq-wrap,.mq-listo,.mq-fin{ visibility:visible !important; opacity:1 !important; clip-path:none !important; } .mq-cur::after,.mq-cur::before{display:none !important} /* ================================================================== 10 — EINBLENDEN BEIM SCROLLEN AUS entrada.css versteckt ganze Bloecke mit `opacity:0 !important`, solange `html.cf` gesetzt ist, und entrada.js holt sie per IntersectionObserver wieder herein. Das war im spanischen Entwurf stimmig. Hier ist es aus zwei Gruenden falsch: 1. Ulm blendet nicht weich ein. Die Schreibmaschine und die .reveal-Animation sind oben schon raus — dieses dritte System stehen zu lassen, war schlicht inkonsequent. 2. Es ist ein echtes Risiko, kein reiner Zierrat. Gemessen: nach einem vollstaendigen Durchscrollen der Startseite hatten nur 6 von 46 Bloecken ihre `.cf-in`-Klasse. Der Rest blieb unsichtbar. Wer ueber einen Ankerlink mitten in die Seite springt — und davon gibt es hier inzwischen viele — kann Absaetze erwischen, die der Observer nie meldet. Unsichtbarer Text ist verlorener Text. Der Bootstrap, der `cf` an haengt, ist raus, entrada.js laedt nicht mehr. Das hier ist das Netz darunter: falls die Klasse doch je gesetzt wird, ist trotzdem alles sichtbar. ================================================================== */ html.cf main > section > *, html.cf main > section, html.cf .page .narrow > *, html.cf .cf-in, html main > section > *, html .page .narrow > *{ opacity:1 !important; transform:none !important; }