/* ----------------------------------------------------------------------------- * throwback2026.css - Gestaltung des Inhalts der Seite /throwback2026/ * * Die Seite ist eine Seite der Website: Kopf, Menue, Ueberschrift und Fuss * kommen aus dem Rahmen der Programmseite, genau wie auf /floorplan2026/ * (gebaut von infra/throwback2026-seite.js; einen Foerderhinweis traegt diese * Seite seit dem 3.11.2026 nicht mehr). DIESE Datei * gestaltet nur, was zwischen Ueberschrift und Fuss steht - und alle ihre * Regeln stehen unter dem Vorsatz ".tb" (bzw. heissen "tb-..."), damit sie den * Rahmen nicht beruehren. * * HERKUNFT: Ulis zweiter, kleinerer Entwurf vom 3.11.2026 * (infra/throwback2026-entwurf.html), seit dem Nachmittag desselben Tages mit * dem Intro samt Knopf "Booth Booking Forms 2027" und der gedrehten * Unterzeile der Fachbesucher. Teil 1 unten ist der Stilblock jenes * Entwurfs, Zeichen fuer Zeichen - mit genau diesen Aenderungen: * - die drei Regeln ".chrome..." samt ihrem Kommentar fehlen: sie gestalten * nur die beiden grauen Platzhalter fuer Kopf und Fuss, an deren Stelle * der echte Rahmen steht; * - "html,body{margin:0;background:#fff}" fehlt: diese Regel stuende nicht * unter .tb und gehoert dem Rahmen (dort ist beides ohnehin so gesetzt: * gemessen margin 0px und Hintergrund rgb(255,255,255)); * - Open Sans 400 kommt aus /advisoryboard/open-sans-400.woff2, Open Sans * 600 aus /schedule2026/assets/open-sans-600.woff2 - beide liegen ohnehin * auf diesem Server, die Fragebogen-Seiten binden sie genauso ein. * Open Sans 700 liegt unter fonts/open-sans/ (aus @fontsource/open-sans@5.2.6), * Barlow unter fonts/barlow/ (aus @fontsource/barlow@5.2.6) - beide OFL-1.1, * die Lizenzdatei liegt jeweils daneben. * "infra/throwback2026-seite.js --pruefen" rechnet diese Aenderungen am * Entwurf nach und vergleicht das Ergebnis Zeichen fuer Zeichen mit Teil 1. * * DIE INHALTSBREITE bleibt die des Entwurfs (".tb .wrap": hoechstens 1140, * mittig). Das ist genau die Spur, in der Kopf, Ueberschrift und Fuss des * Rahmens stehen; die Seite legt um den Inhalt keinen weiteren Abstand. * * DAS THEMA DER WEBSITE WIRKT NICHT HINEIN - gemessen, nicht angenommen: am * 3.11.2026 sind alle 154 Elemente in .tb bei 1440 und bei 390 Punkten in * Lage, Groesse, Text und 33 berechneten Eigenschaften (Schrift, Abstaende, * Raender, Farben, Umwandlung in Grossbuchstaben ...) gleich denen des * Entwurfs, der ohne Thema gesetzt ist; der Nachweis haelt das bei jedem Lauf * fest (seit dem Intro 161 Elemente). Eine eigene Schutzregel braucht nur EIN * Element: der Knopf im Intro - das Thema gestaltet jeden Verweis und jede * Klasse "button" mit (siehe Teil 2). * * SEIT 3.11.2026, 12:30 UHR steht das Intro zweispaltig (Uli: "viel viel * besser. bitte so machen."): links die Absaetze 1 und 2 in einer Spalte von * hoechstens 560 Punkten, rechts ein hellgrauer Kasten mit "Exhibit in 2027", * Absatz 3, "All the forms ..." und dem Knopf. Markup und Regeln woertlich aus * dem Auftrag, mit EINER Abweichung, begruendet in Teil 1 (der Abstand ueber * dem Knopf). * * Teil 2 ist die echte Galerie mit der Grossansicht und die Schutzregel des * Knopfes. Am Aussehen des Entwurfs aendert er nichts - das Raster (3 Spalten, * 2 bis 900, 1 bis 520 Punkte, 12 Punkte Abstand), die Kachelform 3:2 und der * Knopf bleiben die aus Teil 1 (auch der Knopf in voller Breite bis 520 * Punkte, den die Schutzregel sonst verhinderte). Er setzt die Fotos in die Kacheln (beschnitten, * bei Hochformaten oben-mittig), gestaltet die Grossansicht, die das ganze Bild * ohne Beschnitt zeigt, und haelt das Thema vom Knopf fern. * * Wer hier etwas aendert: der Nachweis infra/throwback2026-nachweis.js haelt * die ausgelieferte Seite Element fuer Element gegen den Entwurf. * -------------------------------------------------------------------------- */ /* ===== Teil 1: der Entwurf ================================================ */ @font-face{font-family:"TB Barlow";font-weight:200;font-style:normal;font-display:swap;src:url("fonts/barlow/barlow-latin-200-normal.woff2") format("woff2")} @font-face{font-family:"TB Barlow";font-weight:300;font-style:normal;font-display:swap;src:url("fonts/barlow/barlow-latin-300-normal.woff2") format("woff2")} @font-face{font-family:"TB Barlow";font-weight:300;font-style:italic;font-display:swap;src:url("fonts/barlow/barlow-latin-300-italic.woff2") format("woff2")} @font-face{font-family:"TB Open Sans";font-weight:400;font-style:normal;font-display:swap;src:url("/advisoryboard/open-sans-400.woff2") format("woff2")} @font-face{font-family:"TB Open Sans";font-weight:600;font-style:normal;font-display:swap;src:url("/schedule2026/assets/open-sans-600.woff2") format("woff2")} @font-face{font-family:"TB Open Sans";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/open-sans/open-sans-latin-700-normal.woff2") format("woff2")} .tb{ --blue:#2965F1; --green:#48D36E; --green-dark:#3BAD5A; --lime:#C5E04E; --coral:#EF6B5B; --salmon:#F2A27E; --navy:#091228; --turquoise:#5FD6C8; --ink:#2B2B2B; --ink-soft:#656565; --ink-faint:#9A9A9A; --rule:#E2E5EA; --tile:#F2F3F5; --sans:"TB Open Sans","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; --display:"TB Barlow","Barlow","Helvetica Neue",Helvetica,Arial,sans-serif; color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased } .tb *{box-sizing:border-box} .tb .wrap{max-width:1140px;margin:0 auto;padding:0 32px} /* Kennzahlen */ .tb .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;padding:40px 0 16px} .tb .stat{text-align:center} .tb .stat-value{font-family:var(--display);font-weight:200;font-size:56px;line-height:1;letter-spacing:.06em;color:var(--ink);margin-left:.06em} .tb .stat-label{display:block;margin:8px auto 10px;padding:7px 14px;color:#fff;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3} .tb .stat-label--blue{background:var(--blue)} .tb .stat-label--lime{background:var(--lime)} .tb .stat-label--coral{background:var(--coral)} .tb .stat-label--salmon{background:var(--salmon)} .tb .stat-note{margin:0 auto;max-width:230px;color:var(--ink-soft);font-size:14px;line-height:1.45} /* Intro mit Knopf (Uli, 3.11.2026, nach Sichtung der ausgerollten Seite). Der Fliesstext seit 12:06 Uhr desselben Tages so klein wie auf airtec.aero: 15 Punkt, Zeilenhoehe 1,65 (dort bei 1440 Punkten gemessen: 37 Absaetze mit 15px / 24,75px); zuvor 17 Punkt / 1,6 bei 780 Punkten Breite. Die Schrift bleibt Open Sans 400. Seit 12:30 Uhr ZWEISPALTIG (Uli: "viel viel besser. bitte so machen."; an der Seite "so ultra-langlaufende texte sind immer schlecht" und "der blaue balken direkt ueber den statistiken ist unschoen"): links die Absaetze 1 und 2 in einer Spalte von hoechstens 560 Punkten (rund 75 Zeichen je Zeile statt ueber 100), rechts ein hellgrauer Kasten mit "Exhibit in 2027", Absatz 3, "All the forms ..." und dem Knopf. Bis 900 Punkte stehen Text und Kasten untereinander, bis 520 Punkte fuellt der Knopf die Breite des Kastens. */ .tb .intro{display:grid;grid-template-columns:minmax(0,560px) minmax(300px,400px);justify-content:space-between;gap:32px 64px;padding:28px 0 8px;align-items:start} .tb .intro-text{max-width:560px} .tb .intro p{margin:0 0 14px;font-size:15px;line-height:1.65} .tb .intro-text p:last-child{margin-bottom:0} .tb .intro-box{background:var(--tile);padding:28px 32px 32px} .tb .intro-box .box-label{display:block;color:var(--blue);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px} .tb .intro-box p{margin:0 0 12px} /* Der Absatz des Knopfes: 20 Punkte Abstand nach oben, keiner nach unten. Vorgegeben war ".tb .intro-cta{margin:20px 0 0}" mit dem Hinweis, die Regel habe dieselbe Staerke wie ".tb .intro-box p" und gewinne, weil sie spaeter steht. Sie ist aber schwaecher (zwei Klassen gegen zwei Klassen und ein Element) und taete nichts - gemessen am 3.11.2026 im Entwurf: Abstand oben 0, unten 12, Kasten 300 hoch statt 296 wie in Ulis Entwurf an der Seite (Kasten 271 bis 567). Mit der dritten Klasse greift sie; die Werte sind die vorgegebenen. */ .tb .intro-box .intro-cta{margin:20px 0 0} .tb .button{display:inline-block;background:var(--blue);color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:17px 36px;border-radius:0} .tb .button:hover,.tb .button:focus{background:#1F52CC;color:#fff} .tb .stats{border-top:1px solid var(--rule);padding-top:44px} .tb .stats{padding-top:48px} /* Zeilenhoehe des Knopfes: 1, also 15 Punkte - der Knopf ist damit 49 Punkte hoch wie in Ulis Mock auf der ausgerollten Seite (dort setzte sie das Thema der Website). Ohne diese Zeile erbte er 1,65 vom Absatz und waere 58,75 hoch. */ .tb .intro .button{line-height:1} @media (max-width:900px){.tb .intro{grid-template-columns:1fr}.tb .intro-text{max-width:none}} @media (max-width:520px){.tb .intro-box{padding:24px}.tb .intro-box .button{display:block;text-align:center;padding:16px 20px}} /* Schmale Telefone (Uli, 3.11.2026, 22:33 Uhr): bis 420 Punkte etwas kleinere Schrift, engere Sperrung und weniger Innenabstand, damit "BOOTH BOOKING FORMS 2027" auch bei 375 und 360 Punkten in EINER Zeile steht (vorher bei 375, 360 und 320 zwei Zeilen, Knopf 62 statt 47 hoch; jetzt 44 hoch, bei 320 bleiben es zwei Zeilen). Die Werte sind Ulis, an der ausgelieferten Seite gemessen. Die Selektoren tragen mit Absicht eine Klasse mehr als die Schutzregel des Knopfes in Teil 2 von throwback2026.css (".tb .intro a.button" und ihre Zustaende): die schluege auf der Seite sonst eine Regel wie ".tb .intro-box .button". Im Entwurf, der keine Schutzregel kennt, wirken sie genauso. */ @media (max-width:420px){.tb .intro .intro-box a.button,.tb .intro .intro-box a.button:link,.tb .intro .intro-box a.button:visited,.tb .intro .intro-box a.button:hover,.tb .intro .intro-box a.button:focus,.tb .intro .intro-box a.button:active{font-size:14px;letter-spacing:.06em;padding:15px 12px}} /* Abschnitte */ .tb .section{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:24px 48px;padding:44px 0;border-top:1px solid var(--rule)} .tb .section-title{font-family:var(--display);font-weight:300;font-style:italic;font-size:28px;line-height:1.15;margin:0;color:var(--ink)} .tb .section-lead{margin:10px 0 0;color:var(--ink-soft);font-size:14px;max-width:240px;line-height:1.5} /* Wachstum */ .tb .growth{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .tb .growth-value{font-family:var(--display);font-weight:200;font-size:48px;line-height:1;letter-spacing:.04em;color:var(--ink)} .tb .growth-bar{height:5px;width:56px;margin:12px 0 10px} .tb .growth-bar--blue{background:var(--blue)} .tb .growth-bar--green{background:var(--green)} .tb .growth-bar--lime{background:var(--lime)} .tb .growth-text{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.45;max-width:200px} /* Laender */ .tb .countries{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 24px} .tb .country{border-top:2px solid var(--rule);padding-top:8px} .tb .country:nth-child(1){border-color:var(--blue)} .tb .country:nth-child(2){border-color:var(--green)} .tb .country:nth-child(3){border-color:var(--lime)} .tb .country:nth-child(4){border-color:var(--coral)} .tb .country:nth-child(5){border-color:var(--salmon)} .tb .country:nth-child(6){border-color:var(--turquoise)} .tb .country:nth-child(7){border-color:var(--navy)} .tb .country:nth-child(8){border-color:var(--green-dark)} .tb .country-rank{font-family:var(--display);font-weight:200;font-size:24px;line-height:1;color:var(--ink-faint);letter-spacing:.04em} .tb .country-name{display:block;margin-top:4px;font-weight:600;font-size:14px;color:var(--ink)} .tb .countries-note{grid-column:1/-1;margin:4px 0 0;color:var(--ink-soft);font-size:14px} .tb .intl{display:flex;align-items:baseline;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--rule)} .tb .intl-value{font-family:var(--display);font-weight:200;font-size:40px;line-height:1;letter-spacing:.04em} .tb .intl-text{margin:0;color:var(--ink-soft);font-size:14px;max-width:300px;line-height:1.45} /* Balken */ .tb .bars{display:grid;gap:16px;margin-top:4px} .tb .bar-row{display:grid;gap:6px} .tb .bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px} .tb .bar-name{font-size:14px;color:var(--ink)} .tb .bar-pct{font-family:var(--display);font-weight:300;font-size:22px;line-height:1;letter-spacing:.03em;color:var(--ink)} .tb .bar-track{height:12px;background:var(--tile)} .tb .bar-fill{height:100%} .tb .bar-fill--1{width:69.8%;background:var(--navy)} .tb .bar-fill--2{width:55.5%;background:var(--blue)} .tb .bar-fill--3{width:100%;background:var(--green)} .tb .bar-fill--4{width:94.8%;background:var(--lime)} /* Ring */ .tb .ring{display:grid;grid-template-columns:180px 1fr;gap:36px;align-items:center} .tb .ring svg{width:100%;height:auto;display:block} .tb .legend{list-style:none;margin:0;padding:0;display:grid;gap:12px} .tb .legend li{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:baseline} .tb .swatch{width:14px;height:14px;border-radius:2px;position:relative;top:2px} .tb .swatch--navy{background:var(--navy)} .tb .swatch--green{background:var(--green)} .tb .swatch--blue{background:var(--blue)} .tb .swatch--grey{background:#D5D8DE} .tb .legend-name{font-size:14px;color:var(--ink);line-height:1.35} .tb .legend-name small{display:block;color:var(--ink-soft);font-size:13px} .tb .legend-pct{font-family:var(--display);font-weight:300;font-size:22px;line-height:1;letter-spacing:.03em} /* Firmen */ .tb .companies-lead{margin:0 0 14px;color:var(--ink-soft);font-size:14px;max-width:600px;line-height:1.5} .tb .tags{display:flex;flex-wrap:wrap;gap:8px} .tb .tag{display:inline-block;border:1px solid var(--rule);padding:5px 12px;font-size:13px;color:var(--ink);line-height:1.3} .tb .tag--more{border-style:dashed;color:var(--ink-soft)} /* Galerie */ .tb .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .tb .gallery-tile{aspect-ratio:3/2;background:var(--tile);display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:12px;letter-spacing:.1em;text-transform:uppercase} .tb .ende{height:24px} @media (max-width:900px){ .tb .stats{grid-template-columns:repeat(2,1fr)} .tb .section{grid-template-columns:1fr;gap:20px;padding:36px 0} .tb .section-title{font-size:24px} .tb .growth{grid-template-columns:repeat(3,1fr);gap:16px} .tb .countries{grid-template-columns:repeat(2,1fr)} .tb .ring{grid-template-columns:1fr;justify-items:center} .tb .ring svg{max-width:180px} .tb .gallery{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .tb .wrap{padding:0 20px} .tb .stats{grid-template-columns:1fr;gap:28px} .tb .stat-value{font-size:52px} .tb .growth{grid-template-columns:1fr;gap:20px} .tb .growth-value{font-size:44px} .tb .gallery{grid-template-columns:1fr} } /* ===== Teil 2: die echte Galerie und der Knopf ============================ */ /* Ein Foto fuellt seine Kachel und wird auf 3:2 beschnitten, damit das Raster so ruhig bleibt wie im Entwurf - auch bei Hochformaten. Der Ausschnitt liegt mittig; bei einem HOCHFORMAT (die Kachel traegt dann die Marke "gallery-tile--portrait", gesetzt von index.php nach den Massen der Datei) liegt er oben-mittig, bei 25 Prozent der Hoehe - sonst schnitte die Mitte eines stehenden Fotos die Koepfe ab (Auftrag Uli, 3.11.2026). Quer- und Quadratformate bleiben mittig. */ .tb .gallery-tile{position:relative;overflow:hidden} .tb .gallery-tile img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} .tb .gallery-tile--portrait img{object-position:50% 25%} .tb .gallery-tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px} /* Der Knopf "Booth Booking Forms 2027" im Intro, gegen das Thema der Website (Auftrag Uli, 3.11.2026: die Website faerbt Knoepfe und Links sonst um, die Regeln muessen sich wie bei der Grossansicht durchsetzen - Linkfarbe weiss, keine Unterstreichung, Hintergrund blau). Gemessen am 3.11.2026 an der ausgerollten Seite mit dem Intro als Mock: Ulis Regeln aus Teil 1 setzen sich bei Farbe, Hintergrund und Unterstreichung schon durch. Das Thema (Astra) greift mit seinen Regeln fuer "a" und ".button" aber nach allem, was sie nicht nennen: Zeilenhoehe 1em, ein Uebergang "all .2s linear" (der Knopf blendete beim Darueberfahren langsam um), Randstil und Randfarbe, "vertical-align" und mit dem Fokus "outline:0". Deshalb steht hier jede sichtbare Eigenschaft ausdruecklich, fuer jeden Zustand, mit drei Klassen und dem Element - staerker als jede Regel des Themas fuer Verweise und Knoepfe (dort hoechstens zwei Klassen). Die Werte sind die aus Teil 1: in Ruhe, unter dem Mauszeiger und mit dem Fokus sieht der Knopf aus wie im Entwurf (der Nachweis haelt ihn im Ruhezustand mit Lage, Groesse und 33 Eigenschaften gegen den Entwurf). Bewusst dazu kommen zwei Dinge: ":active" sieht aus wie ":hover" (im Entwurf trifft ein Klick ohnehin beides), und mit dem Fokus der Tastatur traegt der Knopf denselben Rahmen wie die Kacheln der Galerie statt des Rahmens des Browsers. Ein Verweis im selben Fenster, ohne target. */ .tb .intro a.button, .tb .intro a.button:link, .tb .intro a.button:visited, .tb .intro a.button:hover, .tb .intro a.button:focus, .tb .intro a.button:active{display:inline-block;margin:0;padding:17px 36px;border:0;border-radius:0;box-shadow:none;text-shadow:none;outline:0;transition:none;vertical-align:baseline;font-family:var(--sans);font-weight:600;font-style:normal;font-size:15px;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--blue)} .tb .intro a.button:hover, .tb .intro a.button:focus, .tb .intro a.button:active{background:#1F52CC} .tb .intro a.button:focus-visible{outline:2px solid var(--blue);outline-offset:3px} /* Bis 520 Punkte fuellt der Knopf den Kasten (Teil 1: ".tb .intro-box .button{display:block;text-align:center;padding:16px 20px}", seit dem zweispaltigen Intro vom 3.11.2026, 12:30 Uhr). Im Entwurf greift diese Regel; hier schluege die Schutzregel oben sie (drei Klassen und ein Element gegen drei Klassen) und hielte den Knopf schmal und links - also dieselben Werte noch einmal, mit denselben Selektoren wie oben und hinter ihnen. */ @media (max-width:520px){ .tb .intro a.button, .tb .intro a.button:link, .tb .intro a.button:visited, .tb .intro a.button:hover, .tb .intro a.button:focus, .tb .intro a.button:active{display:block;text-align:center;padding:16px 20px} } /* Bis 420 Punkte (schmale Telefone, 3.11.2026, 22:33 Uhr) braucht es KEINE Kopie hier: die Regel in Teil 1 traegt eine Klasse mehr als die Schutzregel (".tb .intro .intro-box a.button" und ihre Zustaende) und setzt sich deshalb auch vor ihr durch - gemessen im Nachweis, Abschnitt L. */ /* Die Grossansicht. Sie entsteht erst durch throwback2026.js und haengt am Ende von - ausserhalb von .tb, damit nichts im Rahmen sie ueberdecken kann. Ihre Klassen heissen deshalb "tb-..." statt unter .tb zu stehen. Ohne JavaScript gibt es sie nicht, und jeder Verweis oeffnet das grosse Bild direkt. Die Farben stehen hier ausgeschrieben: die Grossansicht liegt nicht unter .tb und sieht dessen Variablen nicht. z-index 100000 statt der bisherigen 1000: die Stilquellen des Rahmens kennen Bausteine bis 9999 (etwa einen Knopf "nach oben"), die auf dieser Seite zwar nicht vorkommen - gemessen am 3.11.2026: kein Element des Rahmens liegt fest auf dem Bildschirm, weder bei 1440 noch bei 390 Punkten -, aber mit einer kuenftigen Fassung des Rahmens kommen koennten. Der Nachweis prueft, dass die geoeffnete Grossansicht zuoberst liegt. */ .tb-lightbox-open{overflow:hidden} .tb-lightbox{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:64px 72px;background:rgba(9,18,40,.94)} .tb-lightbox[hidden]{display:none} .tb-lightbox .tb-lightbox-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto} /* Die drei Schaltflaechen. Das Thema der Website gestaltet JEDES