/* ========================================================================= CASI -- das Geruest der Entwuerfe auf Elementor uebersetzt ------------------------------------------------------------------------- Die Schriftregeln stehen hier vollstaendig und sind die einzige Quelle: in den Elementor-Daten ist keine Typografie mehr hinterlegt, damit nicht zwei Stellen dasselbe bestimmen. Die Regel von Vorschlag 1, in einem Satz: die Serife traegt, was gelesen wird; die Grotesk, was benutzt wird. Stufen: 44 / 30 / 20 / 17 / 15 / 14 ========================================================================= */ /* ---- Der Grund: die Serife ------------------------------------------- */ body, .elementor-widget-text-editor, .elementor-widget-text-editor p, .casi-pub .elementor-widget-text-editor p{ font-family:'Serife',Georgia,serif; font-size:17px;line-height:1.6;font-weight:400;color:var(--tinte);} body{background:var(--papier);} strong{font-weight:600;} /* ---- Die Grotesk: alles, was benutzt wird ---------------------------- */ h1,h2,h3,h4, .elementor-widget-heading .elementor-heading-title, .elementor-button, .xpro-elementor-nav-link, .casi-person-name .elementor-heading-title, .casi-person-inst .elementor-heading-title, .reiter,.kartenkopf,.karte > .kartenkopf,.abb,.m,.abb-titel, .marken figcaption,.wpforms-submit{ font-family:'Mori',system-ui,sans-serif;} /* ---- Die sechs Stufen ------------------------------------------------ */ /* 44 -- der Seitentitel, einmal je Seite */ .elementor-widget-heading h1.elementor-heading-title{ font-size:44px;line-height:1.08;letter-spacing:-.005em;font-weight:600; color:var(--tinte);text-align:center;} /* 30 -- die Abschnittsueberschrift */ .elementor-widget-heading h2.elementor-heading-title{ font-size:30px;line-height:1.18;letter-spacing:-.004em;font-weight:600; color:var(--tinte);} /* 20 -- der Kartentitel und die Zwischenzeile */ .elementor-widget-heading h3.elementor-heading-title, .casi-pub h3.elementor-heading-title{ font-size:20px;line-height:1.3;font-weight:600;color:var(--tinte);} /* 16 -- Schaltflaeche und Reiter */ .elementor-button,.reiter{font-size:16px;font-weight:400;} /* 18 -- die Navigation */ .xpro-elementor-nav-link{font-size:18px;font-weight:400;} /* 14 -- Jahr, Institut, Fussleiste */ .casi-fuss .fuss-zeile .elementor-heading-title, .kleingedruckt{ font-size:14px;line-height:1.45;font-weight:400;color:var(--leise); font-family:'Mori',system-ui,sans-serif;} /* ---- Der Eintrag: Jahr, Titel, ein Satz ----------------------------- Zeichen fuer Zeichen die Werte aus Vorschlag 1 -- dort heissen die drei .jahr, .kartentitel und p im Listeneintrag. Der Titel ist hier ein h3, das Jahr ein div, deshalb die beiden Selektoren. */ .casi-pub div.elementor-heading-title{ /* .jahr */ font-family:'Mori',system-ui,sans-serif;font-size:14px;line-height:1.45; font-weight:400;color:var(--leise);margin-bottom:12px;} .casi-pub h3.elementor-heading-title{ /* .kartentitel */ font-family:'Mori',system-ui,sans-serif;font-size:20px;line-height:1.3; font-weight:600;color:var(--tinte);margin-bottom:10px;} .casi-pub .elementor-widget-text-editor p{ /* der eine Satz */ font-family:'Serife',Georgia,serif;font-size:17px;line-height:1.6; font-weight:400;color:var(--tinte);max-width:none;margin:0;} /* ---- Die Personenkarte: Name und Institut --------------------------- */ .casi-person-name .elementor-heading-title{ font-family:'Mori',system-ui,sans-serif;font-size:19px;line-height:1.25; font-weight:600;color:var(--tinte);} .casi-person-inst .elementor-heading-title{ font-family:'Mori',system-ui,sans-serif;font-size:14px;line-height:1.45; font-weight:400;color:var(--leise);margin-top:6px;} /* Auf einem Telefon geht die Staffel eine Stufe zurueck -- wie im Entwurf. */ @media (max-width:700px){ .elementor-widget-heading h1.elementor-heading-title{font-size:34px;} .elementor-widget-heading h2.elementor-heading-title{font-size:25px;} } /* ---- Die ICCA-Seite ruecht eine Stufe nach unten --------------------- Dort traegt nur der Seitentitel die grosse Stufe; eine lange Inhaltsseite braucht einen eindeutigen Anfang. */ .page-id-2462 .elementor-widget-heading h2.elementor-heading-title{ font-size:24px;line-height:1.22;} .page-id-2462 .elementor-widget-heading h3.elementor-heading-title{ font-size:18px;line-height:1.3;} /* ---- Der Satz im Text-Widget ----------------------------------------- */ .elementor-widget-text-editor p{max-width:640px;margin:0;} .elementor-widget-text-editor p + p{margin-top:16px;} .casi-voll .elementor-widget-text-editor p, .elementor-widget-text-editor.casi-voll p{max-width:none;} .kasten p{font-size:17px;max-width:none;} .elementor-widget-text-editor a{color:inherit;text-decoration:none;} .elementor-widget-text-editor a:hover{text-decoration:underline; text-decoration-thickness:1px;text-underline-offset:3px;} /* ========================================================================= Das Geruest ========================================================================= */ .casi-sect{padding:46px 0;} .casi-sect > .e-con-inner{width:100%;max-width:var(--bahn);margin-left:auto;margin-right:auto;} .casi-hero{padding-top:150px;} @media (max-width:760px){ .casi-hero{padding-top:84px;} } .casi-feld{padding:34px 0;} .casi-feld > .e-con-inner{background:var(--block);border-radius:14px;padding:56px 48px;} @media (max-width:700px){ .casi-feld > .e-con-inner{padding:36px 24px;border-radius:12px;} } .casi-feld .kasten,.casi-feld .mensch,.casi-feld .casi-pub,.casi-feld .casi-person{ background:var(--papier);} /* ========================================================================= Die Listen werden Kaesten -- wie die Members ========================================================================= */ .casi-pub,.casi-person{ background:var(--block);border-radius:var(--rad);padding:24px; border:1px solid transparent;transition:border-color .2s;} /* Nur was wirklich irgendwohin fuehrt, reagiert auf den Zeiger. Nachrichten und Veranstaltungen ohne hinterlegte Adresse bleiben ruhig. Der Rahmen kommt in Tinte, aber nur zu einem Drittel -- sichtbar, nicht laut. */ .casi-pub.is-linked:hover,.casi-person.is-linked:hover{border-color:rgba(14,77,73,.32);} .casi-pub.is-linked:hover h3.elementor-heading-title, .casi-person.is-linked:hover .casi-person-name .elementor-heading-title{ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;} .casi-pub-list,.casi-member-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:0;} @media (max-width:1040px){ .casi-pub-list,.casi-member-list{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:640px){ .casi-pub-list,.casi-member-list{grid-template-columns:minmax(0,1fr);}} .casi-person{display:flex;gap:18px;align-items:center;padding:20px;} .casi-person-photo{flex:0 0 auto;} .casi-person-photo img{width:96px;height:126px;object-fit:cover; object-position:50% 18%;border-radius:var(--rad-klein);display:block;} /* ========================================================================= Hero, Schaltflaechen, Haken, Partnerreihen, Laufband ========================================================================= */ .elementor-widget-heading.casi-hero-kicker .elementor-heading-title{ font-size:38px;line-height:1.12;letter-spacing:-.005em;text-align:left;} .elementor-widget-heading.casi-hero-titel .elementor-heading-title{ font-size:20px;line-height:1.3;font-weight:600;letter-spacing:.02em; text-align:left;max-width:820px;} .casi-haken p{position:relative;padding-left:26px;max-width:none;margin:0 0 9px;} .casi-haken p::before{content:"";position:absolute;left:0;top:.36em; width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B1538' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.9'/%3E%3C/svg%3E") no-repeat center/contain;} .elementor-widget-button.casi-knopf .elementor-button{ font-size:16px;padding:10px 19px;border-radius:var(--rad-klein); border:1px solid transparent; transition:background-color .2s,color .2s,border-color .2s;} .elementor-widget-button.casi-knopf-voll .elementor-button{ background:var(--akzent);color:var(--papier);border-color:var(--akzent);} .elementor-widget-button.casi-knopf-voll .elementor-button:hover{ background:transparent;color:var(--akzent);} .elementor-widget-button.casi-knopf-linie .elementor-button{ background:transparent;color:var(--tinte);border-color:var(--tinte);} .elementor-widget-button.casi-knopf-linie .elementor-button:hover{ background:var(--tinte);color:var(--papier);} .casi-knopf .elementor-button-icon{display:none;} .elementor-widget-heading.casi-partnerkopf{margin-top:148px;} /* Die Logozeile steht so weit unter ihrer Ueberschrift wie die Mitgliederkarten unter "Steering Committee": 32 px. Vorher waren es 56, und die drei Unterabschnitte lasen sich dadurch wie drei Kapitel. */ .elementor-widget-heading.casi-partnerkopf + .elementor-widget-shortcode .marken{margin-top:32px;} .casi-band{padding:0;} .casi-band .laufband{margin:46px 0;} .casi-kontaktzeile{align-items:flex-start;} .casi-kontaktzeile > :first-child{flex:1 1 420px;} .casi-kontaktzeile > :last-child{flex:0 0 400px;max-width:400px;} @media (max-width:820px){ .casi-kontaktzeile > :last-child{flex:1 1 100%;} } /* Kopf und Fuss stehen als eigenes Markup in casi-kopf-fuss.php und tragen die Klassennamen des Entwurfs; casi-proposal.css bemasst sie vollstaendig. Was WordPress dazwischenlegt, steht ganz unten. */ /* ==================================================================== Korrektur 15. September -- gemessen, nicht geraten ==================================================================== */ /* 1 -- Der Treffer ist die Flaeche, nicht noch eine Zeile. Der Titel stand zweimal im Kasten: als Ueberschrift und als Text des Links. Der Link behaelt seinen Namen fuer die Vorschau, zeigt ihn aber nicht mehr. */ .casi-pub{position:relative;} .casi-pub-hit{position:absolute;inset:0;z-index:2;border-radius:var(--rad); font-size:0;line-height:0;color:transparent;overflow:hidden; text-indent:-9999px;white-space:nowrap;} .casi-pub-hit:focus-visible{outline:2px solid var(--tinte);outline-offset:2px;} /* 2 -- Die Personenkarte liegt quer: Bild links, Name rechts. Elementor stellt jeden Behaelter auf Spalte; genau dieser Wert hat gefehlt. */ .casi-person.e-flex,.casi-person.e-con-full{flex-direction:row;} body .casi-person .casi-person-photo{flex:0 0 auto;width:auto;} body .casi-person .casi-person-text{flex-direction:column;flex:1 1 auto; width:auto;min-width:0;gap:0;justify-content:center;align-items:flex-start;} .casi-person > :last-child{min-width:0;} /* 3 -- Die Schaltflaeche traegt keine Sperrung und kein Fettes: Mori 16, Gewicht 400, Laufweite normal -- die Werte von .knopf aus Vorschlag 1. */ body .elementor-widget-button .elementor-button, body .elementor-button, body .wpforms-submit{letter-spacing:normal;font-weight:400;text-transform:none;} body .elementor-widget-button.casi-knopf .elementor-button{ display:inline-flex;align-items:center;gap:10px;line-height:1.6; font-size:16px;padding:10px 19px;border-radius:var(--rad-klein);} /* 4 -- Zwischen den Teilen einer Karte steht kein Elementor-Abstand: die drei Zeilen tragen ihre Abstaende selbst (12 unter dem Jahr, 10 unter dem Titel), sonst zaehlt der Kasten doppelt. */ .casi-pub > .e-con,.casi-pub .e-con{gap:0;} .casi-pub-mark{display:none;} .casi-pub .elementor-widget:last-child{margin-bottom:0;} /* 5 -- Der Abstand steht einmal, nicht zweimal. Elementor legt die Polsterung eines Abschnitts auf den inneren Behaelter, das Stylesheet auf den aeusseren; so stand zwischen zwei Abschnitten 184 px statt der 92 px des Entwurfs. */ .casi-sect > .e-con-inner{padding-top:0;padding-bottom:0;} .casi-feld > .e-con-inner{padding:56px 48px;} /* 6 -- Ein Kurzbefehl fuellt seine Spalte. Auf schmalen Schirmen zog Elementor den Behaelter des Kurzbefehls auf den Inhalt zusammen, und die Liste stand dann 215 statt 311 px breit. */ .casi-sect .elementor-widget-shortcode{width:100%;} .casi-sect .elementor-widget-shortcode > .elementor-widget-container{width:100%;} .casi-sect .elementor-shortcode{display:block;width:100%;} /* 7 -- Eine Spalte bricht nicht um. Elementor stellt den inneren Behaelter auf flex-wrap:wrap; in einer Spalte heisst das, dass jede Zeile nur so breit wird wie ihr Inhalt -- auf dem Telefon 215 statt 311 px. */ .casi-sect.e-flex > .e-con-inner,.casi-sect.e-con > .e-con-inner{flex-wrap:nowrap;} /* 8 -- Auf dem Telefon ruecken die Baender enger, wie in Vorschlag 1: 36/24 statt 56/48. Die Regel steht hier hinten, weil die Korrektur weiter oben die alte Medienabfrage sonst wieder ueberschriebe. */ @media (max-width:700px){ .casi-feld > .e-con-inner{padding:36px 24px;border-radius:12px;} } /* ==================================================================== Korrektur Kopf und Fuss ==================================================================== */ /* 9 -- Die Zeilenhoehe als Verhaeltnis, nicht als Laenge. Das Elementor-Kit setzt auf den Koerper 1.6em; eine Laenge wird als fester Wert vererbt, und ein 18-px-Verweis erbte deshalb die 27,2 px eines 17-px-Satzes. Unbenannt geschrieben rechnet jede Stufe wieder selbst. */ body.elementor-kit-1659{line-height:1.6;} /* 10 -- Das Anmeldeformular ist WPForms, soll aber aussehen wie das Formular des Entwurfs: Feld und Schaltflaeche in einer Zeile, 12 px dazwischen, zusammen hoechstens 560 px breit. */ .fuss-abo .formular{margin-top:20px;max-width:560px;} .fuss-abo .wpforms-container{margin:0;max-width:none;} .fuss-abo .wpforms-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;} .fuss-abo .wpforms-field-container{flex:1 1 250px;min-width:0;} .fuss-abo .wpforms-field{padding:0;} .fuss-abo .wpforms-field-email input{width:100%;} .fuss-abo .wpforms-submit-container{flex:0 0 auto;padding:0;} /* 11 -- Feld und Schaltflaeche tragen die Masse von .formular input und .knopf-linie aus Vorschlag 1: beide 48 px hoch. */ .fuss-abo .wpforms-field input[type=email]{font-family:'Serife',Georgia,serif; font-size:17px;line-height:1.4;padding:11px 15px;color:var(--tinte); background:var(--papier);border:1px solid var(--linie); border-radius:var(--rad-klein);transition:border-color .2s;} .fuss-abo .wpforms-field input[type=email]:focus{outline:none;border-color:var(--tinte);} .fuss-abo .wpforms-submit{font-family:'Mori',system-ui,sans-serif;font-size:16px; line-height:1.6;font-weight:400;letter-spacing:normal;padding:10px 19px; border-radius:var(--rad-klein);border:1px solid var(--tinte);background:transparent; color:var(--tinte);cursor:pointer;transition:background-color .2s,color .2s;} .fuss-abo .wpforms-submit:hover{background:var(--tinte);color:var(--papier);} .casi-form-consent{font-family:'Mori',system-ui,sans-serif;font-size:14px; line-height:1.55;color:var(--leise);margin-top:16px;max-width:620px;} /* 12 -- WPForms bemasst seine Felder ueber einen Bezeichner; dagegen hilft nur ein ausdruecklicher Vorrang. Der Behaelter fuellt die Zeile, damit Feld und Schaltflaeche nebeneinander Platz haben. */ .fuss-abo .wpforms-container{flex:1 1 100%;} .fuss-abo .wpforms-field{padding:0 !important;} .fuss-abo .wpforms-submit-container{padding:0 !important;margin:0 !important;} .fuss-abo .wpforms-field-email input{width:100% !important;} /* 13 -- Die Schaltflaeche der Lade ist kein Knopf des Themes: das Kit faerbt jedes button-Element ein, und die drei Striche verschwanden hinter einer gruenen Flaeche. */ .kopf .burger{background:none;border:0;padding:0;box-shadow:none;} .kopf .burger:hover,.kopf .burger:focus{background:none;box-shadow:none;} .kopf .burger span{background:var(--tinte);} /* 14 -- Die Vorschau am Zeiger. Der laengere Text steht im Backend und passt nicht auf die Karte; er folgt dem Zeiger statt sie zu sprengen. Papier, eine Linie, die Radien des Entwurfs -- kein Schatten. */ .casi-pub-preview{position:fixed;top:0;left:0;z-index:9999;max-width:460px; padding:16px 18px;background:var(--papier);border:1px solid var(--linie); border-radius:var(--rad-klein);color:var(--tinte); font-family:'Serife',Georgia,serif;font-size:15px;line-height:1.5; white-space:pre-line;pointer-events:none;box-shadow:none;} .casi-pub-preview[hidden]{display:none;} .casi-pub.has-preview,.casi-person.has-preview{cursor:help;} .casi-pub.is-linked,.casi-person.is-linked{cursor:pointer;} /* 15 -- Die Personenkarte bekommt dieselbe unsichtbare Klickflaeche wie die Publikationen; das Skript haengt sie ein, das Mass steht hier. */ .casi-person{position:relative;} .casi-person-hit{position:absolute;inset:0;z-index:2;border-radius:var(--rad); font-size:0;line-height:0;color:transparent;overflow:hidden; text-indent:-9999px;white-space:nowrap;} .casi-person-hit:focus-visible{outline:2px solid var(--tinte);outline-offset:2px;} /* 16 -- Die volle Schaltflaeche traegt weisse Schrift. Das Kit faerbt jedes a-Element ein und war dabei genauer als die Regel des Entwurfs, deshalb stand "Get in touch" schwarz auf Weinrot. */ .knopf.knopf-voll,a.knopf.knopf-voll{color:var(--papier);} .knopf.knopf-voll:hover,a.knopf.knopf-voll:hover{color:var(--akzent);} .knopf.knopf-linie,a.knopf.knopf-linie{color:var(--tinte);} .knopf.knopf-linie:hover,a.knopf.knopf-linie:hover{color:var(--papier);} /* 17 -- Die Pfeile unter den Karten. Das Kit gibt jeder Schaltflaeche 15/40 Polsterung und eckige Ecken; daraus wurden 82x38 grosse Kaesten statt der 38er Quadrate des Entwurfs. */ .kartennav .pfeil{width:38px;height:38px;padding:0;display:grid; place-items:center;background:transparent;color:var(--tinte); border:1px solid var(--tinte);border-radius:var(--rad-klein); box-shadow:none;letter-spacing:normal;font-size:16px; transition:background .2s,color .2s,opacity .2s;} .kartennav .pfeil:hover{background:var(--tinte);color:var(--papier);} .kartennav .pfeil[disabled]{opacity:.3;cursor:default;} .kartennav .pfeil[disabled]:hover{background:transparent;color:var(--tinte);} .kartennav .pfeil svg{width:18px;height:18px;display:block;} .kartennav .kartenpunkte button{width:8px;height:8px;padding:0;border:0; border-radius:999px;background:var(--linie);box-shadow:none;} .kartennav .kartenpunkte button.an{background:var(--tinte);} /* 18 -- Das Kleingedruckte in der Fussleiste steht ganz in Grau, auch die Verweise. Das Elementor-Kit faerbt jedes a-Element ein; dadurch standen Imprint, Privacy Policy und Privacy Notice schwarz zwischen grauem Satz. */ footer .fuss-zeile,footer .fuss-zeile span,footer .fuss-zeile a, .casi-form-consent,.casi-form-consent a,.kleingedruckt,.kleingedruckt a{ font-family:'Mori',system-ui,sans-serif;font-size:14px;line-height:1.55; color:var(--leise);} /* Das Kleingedruckte traegt kein Halbfett mehr -- weder der Rechtspunkt in der Fussleiste noch die Verweise im Einwilligungssatz. Erkennbar bleiben sie am Strich, den Block 51 ihnen gibt. */ footer .fuss-zeile a,.casi-form-consent a,.kleingedruckt a{ font-weight:400;text-decoration:none;} footer .fuss-zeile a:hover,.casi-form-consent a:hover,.kleingedruckt a:hover{ color:var(--leise);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;} /* 19 -- Der Hinweis ueber der Vorschau: eigene Zeile, Grotesk, leise -- er gehoert nicht zum Text, er steht daneben. */ .casi-pub-preview .casi-vorlaeufig{display:block;margin-bottom:8px; font-family:'Mori',system-ui,sans-serif;font-size:13px;line-height:1.4; color:var(--leise);} /* 20 -- Die Abbildungstabellen tragen kein Gitter. Astra legt um jede Zelle eine Linie (table, td, th{border:1px solid}); daraus wurde aus dem Journal des Entwurfs ein Tabellenblatt. Im Entwurf und in der Vorlage steht dort genau eine Linie: unter der Kopfzeile. */ .abb table,.abb thead,.abb tbody,.abb tfoot,.abb tr,.abb th,.abb td{ border:0;background:none;} .abb-journal th{border-bottom:var(--fein) solid var(--strich);} .abb table{border-collapse:collapse;} /* 21 -- Die Marken A bis J stehen in der Vorlage 28,3 x 12,8 pt, also gut zwei zu eins. Im Netz waren sie 28 x 21 px -- fast quadratisch. Die Hoehe bleibt, die Breite waechst auf dasselbe Verhaeltnis; Ecken und Farben bleiben, wie sie waren. */ .abb .m,.karte .m,.tafel .m{min-width:3.7em;padding:2px 9px;} /* 22 -- Die Spalte mit dem Zeichen steht oben, nicht in der Mitte: das Zeichen gehoert unter die Ueberschrift, dorthin, wo die Karte bisher leer war. Die Karte waechst dadurch nicht -- die Spalte hatte mehr als genug Luft. */ .tafelzeile > .mit-zeichen{align-self:start;} .karte .mit-zeichen > .sym{margin-bottom:22px;} /* 23 -- Das T der Bilanz schliesst. Der senkrechte Strich sitzt an der Spaltenkante, die Kopflinien endeten aber am Polster davor. Statt mit negativen Raendern gegen eine Zahl zu rechnen, die je nach Breite 26 oder 14 px betraegt, wandert das Polster von der Spalte auf ihre Konten: die Kopfzeile behaelt dann die volle Spaltenbreite und ihre Linie trifft den Strich. Keine Linie wird dicker, sie treffen sich nur. */ .abb-bilanz .seite{padding-left:0;padding-right:0;} .abb-bilanz .seite > .konto{padding-left:26px;padding-right:26px;} .abb-bilanz .seite:first-child > .konto{padding-left:0;} .abb-bilanz .seite:last-child > .konto{padding-right:0;} @media (max-width:640px){ .abb-bilanz .seite > .konto{padding-left:0;padding-right:0;} } /* 24 -- Der Kasten kommt nicht sprunghaft, sondern blendet in einer Achtelsekunde auf. Nach der halben Sekunde Wartezeit ist das der Unterschied zwischen "da ist etwas" und "da springt etwas". */ .casi-pub-preview{animation:casi-vorschau-auf .12s ease-out;} @keyframes casi-vorschau-auf{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ .casi-pub-preview{animation:none;} } /* 25 -- Die Bahn steht still. Kurze Seiten wie Get in touch brauchen keine Bildlaufleiste, lange schon -- und weil die Leiste Platz wegnimmt, sprang die ganze Seite beim Wechsel um ihre Breite zur Seite. scrollbar-gutter haelt den Platz auf jeder Seite frei, ob die Leiste da ist oder nicht. */ html{scrollbar-gutter:stable;} /* 26 -- Der Weg zurueck. Derselbe Pfeil wie unter den Karten: 38 px im Quadrat, eine Linie, 8 px Radius. Er sitzt links in der Zeile des Seitentitels -- der Titel steht mittig, also kommen sie sich nicht in die Quere; der negative Rand holt ihn dorthin zurueck. */ .casi-zurueck-zeile{margin-bottom:-38px;position:relative;z-index:2;} a.casi-zurueck{display:inline-grid;place-items:center;width:38px;height:38px; padding:0;background:transparent;color:var(--tinte); border:1px solid var(--tinte);border-radius:var(--rad-klein); text-decoration:none;transition:background-color .2s,color .2s;} a.casi-zurueck:hover{background:var(--tinte);color:var(--papier); text-decoration:none;} a.casi-zurueck svg{width:18px;height:18px;display:block;} @media (max-width:700px){ .casi-zurueck-zeile{margin-bottom:8px;} } /* 27 -- Die Publikationsseite endet dort, wo ihre Karten enden. Die drei Tafeln lagen uebereinander in einer Rasterzelle und wurden nur unsichtbar geschaltet -- die Seite war damit immer so hoch wie die laengste Liste, und der Abstand zur Fussleiste sprang je nach Reiter von null bis riesig. Hier nimmt die versteckte Tafel keinen Platz mehr ein. Auf der ICCA-Seite bleibt die Ueberlagerung: dort haelt sie die Hoehe ruhig, waehrend man zwischen den Tafeln wechselt. */ .tafeln[data-g="p"]{display:block;} .tafeln[data-g="p"] > .tafel{display:none;visibility:visible;padding-top:32px;} .tafeln[data-g="p"] > .tafel.an{display:block;} /* 28 -- Die Karte sitzt enger um ihre Abbildung. An den Abbildungen selbst aendert sich nichts; was schrumpft, ist der Rahmen drumherum: 22 statt 28 px Polsterung und 18 statt 24 px unter der Ueberschrift. */ .karte{padding:22px;} .karte > .kartenkopf{margin-bottom:18px;} .karte .mit-zeichen > .sym,.karte > .sym{margin-bottom:16px;} /* 29 -- Die Gleichungen bekommen eine Fassung. Ihr Kasten trug bisher denselben Ton wie die Karte, auf der er liegt -- Block auf Block, also unsichtbar. Auf dem Band kehrt sich das Verhaeltnis um, wie ueberall sonst auf der Seite: Papier als Grund, eine Haarlinie als Rand, die Ecken der Seite. */ .abb-formeln .kasten{background:var(--papier); border:var(--fein) solid var(--linie);border-radius:var(--rad);} .abb-formeln .gl > *:nth-child(n+4){border-top:var(--fein) solid var(--linie);} /* 30 -- Eine angekuendigte Arbeit steht blass auf der Seite: sie zeigt, was kommt, ohne sich neben das zu stellen, was schon da ist. Kein Verweis, kein Zeigeeffekt, keine Vorschau. */ .casi-pub.is-bald{opacity:.55;} .casi-pub.is-bald:hover{border-color:transparent;} .casi-pub.is-bald h3.elementor-heading-title{text-decoration:none;} .casi-pub.is-bald,.casi-pub.is-bald *{cursor:default;} /* 31 -- Die Fussleiste sitzt unten, auch wenn die Seite kurz ist. Der Entwurf regelt das an body > footer; in WordPress steckt zwischen beiden noch der Behaelter des Themes, deshalb greift die Regel dort nicht. Also wird der Behaelter selbst die Spalte: er fuellt das Fenster, und die Fussleiste haengt sich an sein unteres Ende. */ body > #page{flex:1 0 auto;display:flex;flex-direction:column;min-height:100vh;} @supports (min-height:100dvh){ body > #page{min-height:100dvh;} } #page > #content{flex:1 0 auto;} /* Kein margin-top:auto an der Fussleiste: der wuerde den Mindestabstand von 130 px schlucken, sobald die Seite lang genug ist. Stattdessen waechst der Inhalt und schiebt die Leiste nach unten -- ihr Abstand bleibt dabei unangetastet. */ /* 31 -- Die Fussleiste steht immer unten am Bildschirmrand, auch wenn die Seite kuerzer ist als das Fenster. Bisher hing das an Astras Geruest -- und damit an Klassen, die je nach Seiteneinstellung da sind oder nicht. Hier steht es ausdruecklich: die Seite ist eine Spalte, mindestens so hoch wie das Fenster, der Inhalt dehnt sich, die Leiste nicht. */ #page{display:flex;flex-direction:column;min-height:100vh;} #content{flex:1 0 auto;} #page > footer{flex:0 0 auto;} @supports (min-height:100dvh){ /* Auf dem Telefon waechst und schrumpft die Adresszeile; dvh rechnet mit, vh nicht -- sonst haengt die Leiste dort unter dem Rand. */ #page{min-height:100dvh;} } /* 32 -- Gebucht oder abgelesen. Die Vorlage kennt zwei Marken: die gefuellte steht fuer eine Buchung auf Konten, die umrandete fuer ein Ablesen aus den Konten fuer das Berichtswesen. Bilanz und Contribution buchen, Flow und PCF lesen ab. Mass, Ecken und Farbe bleiben gleich -- nur die Flaeche weicht der Linie. */ /* Beide Fassungen tragen denselben Kasten: die gefuellte einen durchsichtigen Rand, die offene einen sichtbaren. Sonst waere die umrandete Marke zwei Pixel groesser als die gefuellte. */ .abb .m,.karte .m,.tafel .m{box-sizing:border-box;border:1px solid transparent; padding:1px 8px;} .m.offen{background:transparent;border-color:currentColor;} .m.offen.m1{color:var(--x1);} .m.offen.m2{color:var(--x2);} .m.offen.m3{color:var(--x3);} .m.offen.m4{color:var(--x4);} .m.offen.m5{color:var(--x5);} .m.offen.m6{color:var(--x6);} .m.offen.m7{color:var(--x7);} .m.offen.m8{color:var(--x8);} .m.offen.m9{color:var(--x9);} .m.offen.m10{color:var(--x10);} /* ==================================================================== 33 -- Das Telefon Am Schreibtisch aendert sich nichts. Unter 760 px gilt eine einzige Regel: die Breite gehoert dem Text. Zwei Spalten und die Ziehharmonika sind wieder draussen -- beides hat Zeilen erzeugt, in denen drei Woerter standen. Stattdessen ruecken die Raender enger zusammen und alles, was waagerecht nicht hineinpasst, steht untereinander. ==================================================================== */ @media (max-width:760px){ /* Der Seitenrand war 32 px, das graue Feld legte 24 px drauf: von 375 px blieben 263 fuer den Satz. Jetzt 18 und 16 -- das sind 307 bis 339 px, ein Sechstel mehr Zeile. Die Bahn von Kopf und Fuss haengt an derselben Zahl und geht mit. */ :root{--rand:18px;--bahn:calc(100% - 36px);} .casi-feld > .e-con-inner{padding:30px 16px;} .kasten{padding:20px 18px;} /* Ohne nowrap entscheidet die Laenge des Instituts, ob das Bild links neben dem Namen steht oder darueber -- "University of Mannheim" passt nicht in die 151 px daneben und sprang um, "BASF" blieb. Zwei Bauarten in einer Liste. Jetzt bleibt es eine. */ .casi-member-list .casi-person{flex-wrap:nowrap;} /* Die Schaltflaeche der Lade traf man bei 17 x 16 px nicht zuverlaessig. Die drei Striche bleiben, die Flaeche darum waechst auf 44 px. */ .kopf .burger{width:44px;height:44px;margin-right:-13px;} .kopf .burger span{left:50%;margin-left:-8.5px;} .kopf .burger span:nth-child(1){top:14px;} .kopf .burger span:nth-child(2){top:21px;} .kopf .burger span:nth-child(3){top:28px;} .kopf .burger.auf span:nth-child(1), .kopf .burger.auf span:nth-child(3){top:21px;} /* Die Fussleiste schliesst in einer Zeile ab. */ .fuss-zeile{flex-direction:row;flex-wrap:wrap;align-items:baseline; gap:6px 14px;} } /* ==================================================================== 34 -- Am Telefon wischt man durch die Karten Wie im Entwurf: die Karten liegen waagerecht in einer Schiene und rasten einzeln ein. Nur die Reiterleiste darueber faellt weg -- sie brauchte 667 px und hatte 339, und die Punkte unter der Reihe sagen ohnehin, wo man ist. ==================================================================== */ .wechselzeile.stapel-aus{display:none;} /* ==================================================================== 35 -- Die Reiterleiste steht am Telefon untereinander Auf der Publikationsseite waehlt sie wirklich etwas aus, sie kann also nicht weg. Nebeneinander brauchen die drei Reiter 667 px und haben 339 -- zwei Drittel lagen hinter dem Rand. Untereinander steht jeder ueber die volle Breite, traegt seinen Namen in einer Zeile und ist 44 px hoch. Der weisse Laeufer wandert nicht mehr, er liegt einfach unter dem offenen Reiter. ==================================================================== */ @media (max-width:760px){ .reiterleiste{display:flex;flex-direction:column;width:100%;max-width:none; overflow:visible;gap:2px;} .reiterleiste > .laeufer{display:none;} .reiterleiste > .reiter{flex:0 0 auto;width:100%;white-space:normal; text-align:left;min-height:44px;display:flex;align-items:center; padding:10px 14px;border-radius:7px;} .reiterleiste > .reiter.an{background:var(--papier);} .wechselzeile{display:block;} .wechselzeile > .schalter{margin-top:14px;} } /* ==================================================================== 36 -- Die Kartenreihe laeuft bis an den Fensterrand Der Entwurf schaltet den Ausbruch bei 1432 px ab. Auf einem Rechner mit 1440 oder 1512 px endet die Reihe seither 73 bis 109 px vor dem Rand, obwohl dort noch gar keine weissen Balken stehen -- die Polsterung waechst bis 1600 px einfach mit. Also misst das Skript den wirklichen Abstand der Bahn zum Fensterrand und die Reihe nimmt ihn sich -- in jeder Breite. Auf grossen Schirmen steht der Inhalt zentriert zwischen weissen Balken; die Reihe laeuft ueber diese Balken hinweg bis an den Bildschirmrand, wie im Vorbild. ==================================================================== */ @media (min-width:1250px){ .karten{margin-left:calc(var(--luft, var(--rand)) * -1); margin-right:calc(var(--luft, var(--rand)) * -1);} .kartenbahn{padding-left:var(--luft, var(--rand)); padding-right:var(--luft, var(--rand)); scroll-padding-left:var(--luft, var(--rand));} .kartennav{margin-left:var(--luft, var(--rand)); margin-right:var(--luft, var(--rand));} } /* ==================================================================== 37 -- Der Produkt-Fussabdruck bleibt zweispaltig Die Tafel ist im Entwurf so breit wie die Seite, auf WordPress nur so breit wie die Karte. Aus 540 px fuer die Abbildung wurden 455, und unter 520 px klappt die Behaelterabfrage Partial und Full untereinander. Genau das sah verrutscht aus. Die Abbildung bekommt darum in der Karte mehr von der Zeile -- es ist eine breite Grafik, die beiden Spalten gehoeren nebeneinander. ==================================================================== */ @media (min-width:1250px){ .karte .tafelzeile.breit-text{grid-template-columns:minmax(0,.55fr) minmax(0,1fr);} /* Die beiden Wertspalten brauchen nur die Marken. Was sie an Polsterung abgeben, bekommt die Beschriftung -- und steht dann wie in der PowerPoint in einer Zeile. */ .karte .abb-pcf .rechnung.r2b .w{padding-left:14px;} /* Die breiteste Beschriftung misst 244 px. Mit 10 px Polsterung rechts blieben 240 -- vier zu wenig, und zwei Zeilen brachen um. Der Abstand zur Wertspalte steht ohnehin links an ihr. */ .karte .abb-pcf .rechnung.r2b .txt{padding-right:0;} } /* ==================================================================== 38 -- Die Marken tragen kraeftiger auf Weiss auf Farbe verliert bei 13 px an Gewicht, darum stehen die Buchstaben in der gefuellten Marke jetzt auf 700 statt 600. Die offene Marke bekommt einen halben Punkt mehr Rand. Beide Bauarten behalten ihre 1,5 px Rahmen -- die gefuellte durchsichtig -- damit sie gleich hoch bleiben. ==================================================================== */ .abb .m,.karte .m,.tafel .m{border-width:2px;} .abb .m:not(.offen),.karte .m:not(.offen),.tafel .m:not(.offen){font-weight:700;} /* ==================================================================== 39 -- Beitrag und Fluss fuellen ihre Karte Die Bilanz gibt die Kartenhoehe vor: 542 px Abbildung. Beitrag und Fluss standen mit 169 und 200 px daneben und liessen 200 px Luft. Sie bekommen darum dieselbe Aufteilung wie die Bilanz -- ein Drittel Text, zwei Drittel Abbildung. Mehr aendert sich an ihnen nicht. ==================================================================== */ @media (min-width:1250px){ .tafelzeile.halbe:has(.abb-beitrag), .tafelzeile.halbe:has(.abb-fluss){ grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);} /* Sonst nichts: Beitrag und Fluss tragen dieselbe Schriftgroesse und dieselben Zeilenabstaende wie jede andere Abbildung der Seite. Die eigenen 15 px und die eigene Abstandsreihe, die hier einmal standen, waren genau der Unterschied, den man sah. */ } /* ==================================================================== 40 -- Markierter Text bleibt in der Farbe des Browsers Astra schreibt in seinem eingebetteten Stil ::selection{background-color:var(--ast-global-color-0);color:#000} und faerbt damit jede Markierung auf der Seite gruen. Das Markieren gehoert dem Leser, nicht der Gestaltung -- revert gibt beides an den Browser zurueck. ==================================================================== */ /* revert gab die Markierung an den UA zurueck -- und dort ist sie durchsichtig, also unsichtbar. Die Systemfarben sind der richtige Weg: sie sind genau das, was der Browser ohne jede Regel malen wuerde. */ ::selection{background-color:Highlight;color:HighlightText;} ::-moz-selection{background-color:Highlight;color:HighlightText;} /* ==================================================================== 41 -- Die Partnerkoepfe auf der Startseite Dort sind Steering Committee, Academic Partners und Industry Partners drei gleichrangige Unterabschnitte von About CASI. Die beiden Partnerzeilen standen auf 30 px und mit 148 px Abstand darueber, das Lenkungsgremium auf 20 px und mit 32 px. Jetzt tragen alle drei dieselbe Groesse, und der erste Partnerkopf ruecke auf denselben Abstand wie das Lenkungsgremium. Auf der About-Seite bleibt alles, wie es ist -- dort ist das Lenkungsgremium selbst eine 30er Ueberschrift. ==================================================================== */ body.home .casi-partnerkopf .elementor-heading-title{font-size:20px;} /* Nachtrag: derselbe Abstand gilt fuer beide Partnerzeilen. Ueber "Academic Partners" stehen 32 px bis zur Unterkante der Mitgliederkarten; ueber "Industry Partners" standen 148 px bis zur Logozeile. Jetzt sind beide Abstaende gemessen gleich. */ body.home .elementor-widget-heading.casi-partnerkopf{margin-top:32px;} /* ==================================================================== 42 -- Die Rechtszeile steht unter dem Formular, nicht daneben Sie hing als schmale Spalte rechts und drueckte den Abo-Block auf 640 px -- daher der Umbruch mitten im Satz. Jetzt liegt sie als eine Zeile darunter, quer ueber die Bahn: Nachweis links, Verweise rechts. Der Satz bekommt die ganze Breite und laeuft in einer Zeile durch, das Formular bleibt bei seinen 640 px. ==================================================================== */ @media (min-width:981px){ .fuss-unten{flex-direction:column;align-items:stretch;gap:44px;} .fuss-abo{max-width:none;} .fuss-abo > .formular{max-width:640px;} .fuss-zeile{flex-direction:row;align-items:baseline; justify-content:space-between;text-align:left;gap:20px; border-top:var(--fein) solid var(--linie);padding-top:26px;} } /* ==================================================================== 43 -- Ein Grad kleiner am Telefon Jede Groesse geht einen Schritt die Reihe der Seite hinunter, keine erfundenen Zwischenwerte. Die Zeilenhoehen sind Verhaeltnisse und gehen von allein mit. Der Fliesstext faellt nur von 17 auf 16 px -- darunter liest es sich am Telefon nicht mehr gut, und Eingabefelder unter 16 px zoomt iOS beim Antippen selbsttaetig heran. ==================================================================== */ @media (max-width:760px){ body,body.elementor-kit-1659,.casi-voll p,.kasten p,.tafelzeile p{font-size:16px;} h1,.elementor-widget-heading h1.elementor-heading-title{font-size:29px;} h2,.elementor-widget-heading h2.elementor-heading-title, .page-id-2462 .elementor-widget-heading h2.elementor-heading-title{font-size:21px;} .karte > .kartenkopf,.zwischen,.kartentitel, .elementor-widget-heading h3.elementor-heading-title{font-size:18px;} .karte .abb,.tafel .abb{font-size:13px;} .fuss-ruf p{font-size:20px;} .knopf,.elementor-button,.wpforms-submit{font-size:15px;} .jahr,.meta,.inst,.casi-person-inst .elementor-heading-title, .casi-pub div.elementor-heading-title{font-size:13px;} .reiter{font-size:15px;} .casi-person-name .elementor-heading-title{font-size:17px;} .lade nav a{font-size:17px;} } /* ==================================================================== 44 -- Die News-Zeile Eine Meldung ist eine Zeile ueber die volle Breite: klein die Rubrik und das Datum, darunter die Ueberschrift und der Text, rechts ein Zeichen -- das Kalendersymbol bei einem Termin, sonst der Winkel zum hinterlegten Verweis. Zwischen zwei Meldungen liegt der Strich, oben und unten keiner. Aus dem Raster wird damit eine Liste: drei Spalten nebeneinander zwingen jede Meldung in dieselbe Hoehe, eine Liste laesst jede so hoch sein, wie sie ist. Die Doppelklassen sind noetig, weil Elementors .e-con-full.e-flex sonst staerker waere als eine einzelne Klasse. ==================================================================== */ .casi-news-liste{display:block;} .casi-pub.casi-news-strich, .casi-feld .casi-pub.casi-news-strich{ display:grid;grid-template-columns:minmax(0,1fr) auto; column-gap:40px;align-items:start; background:none;border:0;border-radius:0; border-top:1px solid var(--strich); padding:18px 0 0;margin-top:34px;} .casi-news-liste > .casi-news-strich:first-child{ border-top:0;padding-top:0;margin-top:0;} .casi-news-satz{min-width:0;} .casi-news-strich .elementor-widget{margin-bottom:0;} .casi-pub.casi-news-strich h3.elementor-heading-title{margin-bottom:10px;} /* Ueber die ganze Bahn laefe der Satz auf 150 Zeichen je Zeile. Die Ueberschrift darf so breit werden, der Satz haelt sein Mass. */ .casi-news-strich .elementor-widget-text-editor p{ font-size:17px;line-height:1.6;max-width:none;} /* Der Zeigeeffekt gehoert dem Titel, nicht der Linie. */ .casi-pub.casi-news-strich.is-linked:hover{border-top-color:var(--strich);} .casi-news-strich > .casi-pub-hit{border-radius:0;} /* Das Zeichen am rechten Rand ist ein eigener Weg und liegt darum ueber der Klickflaeche der Zeile. Es steht oben, auf Hoehe der kleinen Zeile -- dort faengt die Meldung an. */ a.casi-news-tat,button.casi-news-tat{position:relative;z-index:3;display:grid;place-items:center; width:42px;height:42px;margin-top:-9px;margin-right:-6px;flex:0 0 auto; color:var(--tinte);border-radius:var(--rad-klein); transition:color .2s;} a.casi-news-tat svg,button.casi-news-tat svg{width:30px;height:30px;display:block;} a.casi-news-tat:hover,button.casi-news-tat:hover{color:var(--akzent);} @media (max-width:760px){ .casi-pub.casi-news-strich, .casi-feld .casi-pub.casi-news-strich{column-gap:18px;margin-top:26px;} .casi-pub.casi-news-strich h3.elementor-heading-title{font-size:18px;} .casi-news-strich .elementor-widget-text-editor p{font-size:16px;} a.casi-news-tat,button.casi-news-tat{width:36px;height:36px;margin-top:-7px;margin-right:-5px;} a.casi-news-tat svg,button.casi-news-tat svg{width:26px;height:26px;} } /* ==================================================================== 45 -- Die Haarlinie gilt auf der ganzen Seite --fein ist im Entwurf auf .abb definiert, also nur innerhalb der Abbildungen gueltig. Jede Regel ausserhalb, die var(--fein) benutzte, war damit ungueltig und zeichnete gar keine Linie -- der Rahmen der News-Kachel und die Linie ueber der Rechtszeile zum Beispiel. Die Zahl wandert eine Ebene hoeher; .abb setzt sie ohnehin selbst. ==================================================================== */ :root{--fein:1px;} /* ==================================================================== 46 -- Die Gleichung bei Consistent Numbers Aus der PowerPoint v05, Seite 5: drei Zeilen untereinander statt einer langen. Die Rahmung bleibt die der uebrigen Gleichungen; nur das Raster wird von drei Spalten auf eine Spalte gestellt. ==================================================================== */ .abb-gleichung .gl-hoch{display:block;text-align:center;} /* Die dreispaltige Gleichung setzt ihre linke Seite rechtsbuendig, damit sie an das Gleichheitszeichen stoesst. Untereinander gilt das nicht -- dort steht jede Zeile mittig. Die Regel muss die Kinder direkt treffen, text-align auf dem Behaelter reicht nicht dagegen an. */ .abb-gleichung .gl-hoch > .l, .abb-gleichung .gl-hoch > .z, .abb-gleichung .gl-hoch > .r{text-align:center;} .abb-gleichung .gl-hoch > .l, .abb-gleichung .gl-hoch > .r{font-family:'Mori',system-ui,sans-serif; font-weight:600;line-height:1.35;} .abb-gleichung .gl-hoch > .z{padding:10px 0;color:var(--leise);} .abb-gleichung .gl-hoch .leiser{font-weight:400;color:var(--leise);} /* Der Kasten ist nur so breit wie sein laengster Satz -- 283 von 670 px. Links ausgerichtet sass er verloren in der Spalte. Er steht jetzt mittig darin und bekommt eine Mindestbreite, damit die drei Zeilen nicht in einem schmalen Streifen kleben. */ .abb-gleichung .kasten{padding:30px 34px;margin-left:auto;margin-right:auto; min-width:min(100%,420px);} /* ==================================================================== 48 -- Die Karten ohne Ueberschrift, ohne Pfeile, ohne Punkte Die Ueberschrift auf der Karte wiederholte nur den Reiter darueber; an ihrer Stelle steht der Name jetzt im Satz, halbfett, dort wo er ohnehin vorkommt. Wo er nicht vorkommt, faengt die Karte mit ihrem Zeichen an. Die Navigationszeile darunter faellt weg: die Reiterleiste ueber der Reihe waehlt dasselbe aus und sagt zugleich, wo man ist. Am Telefon gibt es diese Leiste nicht -- dort bleiben die Punkte als einzige Standanzeige stehen, die Pfeile aber auch dort nicht. ==================================================================== */ .kartennav{display:none;} @media (max-width:1249px){ .kartennav{display:flex;} .kartennav .pfeil{display:none;} } /* Der Name im Satz traegt das Halbfett der Seite, nicht das Fett des Browsers. */ .karte p strong,.tafel p strong,.karte p b,.tafel p b{font-weight:600;} /* Die angeschnittene Karte rechts waechst beim Zeigen ein Stueck -- gerade genug, dass man merkt, dass sie anfassbar ist. Die offene Karte bleibt ruhig: dort liest man, dort blaettert man nicht. */ .karte{transition:transform .2s ease-out;} .karte:not(.an){cursor:pointer;} /* Der genaue Wert steht weiter unten in Block 50. */ @media (prefers-reduced-motion:reduce){ .karte{transition:none;} .karte:not(.an):hover{transform:none;} } /* ==================================================================== 49 -- Die Antwortseite: offene Zeichen, gefuellte Pillen, verwandte Farben Die vier Zeichen auf "Rigorous accounting at lower costs" waren Flaechen ohne Linie; jetzt sind es dieselben Formen als Kontur, und die Haarlinie von 1,53 px gilt fuer sie wie fuer alle anderen (die Regel dazu steht in casi-proposal.css bei .sym). ==================================================================== */ /* Die Normenpillen ueber dem ICCA-Block stehen auf Papier, nicht auf dem Band: sonst schimmert der graue Grund durch und sie wirken wie Loecher. */ .system .norm{background:var(--papier);} /* Die Farben der Wertschoepfungskette und des ICCA-Blocks stammen jetzt aus derselben Familie wie die Marken A bis J in den CO2-Abschluessen darueber -- dieselben Farbtoene, aber eine Stufe dunkler und ruhiger. Gleich sind sie nirgends: die Marken stehen klein auf Papier, diese Felder tragen weissen Satz und brauchen darum mehr Tiefe. */ .abb .kette .k-iron{background:#A75F26;} /* verwandt mit --x7 */ .abb .kette .k-steel{background:#1A6685;} /* verwandt mit --x3 */ .abb .kette .k-body{background:#17876F;} /* verwandt mit --x5 */ .abb .kette .k-car{background:#2A7A4B;} /* verwandt mit --x6 */ .abb .kette .k-leben{background:#85499E;} /* verwandt mit --x1 */ .abb.system .block{background:#1A9C7E;} /* verwandt mit --x5 */ /* ==================================================================== 50 -- Die angeschnittene Karte waechst wirklich scale allein reichte nicht: die Schiene schneidet oben und unten ab, also war vom Wachsen nichts zu sehen. Sie bekommt darum zehn Pixel Luft, die ein negativer Rand gleich wieder einholt -- die Reihe steht damit unveraendert, hat aber Platz fuer die groessere Karte. Das Mass ist ein halbes Prozent: auf einer Karte von 1130 px sind das knapp sechs Pixel in der Breite und drei in der Hoehe. Mehr soll es nicht sein -- die Karte soll antworten, nicht springen. ==================================================================== */ .kartenbahn{padding-top:10px;padding-bottom:10px; margin-top:-10px;margin-bottom:-10px;} .karte:not(.an):hover{transform:scale(1.005);position:relative;z-index:2;} /* ==================================================================== 51 -- Ein Verweis im Satz ist unterstrichen Die Regel des Entwurfs heisst .textlink und ist eine Klasse (0,1,0); die Regel fuer Verweise im Text-Widget ist Klasse plus Element (0,1,1) und war damit staerker -- auf Imprint und Privacy stand der Verweis deshalb wie gewoehnlicher Satz da. Hier steht er wieder mit Strich, mit dem Mass des Entwurfs. ==================================================================== */ /* Das Kleingedruckte unter dem Formular verhaelt sich wie der Punkt in der Fussleiste: ohne Strich, der Strich kommt erst beim Zeigen. Im Fliesstext bleibt er stehen -- dort ist er die einzige Ansage. */ .elementor-widget-text-editor a.textlink:not(.stark), .elementor-widget-text-editor a.casi-textlink{ text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;transition:opacity .15s;} .elementor-widget-text-editor a.textlink:hover, .elementor-widget-text-editor a.casi-textlink:hover{ text-decoration:underline;opacity:.5;} /* ==================================================================== 52 -- Die Wertschoepfungskette: gleiche Pillen aussen, farblos innen Links steht, was ein Unternehmen von seinem Lieferanten uebernimmt, rechts, was es an seinen Kunden weitergibt -- dieselbe Groesse also, sonst liest man eine Rangfolge hinein, die es nicht gibt. Die Vorlage gab der rechten Spalte 1,3 Teile gegen 1; jetzt tragen alle drei Spalten denselben Teil, und PCF Iron rechts ist so breit wie PCF Iron links. Die mittlere Spalte ist der eigene Beitrag und traegt darum keine Farbe: sie wandert nicht durch die Kette, sie kommt in jeder Zeile neu dazu. Weiss auf dem Band, Tinte im Satz -- wie die Felder im ICCA-Block. ==================================================================== */ .abb .kette{grid-template-columns:max-content 1fr 1.7em 1fr 1.7em 1fr;} /* Jede Pille traegt eine Haarlinie, die farbigen eine durchsichtige -- sonst waere die umrandete zwei Pixel hoeher als ihre Nachbarn. */ .abb .kette .feldk{box-sizing:border-box; border:var(--fein) solid transparent;} .abb .kette .k-direct{background:var(--papier);color:var(--tinte); border-color:var(--strich);} /* ==================================================================== 53 -- Ein Verweis, der traegt "Get in touch" mitten im Absatz steht halbfett -- das ist im Entwurf seine Auszeichnung, ein Strich kaeme doppelt. Der Strich kommt erst beim Zeigen, wie beim Punkt in der Fussleiste. ==================================================================== */ .textlink.stark, .casi-mehr a.textlink.stark, .elementor-widget-text-editor a.textlink.stark{ font-weight:600;text-decoration:none;} .textlink.stark:hover, .casi-mehr a.textlink.stark:hover, .elementor-widget-text-editor a.textlink.stark:hover{ text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;opacity:1;} /* ==================================================================== 54 -- Die Reihe faehrt ruhig und laesst sich mit den Pfeilen fahren Waehrend einer angestossenen Fahrt setzt die Rastung aus: sie und die eigene Bewegung zogen gegeneinander, und am Ende zuckte die Reihe noch einmal nach. Und was sich bewegt, wird nicht gleichzeitig groesser -- der Zeigeeffekt haelt still, solange gefahren wird. ==================================================================== */ .kartenbahn.faehrt{scroll-snap-type:none;} .kartenbahn.faehrt .karte:hover{transform:none;} /* Die Bahn ist anwaehlbar, zeigt das aber gar nicht an. Ein Rahmen um sie herum lief am Schreibtisch bis an den Fensterrand und sah aus wie ein Fehler; einer um die Karte blieb ein Kasten. Die Reihe faehrt bei jedem Tastendruck sichtbar weiter -- diese Bewegung ist die Rueckmeldung, und eine zweite braucht es hier nicht. */ .kartenbahn:focus,.kartenbahn:focus-visible{outline:none;} .reiter:focus{outline:none;} .reiter:focus-visible{outline:2px solid var(--tinte);outline-offset:2px;} /* ==================================================================== 55 -- Das Plus faehrt die Fortsetzung auf Kein Ein- und Ausblenden auf eine geratene Hoehe: die Fortsetzung liegt in einer Rasterzeile, die von 0fr auf 1fr waechst. Der Browser rechnet die wirkliche Hoehe selbst aus, egal wie lang der Text ist, und die Zeilen darunter ruecken in derselben Bewegung nach -- die Trennlinie macht Platz, genau wie gedacht. Das Plus dreht sich dabei um 45 Grad und ist damit ein Kreuz. ==================================================================== */ .casi-mehr{display:grid;grid-column:1 / -1;grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);} .casi-mehr > div{overflow:hidden;min-height:0;} .casi-news-strich.offen > .casi-mehr{grid-template-rows:1fr;} .casi-mehr p{font-size:17px;line-height:1.6;max-width:none;margin:0;} .casi-mehr p:first-child{padding-top:14px;} .casi-mehr p + p{margin-top:16px;} /* Das Kit faerbt und polstert jedes button-Element; hier bleibt vom Knopf nur das Zeichen uebrig. */ button.casi-news-tat{background:none;border:0;padding:0;box-shadow:none; cursor:pointer;-webkit-appearance:none;appearance:none; letter-spacing:normal;line-height:0;} button.casi-news-tat:hover,button.casi-news-tat:focus{background:none;box-shadow:none;} button.casi-news-tat svg{transition:transform .34s cubic-bezier(.4,0,.2,1);} .casi-news-strich.offen button.casi-news-tat svg{transform:rotate(45deg);} button.casi-news-tat:focus{outline:none;} button.casi-news-tat:focus-visible{outline:2px solid var(--tinte);outline-offset:2px;} @media (prefers-reduced-motion:reduce){ .casi-mehr,button.casi-news-tat svg{transition:none;} } @media (max-width:760px){ .casi-mehr p{font-size:16px;} .casi-mehr p:first-child{padding-top:12px;} } /* ==================================================================== 56 -- Der Satz unter dem Seitentitel bricht gleichmaessig Bisher lief die erste Zeile bis an die 820 px und die zweite trug nur noch zwei Woerter. text-wrap:balance laesst den Browser beide Zeilen gleich lang machen -- und zwar in jeder Fensterbreite neu, ohne ein eingesetztes Umbruchzeichen, das bei der naechsten Textaenderung an der falschen Stelle stuende. Browser, die es nicht kennen, brechen wie bisher. ==================================================================== */ .elementor-widget-heading.casi-hero-titel .elementor-heading-title{ text-wrap:balance;} /* ==================================================================== 57 -- Die Haken im Hero stehen in der Grotesk Drei kurze Zeilen untereinander, jede mit einem Haken davor: das ist eine Aufzaehlung, kein Fliesstext. In der Serife franst sie aus, in Mori steht sie geordnet unter dem Satz darueber. ==================================================================== */ .casi-haken p{font-family:'Mori',system-ui,sans-serif;font-size:16px; line-height:1.5;} @media (max-width:760px){ .casi-haken p{font-size:15px;} } /* Am Schreibtisch gibt es den Knopf nicht: dort steht die Abbildung in der Karte. Das Element bleibt im Markup, damit das Skript nichts umbauen muss. */ .abb-ruf{display:none;} /* ==================================================================== 58 -- Die Kartenreihen am Telefon Gewischt wird weiter, und die naechste Karte schaut wie bisher rechts herein -- nur kommt die Reiterleiste dazu, als Raster aus zwei Spalten. Wer lieber tippt, tippt; wer lieber wischt, wischt. Die Abbildung der Karte waere auf 339 px nicht zu lesen: sie weicht einem Knopf, der sie im Vollbild zeigt, unveraendert aus der Fassung fuer den Schreibtisch. Ohne Abbildung sind die Karten verschieden lang -- die Schiene streckt sie darum alle auf dieselbe Hoehe. Am Schreibtisch aendert sich nichts: alles steht in der Abfrage. ==================================================================== */ /* Nachtrag: die Schwelle steht bei 1240 statt 760 px, und sie steht dort nicht gegriffen. Nebeneinander funktioniert die Karte erst, wenn die Abbildungsspalte 560 px misst -- darunter klappt die Bilanz ihre beiden Seiten untereinander und wird doppelt so hoch. Gemessen: 981 px Fenster ergeben 426 px Spalte, 1194 px ergeben 540, erst 1233 px erreichen 560. Die Schwelle steht bei 1250 statt 1233 px, damit ein paar Pixel Luft bleiben: bei 1241 waeren es 4,7, und so knapp will man nicht stehen. Ein iPad misst 834 px hochkant und 1194 px quer und lag mit beiden Lagen darunter: die Bilanz stand 1068 px hoch, und weil alle Karten einer Reihe gleich hoch sind, riss sie die ganze Reihe mit und liess in den drei anderen bis zu 500 px Leere. Bis 1249 px gilt darum die Darstellung mit dem Knopf. */ @media (max-width:1249px){ /* Die Leiste ist am Telefon wieder da. Sie bleibt aber eine Sache der schmalen Schirme: schon ab 761 px stehen drei Reiter nebeneinander, und zwei sehr breite Felder uebereinander saehen dort verloren aus. Darum steht diese Gruppe in ihrer eigenen Abfrage und bleibt beim alten Mass. */ @media (max-width:760px){ .wechselzeile,.wechselzeile.stapel-aus{display:block;} .reiterleiste{display:grid;grid-template-columns:1fr 1fr;gap:6px; width:100%;max-width:none;overflow:visible;} .reiterleiste > .laeufer{display:none;} .reiterleiste > .reiter{width:auto;min-height:44px;display:flex; align-items:center;justify-content:center;text-align:center; padding:10px 12px;border-radius:8px;white-space:normal;line-height:1.25;} .reiterleiste > .reiter.an{background:var(--papier);} } /* Die Schiene bleibt, die Punkte darunter braucht es nicht mehr -- die Leiste sagt jetzt, wo man ist. Die Karte ist schmaler als der Schirm, und zwar deutlich: gut zwei Drittel. Dann steht die naechste nicht als Kante da, sondern als Karte, und man sieht auf den ersten Blick, dass es weitergeht -- dasselbe Verhaeltnis, das Apple auf seinen Seiten benutzt. Weil in der Karte nur Text steht, traegt sie die schmale Spalte gut. */ .karten{margin-top:22px;--kb:77%;} .kartenbahn{align-items:stretch;} .karte{height:auto;} .kartennav{display:none;} /* Nur Text und Zeichen. Die Abbildungsspalte traegt die Kennung vom Skript, damit keine :has-Abfrage noetig ist. */ /* Eine Spalte, eine Reihe -- und die Reihe nimmt die ganze Karte ein, damit der Knopf unten stehen kann. */ .karte .tafelzeile{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr; gap:0;flex:1 1 auto;align-items:stretch;} .karte .abb-spalte,.abb-frei{display:none;} .karte .mit-zeichen > .sym,.karte > .sym{margin-bottom:14px;} .karte{padding:20px 18px;} /* Der Knopf ist die offene Schaltflaeche der Seite, Wort fuer Wort dieselben Masse wie .knopf-linie. Er sitzt unten in der Karte, damit er bei allen Karten auf einer Hoehe steht. */ .karte .tafelzeile > *:not(.abb-spalte){display:flex;flex-direction:column;} .karte button.abb-ruf.abb-ruf{margin-top:auto;} /* Der automatische Rand schiebt den Knopf nach unten -- bei der laengsten Karte bleibt dabei nichts uebrig und der Knopf klebt am Text. Ein fester Abstand am letzten Absatz haelt ihn ueberall auf Abstand, in jeder Karte gleich. */ .karte .tafelzeile p:last-of-type{margin-bottom:26px;} button.abb-ruf.abb-ruf{display:inline-flex;align-items:center;gap:10px;align-self:flex-start; margin-top:20px;font-family:'Mori',system-ui,sans-serif;font-size:16px; font-weight:400;line-height:1.6;letter-spacing:normal; color:var(--tinte);background:transparent; border:1px solid var(--tinte);border-radius:var(--rad-klein); padding:10px 19px;cursor:pointer;box-shadow:none; transition:background-color .2s,color .2s;} button.abb-ruf.abb-ruf:hover,button.abb-ruf.abb-ruf:focus{background:var(--tinte);color:var(--papier);} button.abb-ruf.abb-ruf svg{width:17px;height:17px;display:block;} } /* ==================================================================== 59 -- Die Abbildung im Vollbild Die Abbildung wird nicht neu gebaut, sondern unveraendert aus der Karte geholt und in einen Halter von 660 px gelegt -- genau die Breite, die sie am Schreibtisch hat. Die Behaelterabfragen der Abbildung sehen damit dieselbe Breite wie dort und setzen sie genauso. Der Halter wird als Ganzes so weit verkleinert, dass er auf den Schirm passt; wer naeher heran will, tippt auf 1:1 und schiebt, oder zieht mit zwei Fingern auf. ==================================================================== */ .abb-schicht{position:fixed;inset:0;z-index:10000;display:flex; flex-direction:column;justify-content:flex-end; background:rgba(14,77,73,.45);} .abb-schicht[hidden]{display:none;} .abb-blatt{background:var(--papier);border-radius:var(--rad) var(--rad) 0 0; display:flex;flex-direction:column;max-height:94vh;min-height:60vh; animation:blatt-auf .3s cubic-bezier(.4,0,.2,1);} @keyframes blatt-auf{from{transform:translateY(18px);opacity:0;}to{transform:none;opacity:1;}} .abb-kopf{display:flex;align-items:center;justify-content:space-between; gap:12px;padding:16px 18px 8px;} .abb-titel-zeile{font-family:'Mori',system-ui,sans-serif;font-size:17px; font-weight:600;color:var(--tinte);min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} /* Schliessen und 1:1 tragen die Masse der Pfeile und der offenen Schaltflaeche -- nichts Neues, nur das Vorhandene. */ button.abb-zu.abb-zu{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center; background:transparent;border:1px solid var(--tinte); border-radius:var(--rad-klein);color:var(--tinte);cursor:pointer; box-shadow:none;padding:0;transition:background-color .2s,color .2s;} button.abb-zu.abb-zu:hover{background:var(--tinte);color:var(--papier);} button.abb-zu.abb-zu svg{width:18px;height:18px;display:block;} .abb-buehne{flex:1 1 auto;overflow:auto;padding:8px 18px 20px; -webkit-overflow-scrolling:touch;} .abb-halter{width:660px;transform-origin:top left;} .abb-fuss{display:flex;justify-content:flex-start;padding:0 18px 18px;} button.abb-zoom.abb-zoom{font-family:'Mori',system-ui,sans-serif;font-size:16px; font-weight:400;line-height:1.6;letter-spacing:normal; padding:10px 19px;border-radius:var(--rad-klein);border:1px solid var(--tinte); background:transparent;color:var(--tinte);cursor:pointer;box-shadow:none; transition:background-color .2s,color .2s;} button.abb-zoom.abb-zoom:hover{background:var(--tinte);color:var(--papier);} button.abb-zoom.abb-zoom[aria-pressed="true"]{background:var(--tinte);color:var(--papier);} body.abb-offen{overflow:hidden;} /* ==================================================================== 60 -- Die Reiterleiste bricht auch auf dem Tablet um Zwischen 761 und 980 px passte die Leiste mit vier Reitern nicht mehr in die Bahn und stand 13 px ueber dem Rand. Sie bricht dort jetzt um; der weisse Laeufer, der eine einzelne Reihe voraussetzt, weicht dabei der Flaeche unter dem offenen Reiter. ==================================================================== */ /* Nachtrag September 2026: seit die Reiter "Net CO2-Contribution Statement" und "Net CO2-Flow Statement" heissen, braucht die Leiste 965 px. Bei 981 px Fenster stand sie 141 px ueber. Der Umbruch gilt darum bis 1249 px -- dieselbe Grenze, ab der die Karten nebeneinander stehen. Wo die Reiter in eine Zeile passen, bleiben sie in einer. */ @media (min-width:761px) and (max-width:1249px){ .reiterleiste{flex-wrap:wrap;height:auto;gap:4px;} .reiterleiste > .laeufer{display:none;} .reiterleiste > .reiter.an{background:var(--papier);border-radius:8px;} } /* Nachtrag: dieser Block bleibt, obwohl die Karten seit Block 58 schon ab 1249 px umschalten. Die Leiste hat ihr eigenes Mass: drei Reiter auf Publications passen hier in eine Zeile, vier auf ICCA nicht -- umbrechen loest beides, ein festes Raster nur eines davon. */ /* ==================================================================== 61 -- Kein doppelter Vorlauf unter dem Seitentitel Die Reiterleiste bringt 32 px Vorlauf mit -- richtig, wo ueber ihr ein Absatz steht. Auf Publications steht ueber ihr aber der Seitentitel, und der bringt seinen Abstand schon selbst mit. Beides zusammen ergab 83 px statt der 54, die News und Get in touch zeigen: gemessen gleich, gesehen nicht. Wo die Leiste das Erste unter dem Titel ist, laesst sie ihren Vorlauf darum weg. ==================================================================== */ .casi-ohne-vorlauf .reiterleiste{margin-top:0;} /* ==================================================================== 62 -- Im Vollbild gilt das Mass des Schreibtischs Der Halter ist immer 660 px breit, egal wie schmal das Fenster ist. Regeln, die am Fenster haengen statt am Behaelter, greifen dort aber trotzdem -- und richten sich nach einer Breite, die die Abbildung gar nicht hat. Bei der Bilanz fiel so der Abstand der Konten zur Mittellinie weg; bei der Produktrechnung die Polsterung, die die Beschriftung in einer Zeile haelt. Beides steht hier wieder auf dem Wert, den der Schreibtisch zeigt. ==================================================================== */ .abb-halter .abb-bilanz .seite > .konto{padding-left:26px;padding-right:26px;} .abb-halter .abb-bilanz .seite:first-child > .konto{padding-left:0;} .abb-halter .abb-bilanz .seite:last-child > .konto{padding-right:0;} .abb-halter .abb-pcf .rechnung.r2b .w{padding-left:14px;} .abb-halter .abb-pcf .rechnung.r2b .txt{padding-right:0;} /* ==================================================================== 63 -- Der Termin am Ende der Fortsetzung Rechts in der Zeile ist Platz fuer genau ein Zeichen, und wo ein laengerer Text hinterlegt ist, gehoert er dem Plus. Der Kalender steht darum am Fuss des aufgefahrenen Textes -- dort, wo der Leser ohnehin ankommt, wenn er alles gelesen hat. Aufzaehlungen im aufgefahrenen Text bekommen hier ihre Masse: der Editor gibt sie aus, das Stylesheet hatte sie bisher nicht bedacht. ==================================================================== */ .casi-mehr-kalender{margin-top:22px !important;} /* Verweis und Termin stehen nebeneinander, nicht untereinander: es sind zwei Wege aus derselben Meldung heraus, keine zwei Absaetze. */ .casi-mehr-fuss{display:flex;flex-wrap:wrap;align-items:center; gap:14px 30px;} a.casi-kalenderlink{display:inline-flex;align-items:center;gap:10px; font-family:'Mori',system-ui,sans-serif;font-size:16px;font-weight:600; line-height:1.4;color:var(--tinte);text-decoration:none;} a.casi-kalenderlink:hover span,a.casi-kalenderlink:focus span{ text-decoration:underline;text-underline-offset:3px;} a.casi-kalenderlink svg{width:24px;height:24px;flex:0 0 auto;display:block;} .casi-mehr ol,.casi-mehr ul{margin:14px 0 0;padding-left:1.4em;} .casi-mehr li{font-size:17px;line-height:1.6;margin-top:6px;} .casi-mehr li::marker{color:var(--leise);} .casi-mehr p + p{margin-top:16px;} @media (max-width:760px){ .casi-mehr li{font-size:16px;} a.casi-kalenderlink{font-size:15px;} } /* ==================================================================== 64 -- Mehrere Zeichen nebeneinander Rechts in der Zeile stand bisher genau eines, und eine Rangfolge entschied welches: Plus vor Kalender vor Winkel. Wer im Formular einen Termin oder Verweis eintrug, konnte nicht sehen, dass er neben einem laengeren Text lautlos ausfiel. Die Spalte nimmt jetzt so viele Zeichen auf, wie Angaben ausgefuellt sind -- in fester Reihenfolge. Am Schreibtisch stehen sie nebeneinander; am Telefon ist die Spalte dafuer zu schmal, dort stehen sie untereinander. ==================================================================== */ .casi-news-taten{display:flex;align-items:center;gap:4px; margin-top:-9px;margin-right:-6px;} /* Verweise stehen im Text. Damit sie aussehen wie ueberall auf der Seite, braucht der Redakteur ihnen keine Klasse mitzugeben -- jeder Verweis im Text einer Meldung bekommt die Hausschrift von selbst: halbfett, ohne Unterlinie, und erst beim Darueberfahren zeigt eine Linie, dass hier etwas zu holen ist. Das Kettensymbol im Editor reicht also. */ .casi-news-satz a:not(.casi-news-tat), .casi-mehr a{color:inherit;font-weight:600;text-decoration:none; text-decoration-thickness:1px;text-underline-offset:3px;} .casi-news-satz a:not(.casi-news-tat):hover, .casi-news-satz a:not(.casi-news-tat):focus-visible, .casi-mehr a:hover,.casi-mehr a:focus-visible{text-decoration:underline;} /* Die Masse sassen bisher am einzelnen Zeichen; jetzt traegt sie die Spalte, und das Zeichen ist nur noch ein Feld darin. */ .casi-news-taten a.casi-news-tat, .casi-news-taten button.casi-news-tat, .casi-news-taten span.casi-news-leer{width:42px;height:42px; margin:0;display:grid;place-items:center;flex:0 0 auto;} .casi-news-leer{pointer-events:none;} @media (max-width:760px){ .casi-news-taten{margin-top:-8px;margin-right:-4px;} .casi-news-taten a.casi-news-tat, .casi-news-taten button.casi-news-tat, .casi-news-taten span.casi-news-leer{width:34px;height:34px;} .casi-news-taten svg{width:26px;height:26px;} } /* Erst wenn die Zeile wirklich schmal wird, stehen die Zeichen untereinander: nebeneinander kosten zwei von ihnen rund 70 px, und die fehlen dann der Ueberschrift. Uebereinander kosten sie nichts. */ @media (max-width:520px){ .casi-news-taten{flex-direction:column;gap:0;} } /* ==================================================================== 65 -- Lange Gleichungen brechen um, statt ueberzustehen Die Rechenidentitaeten stehen in drei Spalten: linke Seite, Gleichheitszeichen, rechte Seite. Die beiden Seiten waren auf max-content gesetzt, also unumbrechbar -- passte eine Gleichung nicht in den Kasten, stand sie 192 px darueber hinaus. Mit minmax(0,…) bleibt die Ausrichtung am Gleichheitszeichen erhalten, aber eine zu lange Seite darf in sich umbrechen. Kurze Gleichungen merken davon nichts: wo Platz ist, verhaelt sich minmax genau wie max-content. ==================================================================== */ .abb-formeln .gl{grid-template-columns:minmax(0,max-content) auto minmax(0,max-content);} /* ==================================================================== 66 -- Die Summe bei Consistent Numbers Vier Zeilen untereinander, wie eine Rechnung: das Rechenzeichen in einer schmalen Spalte vorn, der Posten daneben, ueber dem Ergebnis ein Strich. Dieselbe Ordnung wie in den Grafiken der Abschluesse, damit die Summe aussieht wie das, was sie ist -- eine Aufstellung, keine Gleichung. Rahmen und Luft des Kastens bleiben die der Identitaeten bei Reasonable Assurance. ==================================================================== */ .abb-summe .summe{display:grid; grid-template-columns:1.3em minmax(0,max-content); column-gap:10px;align-items:baseline;justify-content:center; font-family:'Mori',system-ui,sans-serif;line-height:1.4;} .abb-summe .summe > *{padding:7px 0;} .abb-summe .summe > .vor{color:var(--leise);text-align:center;} .abb-summe .summe > .strich{border-top:var(--fein) solid var(--strich, var(--tinte)); margin-top:6px;padding-top:13px;} .abb-summe .summe > .g{font-weight:600;} .abb-summe .summe .leiser{font-weight:400;color:var(--leise);} /* ==================================================================== 67 -- Die Legende der umrahmten Marke Auf zwei Karten stehen die Marken nur umrahmt: dort werden Konten gelesen, nicht gebucht. Die Legende sagt das unten rechts in der Grafik -- darum erscheint sie auch im Vollbild. Nur die umrahmte Marke steht darin; die gefuellte erklaert sich auf den Karten, auf denen sie vorkommt, selbst. ==================================================================== */ .abb-legende{display:flex;align-items:center;justify-content:flex-end; flex-wrap:wrap;gap:10px;margin-top:24px; font-family:'Mori',system-ui,sans-serif;font-size:.86em;line-height:1.35; color:var(--leise);} .abb-legende .m{flex:0 0 auto;margin:0;} /* Nachtrag zu 66: Eine lange rechte Seite bricht nur vor einem Rechenzeichen um, nie mitten in einem Posten. Das Zeichen steht dann vorn auf der neuen Zeile -- so liest man, dass es weitergeht. */ .abb-formeln .nb{white-space:nowrap;} /* ==================================================================== 68 -- Die Publikationen der Startseite in drei Spalten Statt einer Reihe CASI Whitepapers stehen jetzt alle drei Arten nebeneinander, jede unter ihrem Namen. Der Name traegt die Groesse der Zwischenzeile und eine Linie darunter -- er soll auf einen Blick zeigen, dass es drei Regale gibt. Damit die Ordnung stimmt, geht der Eintrag darunter je einen Schritt der Reihe hinab: Titel 17 statt 20, der Satz 15 statt 17. Keine neuen Groessen, nur andere Stufen. ==================================================================== */ .casi-pub-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px;align-items:start;} /* Doppelt angesetzt: das Elementor-Kit setzt jedes h3 mit .elementor-kit-1659 h3 auf 16 px und Schwarz, und das wiegt schwerer als eine einzelne Klasse. */ .casi-pub-spalten h3.casi-pub-spaltenkopf{font-family:'Mori',system-ui,sans-serif;font-size:20px; line-height:1.3;font-weight:600;color:var(--tinte);letter-spacing:normal; margin:0 0 20px;padding:0 0 14px;border-bottom:var(--fein) solid var(--strich, var(--linie));} .casi-pub-spalte > .casi-pub-list{grid-template-columns:minmax(0,1fr);gap:20px;} .casi-pub-spalte .casi-pub h3.elementor-heading-title{font-size:17px;line-height:1.35;} .casi-pub-spalte .casi-pub .elementor-widget-text-editor p{font-size:15px;line-height:1.55;} @media (max-width:980px){ .casi-pub-spalten{grid-template-columns:minmax(0,1fr);gap:48px;} .casi-pub-spalte > .casi-pub-list{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:640px){ .casi-pub-spalte > .casi-pub-list{grid-template-columns:minmax(0,1fr);} } /* ==================================================================== 69 -- Der Platzhalter auf der Personenkarte Gleich gross und gleich gerundet wie das Bild, eine Stufe dunkler als die Karte, die Initialen leise darin. Er soll nicht vorgeben, ein Bild zu sein -- nur den Platz halten, bis eines kommt. ==================================================================== */ .casi-person-platzhalter{width:96px;height:126px;flex:0 0 auto; display:grid;place-items:center;border-radius:var(--rad-klein); background:var(--linie);color:var(--leise); font-family:'Mori',system-ui,sans-serif;font-size:20px;font-weight:600; letter-spacing:.04em;line-height:1;} body .casi-person .casi-person-platzhalter{width:96px;} /* ==================================================================== 70 -- Die Fusszeile ohne Aufruf Den Abstand zur Linie oben brachte bisher der Aufruf mit: 76 px am Schreibtisch, 52 px am Telefon. Seit er entfallen ist, stiess der Newsletter direkt an die Linie. Jetzt traegt die Zeile darunter denselben Abstand selbst -- oben so viel wie unten, die Regel der Fussleiste: 76 px aussen. ==================================================================== */ .fuss-unten{padding-top:76px;} @media (max-width:760px){ .fuss-unten{padding-top:52px;} } /* Nachtrag zu 66: Der Strich ueber dem Ergebnis laeuft in einem Zug durch. Er sass bisher auf beiden Zellen der Zeile, und die Spaltenluft riss ihn zwischen Rechenzeichen und Posten auf. Die Luft steckt jetzt im Posten selbst, links als Polster -- die Spalten stossen aneinander, der Strich auch. */ .abb-summe .summe{column-gap:0;} .abb-summe .summe > .txt{padding-left:10px;} /* ==================================================================== 71 -- Der Fuss kompakter Weniger Luft ueber dem Newsletter, zwischen Formular und Zeile und unter der letzten Zeile. Die Ordnung bleibt, nur die Abstaende gehen eine Stufe hinunter. ==================================================================== */ .fuss-unten{padding-top:48px;padding-bottom:36px;} .fuss-abo .formular{margin-top:14px;} .fuss-abo .casi-form-consent{margin-top:6px;} @media (min-width:981px){ .fuss-unten{gap:28px;} .fuss-zeile{padding-top:18px;} } @media (max-width:760px){ .fuss-unten{padding-top:36px;padding-bottom:28px;gap:26px;} } /* ==================================================================== 72 -- Das Kaestchen in der Legende so gross wie die in der Grafik Die Legende setzt ihren Satz eine Stufe kleiner (.86em). Das Kaestchen darin rechnet in em und wurde deshalb mit kleiner -- schmaler und niedriger als die Kaestchen, die es erklaert. Hier bekommt es die Groesse der Grafik zurueck: .8em der Abbildung, also .8 / .86 der Legende. Breite, Polster und Rand folgen daraus von selbst. ==================================================================== */ .abb-legende .m{font-size:calc(.8em / .86);} /* ==================================================================== 73 -- Personenfotos immer schwarz-weiss Die Fotos kommen aus vielen Quellen -- eigene Aufnahmen, Hochschul- seiten, LinkedIn --, manche farbig, manche nicht. Der Filter macht jedes Bild in einer Personenkarte grau, gleich was hochgeladen oder verlinkt wird. Die Datei selbst bleibt unveraendert. ==================================================================== */ .casi-person-photo img,.casi-person img{filter:grayscale(1);} /* ==================================================================== 75 -- Die Zeichen in den Meldungen wachsen beim Zeigen Kalender und Plus antworten wie die Karten: sie wachsen ein Stueck, mit demselben Uebergang wie die Karten (.2 s, ease-out). Weil sie so klein sind, waere das halbe Prozent der Karten unsichtbar; 12 % sind bei 26 px gut drei Pixel. Nur wo es einen Zeiger gibt und der Bildschirm breiter ist als ein Telefon; wer weniger Bewegung eingestellt hat, bekommt keine. Das offene Plus bleibt gedreht. ==================================================================== */ @media (hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference){ a.casi-news-tat svg{transition:transform .2s ease-out;} a.casi-news-tat:hover svg,button.casi-news-tat:hover svg{transform:scale(1.12);} .casi-news-strich.offen button.casi-news-tat:hover svg{transform:rotate(45deg) scale(1.12);} } /* ==================================================================== 76 -- Publikationen: alle Kaesten gleich gross Jede Karte einer Reiter-Gruppe ist so hoch wie die hoechste der ganzen Gruppe, ueber alle Reiter hinweg (das Mass setzt casi-proposal.js als --pub-h). Zum Messen legt das Skript alle Tafeln kurz aus und laesst die Karten ihre eigene Hoehe annehmen -- in einem Zug, ohne Bild dazwischen. Auf der Startseite stehen die Tafeln zusaetzlich uebereinander in einer Zelle: der Bereich ist immer so hoch wie der hoechste Reiter, und was darunter kommt, bleibt beim Wechseln stehen. Auf Publications nicht -- dort haben die Reiter 1 bis 13 Eintraege, und unter dem kurzen stuende sonst eine leere Flaeche fuer zwoelf Karten. ==================================================================== */ .tafeln[data-g="p"] .casi-pub{min-height:var(--pub-h,0px);} .tafeln[data-g="p"].pub-messen > .tafel{display:block;} .tafeln[data-g="p"].pub-messen .casi-pub{min-height:0;align-self:start;} body.home .tafeln[data-g="p"]{display:grid;} body.home .tafeln[data-g="p"] > .tafel{display:block;visibility:hidden;} body.home .tafeln[data-g="p"] > .tafel.an{visibility:visible;} /* ==================================================================== 77 -- Logo-Laufband: eine Schleife ohne Sprung Bisher fuhr das ganze Band -- alle Marken zweimal hintereinander, gut 8700 px -- um seine halbe Breite und sprang dann zurueck. Rechnerisch nahtlos, im Browser nicht: beim Zuruecksetzen muss er den Anfang des Bandes neu zeichnen, den er laengst verworfen hatte, und genau dort stockte es. Jetzt faehrt jede Marke fuer sich, als eigene kleine Ebene: links hinaus, rechts ausserhalb des Bildes wieder herein. Das Band als Ganzes springt nie. Takt und Verzoegerung je Marke setzt der Shortcode (casi-logos.php); hier steht nur, dass die Zellen uebereinander liegen und gleichmaessig laufen. Bei reduzierter Bewegung bleibt die alte stehende Reihe. ==================================================================== */ @media (prefers-reduced-motion:no-preference){ .laufband[data-n] .gleis{display:block;position:relative;width:auto;height:100%;animation:none;} .laufband[data-n] .zelle{position:absolute;left:0;top:0;width:230px; animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform;} } /* ==================================================================== 78 -- Legende am unteren Rand der Karte Wo eine Abbildung eine Legende hat (Net CO2-Flow Statement, Product Carbon Footprint), sitzt sie nicht mehr direkt unter der Rechnung, sondern unten rechts in der Karte. Die Spalte der Abbildung reicht dazu ueber die ganze Hoehe der Karte; die Rechnung bleibt darin mittig, auf einer Hoehe mit dem Text links -- die Legende zaehlt fuer diese Mitte nicht mit. Unter 1250 px zeigen die Karten keine Abbildung. ==================================================================== */ @media (min-width:1250px){ .abb-spalte:has(> .abb > .abb-legende){align-self:stretch;position:relative; display:flex;flex-direction:column;justify-content:center;} .abb-spalte > .abb > .abb-legende{position:absolute;left:0;right:0;bottom:0;margin-top:0;} } /* ==================================================================== Nachtrag 28.9.: der Laeufer wandert auch dort, wo die Reiter umbrechen -- am Telefon untereinander oder zu zweit, bis 1249 px in mehreren Zeilen. Bisher lag er dort nicht, das offene Feld wurde einfach weiss und sprang. Jetzt zieht sich der weisse Laeufer zum angetippten Reiter hinueber (casi-proposal.js liest --laeufer:frei). ==================================================================== */ @media (max-width:1249px){ .reiterleiste{--laeufer:frei} .reiterleiste > .laeufer{display:block;top:0;bottom:auto;left:0;border-radius:8px;transition:none;z-index:0} .reiterleiste > .reiter{position:relative;z-index:1;-webkit-tap-highlight-color:transparent} .reiterleiste > .reiter.an{background:transparent} } /* ==================================================================== Nachtrag 28.9.: das Kreuz so gross wie die drei Striche. Seine Arme waren 14 px lang, die Striche 17 -- schraeg gestellt wirkte das Kreuz deutlich kleiner als der geschlossene Knopf. Jetzt 21 px (etwa so breit wie die Striche, wenn es steht). Mittig ueber translateX(-50%) statt ueber einen festen Rand, damit es beim Laengerwerden in der Mitte bleibt. Bewegung und Zeiten bleiben. ==================================================================== */ .kopf .burger span{margin-left:0;transform:translateX(-50%)} .kopf .burger.auf span:nth-child(1){width:21px;transform:translateX(-50%) rotate(45deg)} .kopf .burger.auf span:nth-child(3){width:21px;transform:translateX(-50%) rotate(-45deg)} /* ==================================================================== Nachtrag 28.9. (Gunther): 1) Das Logoband am Telefon laeuft wieder so schnell wie am Desktop, die Marken stehen aber dichter: Zellen 150 statt 230 px, jede Marke auf 75 % -- so sind in derselben Zeit mehr Marken zu sehen (ein Umlauf 65 statt 100 s). Der Takt steht in casi-logos.php. 2) Ueber "News" stand nur 46 px Luft zum Knopf "All Publications", ueber "About CASI" 92 px zum Knopf "All News". Jetzt beide 92 px, auf allen Breiten. ==================================================================== */ @media (max-width:760px){ .laufband[data-n] .zelle{width:150px} .laufband .zelle img{scale:.75} } .casi-sect.elementor-element-h4s{padding-top:92px} /* ==================================================================== Nachtrag 1. Oktober 2026 -- Schriftstufen aus dem Text-Register Im Backend (Texte) kann ein Text eine der sechs Stufen der Seite tragen: 44, 30, 20, 17, 15, 14 -- mit Schriftart, Gewicht, Zeilenabstand und Laufweite der Stufe, am Telefon kleiner wie ueberall. Die Klasse sitzt bei Code-Texten an einer Huelle um den Text, bei Elementor am Element. Die Farbe bleibt, wie sie ist. !important, weil die Stufe bewusst gewaehlt ist und jede Regel des Ortes schlagen soll; tiefgestellte Zeichen behalten ihre Groesse. ==================================================================== */ .casi-stil-44,.casi-stil-44 :not(sub):not(sup){font-family:'Mori',system-ui,sans-serif!important;font-size:44px!important;line-height:1.08!important;letter-spacing:-.005em!important} .casi-stil-30,.casi-stil-30 :not(sub):not(sup){font-family:'Mori',system-ui,sans-serif!important;font-size:30px!important;line-height:1.18!important;letter-spacing:-.004em!important} .casi-stil-20,.casi-stil-20 :not(sub):not(sup){font-family:'Mori',system-ui,sans-serif!important;font-size:20px!important;line-height:1.3!important;letter-spacing:normal!important} .casi-stil-17,.casi-stil-17 :not(sub):not(sup){font-family:'Serife',Georgia,serif!important;font-size:17px!important;line-height:1.6!important;letter-spacing:normal!important} .casi-stil-15,.casi-stil-15 :not(sub):not(sup){font-family:'Mori',system-ui,sans-serif!important;font-size:15px!important;line-height:1.5!important;letter-spacing:normal!important} .casi-stil-14,.casi-stil-14 :not(sub):not(sup){font-family:'Mori',system-ui,sans-serif!important;font-size:14px!important;line-height:1.45!important;letter-spacing:normal!important} .casi-stil-44,.casi-stil-44 :not(strong):not(b):not(sub):not(sup), .casi-stil-30,.casi-stil-30 :not(strong):not(b):not(sub):not(sup), .casi-stil-20,.casi-stil-20 :not(strong):not(b):not(sub):not(sup){font-weight:600!important} .casi-stil-17,.casi-stil-17 :not(strong):not(b):not(sub):not(sup), .casi-stil-15,.casi-stil-15 :not(strong):not(b):not(sub):not(sup), .casi-stil-14,.casi-stil-14 :not(strong):not(b):not(sub):not(sup){font-weight:400!important} @media (max-width:900px){ .casi-stil-44,.casi-stil-44 :not(sub):not(sup){font-size:34px!important} .casi-stil-30,.casi-stil-30 :not(sub):not(sup){font-size:25px!important} } @media (max-width:760px){ .casi-stil-44,.casi-stil-44 :not(sub):not(sup){font-size:29px!important} .casi-stil-30,.casi-stil-30 :not(sub):not(sup){font-size:21px!important} .casi-stil-20,.casi-stil-20 :not(sub):not(sup){font-size:18px!important} .casi-stil-17,.casi-stil-17 :not(sub):not(sup){font-size:16px!important} .casi-stil-14,.casi-stil-14 :not(sub):not(sup){font-size:13px!important} } /* ==================================================================== 79 -- Lower Cost: eine Linie, eine Tinte Die Grafik der vierten Kachel (casi-icca-system.css) zieht alle Linien in derselben Farbe -- Zuleitung, Ledger-Abzweig und Standards wie alle anderen Abbildungen (--strich). Die Standards stehen weiss mit Strich auf dem Band, wie "Direct" in der Wertschoepfungskette (Strong Incentives). Schrift und Zeichen der vier Abschluesse in Tinte statt Burgunder. Zwei Klassen, damit es unabhaengig von der Ladereihenfolge gilt. ==================================================================== */ .isys .isys-l-ein,.isys .isys-l-led,.isys .isys-l-stamm, .isys .isys-l-st1,.isys .isys-l-st2,.isys .isys-l-st3,.isys .isys-l-st4{ border-color:var(--strich,#0E4D49);} .isys .isys-norm{background:var(--papier,#fff);color:var(--tinte,#0E4D49);} .isys .isys-st{color:var(--tinte,#0E4D49);} /* ==================================================================== 80 -- Das Kreuz aus einem Stueck Das Plus ist eine einzige gefuellte Form statt zweier Striche, und gedreht wird die Form im SVG, nicht das ganze Bild: so entsteht an der Kreuzung keine helle Kante mehr, offen wie geschlossen. ==================================================================== */ button.casi-news-tat svg .casi-plus-form{transform-box:view-box;transform-origin:12px 12px; transition:transform .34s cubic-bezier(.4,0,.2,1);} .casi-news-strich.offen button.casi-news-tat svg .casi-plus-form{transform:rotate(45deg);} .casi-news-strich.offen button.casi-news-tat svg{transform:none;} @media (hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference){ .casi-news-strich.offen button.casi-news-tat:hover svg{transform:scale(1.12);} } @media (prefers-reduced-motion:reduce){ button.casi-news-tat svg .casi-plus-form{transition:none;} } /* ==================================================================== 81 -- Die Fortsetzung kommt Zeile fuer Zeile (Vorschlag C2, 7.10.) Direkter als bisher: die Hoehe faehrt ohne Anlauf auf (240 ms auf, 200 ms zu, dieselbe Kurve wie der Wechsel der Publikationen), und die untere Kante der Oeffnung ist 28 px weich -- die Zeilen tauchen nacheinander auf, so wie sie hereinkommen, statt hart abgeschnitten. Am Ende der Bewegung loest sich die Kante auf; offen ist nichts verblasst. Das Kreuz dreht sich wie bisher (Abschnitt 80). Browser ohne @property zeigen die Kante ohne Uebergang; wer weniger Bewegung eingestellt hat, bekommt gar keine (Abschnitt 55). ==================================================================== */ @property --casi-kante{syntax:'';inherits:false;initial-value:0px;} @media (prefers-reduced-motion:no-preference){ .casi-mehr{transition:grid-template-rows .2s cubic-bezier(.2,.7,.2,1);} .casi-news-strich.offen > .casi-mehr{transition-duration:.24s;} .casi-mehr > div{ -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--casi-kante)),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - var(--casi-kante)),transparent); animation:casi-kante-zu .2s linear both;} .casi-news-strich.offen > .casi-mehr > div{animation:casi-kante-auf .24s linear both;} } @keyframes casi-kante-auf{0%,70%{--casi-kante:28px;}100%{--casi-kante:0px;}} @keyframes casi-kante-zu{0%{--casi-kante:0px;}15%,100%{--casi-kante:28px;}}