/* Theme Name: Imagestorm Child Template: imagestorm Description: Child-Theme fuer imagestorm.de. Enthaelt die Ergaenzungen aus dem Redesign. Das Eltern-Theme bleibt unberuehrt, damit Aenderungen ein Theme-Update ueberleben. Version: 1.48.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: imagestorm-child */ /* ========================================================= 1 — Scroll-Einblendungen ----------------------------------------------------- Greift nur, wenn js/reveal.js die Klasse is-reveal am gesetzt hat. Ohne JavaScript bleibt alles sichtbar, und nichts haengt unsichtbar auf einen Beobachter wartend in der Seite. Die Sichtbar-Klasse heisst bewusst is--revealed und nicht is-visible: Visual Portfolio vergibt selbst ein is-visible an seine Kacheln. Gleiche Namen haetten sich gegenseitig ausgeloest. ========================================================= */ html.is-reveal [data-reveal] { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity .85s cubic-bezier(.22, .61, .36, 1), transform .85s cubic-bezier(.22, .61, .36, 1); } /* Richtung aus data-aos. Das Eltern-Theme zeichnet die Kaesten der Projektseiten mit fade-left aus; sie kommen also von rechts herein, wie auf der alten Seite. Ohne diese Regeln fuhren sie alle gleichfoermig von unten hoch. */ html.is-reveal [data-reveal="vonrechts"] { transform: translate3d(44px, 0, 0); } html.is-reveal [data-reveal="vonlinks"] { transform: translate3d(-44px, 0, 0); } html.is-reveal [data-reveal="vonoben"] { transform: translate3d(0, -40px, 0); } html.is-reveal [data-reveal].is--revealed { opacity: 1; transform: translate3d(0, 0, 0); } /* ========================================================= 2 — Projektkacheln, Hover ----------------------------------------------------- Visual Portfolio bringt fuer den Stil "fade" eine eigene Regel mit 0,2 s mit, und die ist spezifischer als eine schlichte .vp-portfolio__item-img img. Deshalb hier eine Stufe darueber — ohne !important. Die zweite, allgemeinere Regel greift, falls der Kachelstil im Plugin spaeter gewechselt wird. ========================================================= */ .vp-portfolio__item-img { overflow: hidden; position: relative; } .vp-portfolio__item-img img, .vp-portfolio .vp-portfolio__items-style-fade .vp-portfolio__item-img img { display: block; transition: transform .7s cubic-bezier(.22, .61, .36, 1); } .vp-portfolio__item-img::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(180deg, rgba(35, 34, 41, 0) 50%, rgba(35, 34, 41, .58) 100%); opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 2; } .vp-portfolio__item:hover .vp-portfolio__item-img img, .vp-portfolio__item:focus-within .vp-portfolio__item-img img, .vp-portfolio .vp-portfolio__items-style-fade .vp-portfolio__item:hover .vp-portfolio__item-img img, .vp-portfolio .vp-portfolio__items-style-fade .vp-portfolio__item:focus-within .vp-portfolio__item-img img { transform: scale(1.045); } .vp-portfolio__item:hover .vp-portfolio__item-img::after, .vp-portfolio__item:focus-within .vp-portfolio__item-img::after { opacity: 1; } /* Tastaturfokus muss sichtbar bleiben. */ .vp-portfolio__item a:focus-visible { outline: 2px solid #FF0066; outline-offset: 3px; } /* ========================================================= 3 — Bewegung abschaltbar ----------------------------------------------------- Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt alles sofort und ohne Uebergang. Das ist kein Zusatz, sondern Pflicht. ========================================================= */ @media (prefers-reduced-motion: reduce) { html.is-reveal [data-reveal], html.is-reveal [data-reveal].is--revealed { opacity: 1; transform: none; transition: none; } .vp-portfolio__item-img img, .vp-portfolio .vp-portfolio__items-style-fade .vp-portfolio__item-img img, .vp-portfolio__item-img::after { transition: none; } .vp-portfolio__item:hover .vp-portfolio__item-img img, .vp-portfolio__item:focus-within .vp-portfolio__item-img img, .vp-portfolio .vp-portfolio__items-style-fade .vp-portfolio__item:hover .vp-portfolio__item-img img { transform: none; } } /* ========================================================= 4 — Anthrazit-Palette ----------------------------------------------------- Die Farbwerte stehen hier einmal als Variablen. Alles Weitere greift darauf zu, damit ein spaeterer Wechsel an einer Stelle passiert und nicht an vierzig. ========================================================= */ :root { --is-grund: #232229; /* Anthrazit, Grundflaeche */ --is-grund-2: #2A2832; /* abgesetzte Flaeche, Karten */ --is-flaeche: #2E2C37; /* Bildkasten, Platzhalter */ --is-linie: #3C3947; /* Trennlinien */ --is-linie-stark: #4C4859; /* Rahmen, Schalter */ --is-text: #FFFFFF; --is-text-ruhig: #AEABB6; /* Fliesstext auf dunkel, 7,0:1 */ --is-text-leise: #918D9C; /* Metazeilen, 4,9:1 */ --is-pink: #FF0066; /* Flaeche und Linie */ --is-pink-schrift: #FF4D8D; /* Schrift auf Anthrazit, 5,0:1 */ --is-hell: #F4F3F0; /* heller Grund, Zweig AGENCY */ --is-tinte: #16161A; /* Schrift auf hell */ } /* --------------------------------------------------------- Haus-Chrome: Kopf, Fuss und feste Leiste Heute reines Schwarz. Anthrazit nimmt die Haerte raus, ohne dass die Logos anders behandelt werden muessen. Die Startseite ist bewusst ausgenommen: Dort liegt der Kopf transparent ueber dem Wolkenbild. Das Eltern-Theme regelt das mit body.is-zweig-dunkel — diese Ausnahme bleibt. --------------------------------------------------------- */ body footer.footer, body .footer_fixed { background-color: var(--is-grund); } /* Der Kopf stand bis zum 03.11. in derselben Regel wie der Fuss. Seit er beim Scrollen stehenbleibt (Abschnitt 45), braucht er Deckung unter 100 % — der Fuss ausdruecklich nicht. Deshalb hier getrennt. Die erste Angabe ist der Rueckfall fuer Browser ohne color-mix; sie bleibt undurchsichtig und damit lesbar. */ body:not(.home):not(.is-zweig-hell) header.header { background-color: var(--is-grund); background-color: color-mix(in srgb, var(--is-grund) 84%, transparent); } /* --------------------------------------------------------- Flaechen, die als Inline-Style fest auf #3b3b3b stehen ----------------------------------------------------- Das ist ein Zwischenschritt. Der Wert kommt aus einem ACF-Feld der jeweiligen Seite, nicht aus dem Theme. Richtig waere, ihn dort auf die Palette umzustellen; bis dahin faengt diese Regel ihn ab. Der Selektor nennt ausdruecklich background-color — eine Suche nur nach dem Farbwert traefe auch jedes color:#3b3b3b und wuerde Ueberschriften einen Kasten verpassen. Nur deshalb das !important: gegen ein style-Attribut kommt man anders nicht an. --------------------------------------------------------- */ [style*="background-color: #3b3b3b"], [style*="background-color:#3b3b3b"], [style*="background-color: #3B3B3B"], [style*="background-color:#3B3B3B"] { background-color: var(--is-grund) !important; } /* ========================================================= 5 — Beschriftung der Projektkacheln ----------------------------------------------------- Die Daten lagen immer schon in der Seite: Titel, Kunde (als Auszug) und Disziplin (als Kategorie). Sichtbar waren sie nur beim Hover — auf dem Telefon also gar nicht. Das Plugin liefert die Reihenfolge Kategorie, Titel, Kunde. Hier wird sie gedreht: Der Kunde steht oben, weil er das staerkste Argument ist. ========================================================= */ .vp-portfolio__item-meta { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; text-align: left; } /* 1. Kunde */ .vp-portfolio__item-meta-excerpt { order: 1; font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--is-pink-schrift); } .vp-portfolio__item-meta-excerpt div { display: inline; } /* 2. Disziplin */ .vp-portfolio__item-meta-categories { order: 2; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--is-text-leise); } .vp-portfolio__item-meta-categories a { color: var(--is-text-leise); text-decoration: none; } .vp-portfolio__item-meta-categories a:hover, .vp-portfolio__item-meta-categories a:focus-visible { color: var(--is-text); } /* 3. Projektname */ .vp-portfolio__item-meta-title { order: 3; margin: 2px 0 0; font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 26px; font-weight: 500; line-height: 1.12; letter-spacing: -.005em; } .vp-portfolio__item-meta-title a { color: var(--is-text); text-decoration: none; } .vp-portfolio__item:hover .vp-portfolio__item-meta-title a { color: var(--is-pink-schrift); } /* --------------------------------------------------------- Groessen der Kachelbeschriftung ----------------------------------------------------- Die Werte aus dem Customizer stammen aus der Zeit, als die Beschriftung nur beim Darueberfahren auftauchte. Dauerhaft sichtbar kehrten 41,6 px Projektname und 28,8 px Disziplin die Rangfolge um: Die Disziplin war lauter als der Kunde, und der Kunde ist das Argument. Hier ein ruhiger Dreiklang — Kunde und Disziplin als gesperrte Vorzeile, der Projektname als Traeger. --------------------------------------------------------- */ .vp-portfolio__item-meta .vp-portfolio__item-meta-excerpt, .vp-portfolio__item-meta .vp-portfolio__item-meta-excerpt *, .vp-portfolio__item-meta .vp-portfolio__item-meta-categories, .vp-portfolio__item-meta .vp-portfolio__item-meta-categories * { font-size: 13px; line-height: 1.3; letter-spacing: .14em; } .vp-portfolio__item-meta .vp-portfolio__item-meta-title, .vp-portfolio__item-meta .vp-portfolio__item-meta-title * { font-size: 24px; line-height: 1.2; } .vp-portfolio__item-meta .vp-portfolio__item-meta-title { margin-top: 6px; } /* ========================================================= 6 — Typografie ----------------------------------------------------- Gemessen vorher: Fliesstext 17px/22,1px = Zeilenabstand 1,30. Das ist eng. Ueblich fuer laufenden Text sind 1,5 bis 1,6; alle drei Vergleichsagenturen liegen bei 1,5. Die Theme-Regel lautet .page_wrap p { line-height: 1.3em } und traegt keine Inline-Styles — sie laesst sich also sauber ueberschreiben, ohne !important. ========================================================= */ body .page_wrap p, body .page_wrap ul, body .page_wrap ol, body .page_wrap li { line-height: 1.6; } /* Zeilenlaenge begrenzen. Gemessen wurden bis zu 91 Zeichen pro Zeile; angenehm sind 60 bis 75. 62ch entspricht bei 17px rund 595px. Greift nur dort, wo die Spalte ohnehin breiter ist. */ body .page_wrap p { max-width: 62ch; } /* Grosse Schauueberschriften enger stellen. 84px auf 96,6px Zeilenabstand (1,15) laesst zweizeilige Ueberschriften auseinanderfallen. 1,04 bindet sie zusammen. */ body .page_wrap .has-xxl-font-size, body .page_wrap .has-xl-font-size { line-height: 1.04; letter-spacing: -.01em; } /* Schnitt von Light auf Semibold — aber nur dort, wo das Gewicht nicht als Inline-Style in der Seite steht. Jene Ueberschriften muessen im Editor umgestellt werden; dagegen mit !important anzugehen waere grob und wuerde kuenftige Einzelentscheidungen blockieren. */ body .page_wrap h2.has-xxl-font-size:not([style*="font-weight"]), body .page_wrap h2.has-xl-font-size:not([style*="font-weight"]) { font-weight: 500; } /* ========================================================= 7 — Navigation am Desktop sichtbar ----------------------------------------------------- Die Menuepunkte lagen auch am grossen Bildschirm hinter einem 30 x 30 grossen Icon. Ab 1100 px stehen sie jetzt in der Kopfzeile. Der Sturm bleibt unangetastet: Das Icon haengt als Hintergrundbild am .menu-toggle, und die Mechanik des Burgers bleibt, wie sie ist. Die Punkte kommen daneben. .menu-toggle und .lang liegen fest am rechten Rand (position: fixed) und sind deshalb keine Flex-Kinder der Kopfzeile. Fuer sie bleibt rechts Platz reserviert. Die .inner der Navigationstafel traegt im Eltern-Theme max-width: 450px. Genau das hatte die sieben Punkte in vier Zeilen umbrechen lassen. ========================================================= */ @media (min-width: 1100px) { body header.header .logo { order: 1; } body header.header .nav_wrap_v2 { order: 2; } body header.header .nav_wrap_v2 { position: static; transform: none; width: auto; height: auto; min-height: 0; flex: 1 1 auto; margin-left: 56px; margin-right: 190px; padding: 0; background: none; box-shadow: none; overflow: visible; visibility: visible; opacity: 1; pointer-events: auto; } body header.header .nav_wrap_v2 .inner { width: auto; max-width: none; height: auto; padding: 0; display: flex; align-items: center; } body header.header .nav_wrap_v2 ul.menu { display: flex; flex-wrap: nowrap; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; } body header.header .nav_wrap_v2 ul.menu > li { position: relative; margin: 0; padding: 0; list-style: none; white-space: nowrap; } body header.header .nav_wrap_v2 ul.menu > li > a { display: inline-block; padding: 9px 0; font-size: 16px; line-height: 1.2; font-weight: 500; letter-spacing: .11em; border-bottom: 2px solid transparent; transition: color .25s ease, border-color .25s ease; } body header.header .nav_wrap_v2 ul.menu a:hover, body header.header .nav_wrap_v2 ul.menu a:focus-visible { color: var(--is-pink-schrift); } body header.header .nav_wrap_v2 ul.menu > li.current-menu-item > a, body header.header .nav_wrap_v2 ul.menu > li.current-menu-ancestor > a, body header.header .nav_wrap_v2 ul.menu > li.current_page_item > a { border-bottom-color: var(--is-pink); } /* Untermenue ----------------------------------------------------- In der Tafel stand es offen untereinander. In der Kopfzeile klappt es auf. :focus-within haelt es fuer die Tastatur offen, ohne eine Zeile JavaScript. */ body header.header .nav_wrap_v2 ul.menu > li > ul { position: absolute; top: 100%; left: -22px; min-width: 210px; margin: 0; padding: 14px 22px 16px; list-style: none; background-color: var(--is-grund-2); border-top: 1px solid var(--is-linie); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0); transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 60; } body header.header .nav_wrap_v2 ul.menu > li:hover > ul, body header.header .nav_wrap_v2 ul.menu > li:focus-within > ul { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); } body header.header .nav_wrap_v2 ul.menu > li > ul > li { margin: 0; padding: 0; list-style: none; white-space: nowrap; } body header.header .nav_wrap_v2 ul.menu > li > ul > li > a { display: block; padding: 7px 0; font-size: 14px; letter-spacing: .08em; color: var(--is-text-ruhig); } @media (prefers-reduced-motion: reduce) { body header.header .nav_wrap_v2 ul.menu > li > a, body header.header .nav_wrap_v2 ul.menu > li > ul { transition: none; } body header.header .nav_wrap_v2 ul.menu > li:hover > ul, body header.header .nav_wrap_v2 ul.menu > li:focus-within > ul { transform: none; } } } /* ========================================================= 8 — Startseite, Entwurf B ----------------------------------------------------- Heller Grund, drei Welten, und die beiden dunklen Zweige STUDIO und FILM auf Anthrazit. Die Regel dahinter: Wo Bilder laufen, ist es dunkel. Wo gelesen wird, ist es hell. Die Startseite ist der helle Zweig AGENCY; STUDIO und FILM zeigen sich schon hier in ihrer eigenen Farbe, damit der Wechsel spaeter nicht ueberrascht. Alles haengt unter .isb. Damit kann nichts auf andere Seiten durchschlagen, auch wenn der Block einmal woandershin kopiert wird. Pink ist hier #C4054F, nicht #FF0066: Auf hellem Grund erreicht das CI-Pink nur 3,0:1 und ist fuer Schrift zu hell. #C4054F kommt auf 7,4:1 und bleibt erkennbar dieselbe Farbe. ========================================================= */ .isb { --isb-grund: #F4F3F0; --isb-karte: #ECEAE5; --isb-weiss: #FFFFFF; --isb-linie: #DEDCD6; --isb-tinte: #16161A; --isb-ruhig: #3C3A42; --isb-leise: #6B6873; --isb-pink: #C4054F; --isb-blau: #0F6E96; --isb-violett: #6B3F96; --isb-dunkel: #232229; background-color: var(--isb-grund); color: var(--isb-tinte); font-family: Barlow, sans-serif; line-height: 1.6; } .isb *, .isb *::before, .isb *::after { box-sizing: border-box; } .isb__bahn { padding-left: 40px; padding-right: 40px; } .isb__innen { max-width: 1280px; margin: 0 auto; } .isb h1, .isb h2, .isb h3, .isb h4 { font-family: "Barlow Condensed", sans-serif; margin: 0; } .isb p { margin: 0; max-width: 62ch; } .isb a { color: inherit; text-decoration: none; } .isb__dach { font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--isb-leise); margin: 0 0 20px; } .isb__titel { font-size: clamp(34px, 4.4vw, 68px); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: normal; text-wrap: balance; } .isb__weiter { display: inline-block; margin-top: 28px; font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--isb-pink); transition: color .25s ease; } .isb__weiter:hover { color: var(--isb-tinte); } /* --- 1 Auftakt ------------------------------------------ */ .isb__auftakt { padding-top: 140px; padding-bottom: 104px; } .isb__auftakt .isb__titel { max-width: 18ch; } .isb__vorspann { margin-top: 28px; font-size: 20px; color: var(--isb-ruhig); } /* --- 2 Kundenleiste -------------------------------------- */ .isb__kunden { padding-top: 40px; padding-bottom: 56px; border-top: 1px solid var(--isb-linie); } .isb__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; margin-top: 24px; } .isb__logos img { height: 30px; width: auto; /* brightness(0) macht jedes Logo flach schwarz, egal ob es im Original bunt oder weiss ist. Erst damit wirkt die Reihe als Reihe und nicht als Flickenteppich. */ filter: brightness(0); opacity: .45; transition: opacity .25s ease; } .isb__logos img:hover { opacity: .9; } /* --- 3 Arbeiten ------------------------------------------ */ .isb__arbeiten { padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--isb-linie); } .isb__kopfzeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 40px; } .isb__gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .isb__karte { display: block; } .isb__bild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background-color: var(--isb-karte); } .isb__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); } .isb__karte:hover .isb__bild img { transform: scale(1.045); } .isb__meta { padding-top: 18px; } .isb__kunde { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--isb-pink); } .isb__disziplin { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--isb-leise); } .isb__name { font-size: 28px; font-weight: 500; text-transform: uppercase; line-height: 1.15; margin-top: 6px; } .isb__karte p { margin-top: 10px; font-size: 16px; color: var(--isb-ruhig); } /* --- 4 Drei Welten --------------------------------------- */ .isb__welten { padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--isb-linie); } .isb__drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; } .isb__welt { background-color: var(--isb-weiss); border-top: 4px solid var(--farbe, var(--isb-pink)); padding: 32px 28px 36px; } .isb__welt--bewegtbild { --farbe: var(--isb-pink); } .isb__welt--interaktiv { --farbe: var(--isb-blau); } .isb__welt--marke { --farbe: var(--isb-violett); } .isb__welt h3 { font-size: 32px; font-weight: 400; text-transform: uppercase; line-height: 1.1; color: var(--farbe); } .isb__welt p { margin-top: 10px; font-size: 16px; color: var(--isb-ruhig); } .isb__liste { list-style: none; margin: 22px 0 0; padding: 0; } .isb__liste li { border-top: 1px solid var(--isb-linie); } .isb__liste a { display: block; padding: 11px 0; font-family: "Barlow Condensed", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: .04em; transition: color .2s ease, padding-left .2s ease; } .isb__liste a:hover { color: var(--farbe); padding-left: 6px; } /* --- 5 Die drei Zweige ----------------------------------- */ .isb__zweige { padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--isb-linie); } .isb__tueren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .isb__tuer { display: flex; flex-direction: column; padding: 36px 30px 34px; min-height: 300px; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .isb__tuer:hover { transform: translate3d(0, -4px, 0); } .isb__tuer h3 { font-size: 40px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; line-height: 1; } .isb__tuer .isb__dach { margin: 14px 0 0; } .isb__tuer p { margin-top: 16px; font-size: 16px; } .isb__tuer .isb__weiter { margin-top: auto; padding-top: 24px; } /* Heller Zweig: hier steht der Besucher gerade. */ .isb__tuer--hell { background-color: var(--isb-weiss); border: 1px solid var(--isb-linie); color: var(--isb-tinte); } .isb__tuer--hell p { color: var(--isb-ruhig); } /* Dunkle Zweige: Anthrazit, wie spaeter die Zweigseiten. */ .isb__tuer--dunkel { background-color: var(--isb-dunkel); color: #FFFFFF; } .isb__tuer--dunkel .isb__dach { color: #918D9C; } .isb__tuer--dunkel p { color: #AEABB6; } /* Auf Anthrazit traegt das CI-Pink wieder — dort ist es #FF4D8D, weil #FF0066 auf dunklem Grund fuer Schrift nur 4,1:1 erreicht. */ .isb__tuer--dunkel .isb__weiter { color: #FF4D8D; } .isb__tuer--dunkel .isb__weiter:hover { color: #FFFFFF; } .isb__hier { font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--isb-pink); } /* --- 6 Kontakt ------------------------------------------- */ .isb__kontakt { padding-top: 88px; padding-bottom: 112px; border-top: 1px solid var(--isb-linie); } .isb__draht { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 36px; } .isb__draht a { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 400; transition: color .25s ease; } .isb__draht a:hover { color: var(--isb-pink); } /* --- Schmale Bildschirme --------------------------------- */ @media (max-width: 980px) { .isb__gitter, .isb__drei, .isb__tueren { grid-template-columns: 1fr; } .isb__auftakt { padding-top: 104px; padding-bottom: 72px; } .isb__logos { gap: 32px; } .isb__tuer { min-height: 0; } } @media (max-width: 600px) { .isb__bahn { padding-left: 20px; padding-right: 20px; } .isb__logos img { height: 24px; } .isb__draht { gap: 28px; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .isb__bild img, .isb__tuer, .isb__liste a { transition: none; } .isb__karte:hover .isb__bild img { transform: none; } .isb__tuer:hover { transform: none; } } /* --------------------------------------------------------- 8b — Durchsetzung gegen das Eltern-Theme ----------------------------------------------------- Gemessen, nicht vermutet: Die Ueberschrift kam nur auf 36 px statt 68 und auf Gewicht 300 statt 600. Das Eltern-Theme adressiert seine Ueberschriften ueber den Seitencontainer und ist damit spezifischer als eine schlichte Klasse. Dieselben Regeln noch einmal, eine Stufe hoeher — ohne !important, damit Einzelfaelle weiterhin moeglich bleiben. Dazu zwei geerbte Werte, die hier nicht hingehoeren: .isb p deckelt die Zeilenlaenge auf 62ch, was die gesperrte Dachzeile umbrechen liess, und die 18ch am Auftakt-Titel rechneten sich bei 36 px auf 286 px. --------------------------------------------------------- */ body .isb h1.isb__titel, body .isb h2.isb__titel { font-family: "Barlow Condensed", sans-serif; font-size: clamp(34px, 4.4vw, 68px); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: normal; color: var(--isb-tinte); } body .isb__auftakt h1.isb__titel, body .isb__auftakt h2.isb__titel { max-width: 24ch; } body .isb__welt h3 { font-family: "Barlow Condensed", sans-serif; font-size: 32px; font-weight: 400; text-transform: uppercase; line-height: 1.1; } body .isb__tuer h3 { font-family: "Barlow Condensed", sans-serif; font-size: 40px; font-weight: 400; text-transform: uppercase; line-height: 1; letter-spacing: .04em; } body .isb .isb__name { font-family: "Barlow Condensed", sans-serif; font-size: 28px; font-weight: 500; text-transform: uppercase; line-height: 1.15; } body .isb p.isb__dach { max-width: none; } body .isb p.isb__vorspann { max-width: 64ch; font-size: 20px; } /* Luft unter der Schauueberschrift. Auf der alten Seite steht unter jeder grossen Ueberschrift ein Abstand von 45 px (gemessen auf /leistungen/, bei 84 px Schriftgrad — also gut ein halbes Geviert). Hier war der Abstand 0: Ueberschrift und Vorspann stiessen aneinander. In Versalien faellt das staerker auf, weil keine Unterlaenge mehr dazwischen liegt. */ body .isb .isb__titel + p, body .iss .iss__titel + p, body .isl__text h2 + p, body .ist__titel + p { margin-top: clamp(20px, 2.4vw, 36px); } body .isb .isb__karte p { max-width: none; } body .isb .isb__welt p { max-width: none; } body .isb .isb__tuer p { max-width: none; } /* Die Markierung "Sie sind hier" stand bisher ohne jeden Abstand direkt unter dem Absatz. Sie gehoert an denselben Platz wie der Verweis in den beiden dunklen Tueren: unten an der Karte. */ body .isb .isb__hier { display: block; margin-top: auto; padding-top: 24px; } /* --------------------------------------------------------- 9 — Helle Kopfzeile auf der Startseite ----------------------------------------------------- Entwurf B setzt den Kopf auf Weiss: links die Wortmarke, daneben die drei Zweige, nach einem Strich die Seiten, rechts Sprachwahl und der Knopf "Projekt anfragen". Abschnitt 4 nimmt die Startseite von der Anthrazit-Regel aus, weil der Kopf dort frueher durchsichtig ueber dem Wolkenbild lag. Hier bekommt genau diese eine Seite stattdessen ihren hellen Grund. Die Ausnahme fuer die alte Startseite bleibt unberuehrt — ein Zurueckschalten kostet nichts. Zum Logo: Das Theme liefert ein weisses SVG, das auf hellem Grund verschwinden wuerde. Das schwarze Logo aus der Mediathek liegt deshalb als Hintergrundbild unter dem ausgeblendeten Original. Der Kasten behaelt dadurch seine Masse, und die Verlinkung bleibt, wie sie war. ERLEDIGT am 03.11.2026: Die beiden Adressen unten zeigten auf die Mediathek der Testumgebung. Beim Go-Live fiel auf, dass das Suchen-und-Ersetzen nur die Datenbank erfasst — Dateien bleiben unberuehrt. Auf dem Handy fehlte dadurch die Wortmarke. Jetzt wurzelrelativ. --------------------------------------------------------- */ body.is-zweig-hell header.header { background-color: #FFFFFF; background-color: rgba(255, 255, 255, .84); border-bottom: 1px solid var(--isb-linie, #DEDCD6); } /* --- Wortmarke in Schwarz -------------------------------- */ body.is-zweig-hell header.header .logo { background-image: url("/wp-content/uploads/2026/10/is_logo_k-1024x74.png"); background-repeat: no-repeat; background-position: left center; background-size: contain; } body.is-zweig-hell header.header .logo img { visibility: hidden; } /* --- Sturm bleibt, nur in der farbigen Fassung ----------- */ body.is-zweig-hell .header .menu-toggle::after { background-image: url("/wp-content/uploads/2026/10/IS_Logo_Social_Icon_transparent-150x150.png"); } /* --- Sprachwahl auf hellem Grund ------------------------- */ body.is-zweig-hell .lang--kopf a { color: var(--isb-ruhig, #3C3A42); } body.is-zweig-hell .lang--kopf a:hover{ color: var(--isb-pink, #C4054F); } body.is-zweig-hell .lang--kopf .sep { color: #AEABA3; } body.is-zweig-hell .lang--kopf .active{ color: var(--isb-pink, #C4054F); } /* --- Navigation nach Entwurf B --------------------------- */ @media (min-width: 1100px) { body.is-zweig-hell header.header .nav_wrap_v2 ul.menu { gap: 26px; } body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li > a, body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li > span { display: inline-block; padding: 10px 0; font-family: "Barlow Condensed", sans-serif; font-size: 15px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: color .25s ease, border-color .25s ease; } /* Die drei Zweige: dunkel und kraeftig. */ body.is-zweig-hell .isb-zweig > a, body.is-zweig-hell .isb-zweig > span { color: var(--isb-tinte, #16161A); font-weight: 500; } /* Hier steht der Besucher. Der lange Vorsatz ist noetig: Die Grundregel weiter oben setzt border-bottom auf transparent und liegt bei Spezifitaet 0-5-5. Eine kurze Klassenregel (0-3-2) kommt dagegen nicht an — der Strich blieb unsichtbar. */ body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li.isb-zweig--hier > a { border-bottom-color: var(--isb-pink, #C4054F); } /* STUDIO und FILM gibt es noch nicht — deshalb kein Link, kein Zeigefinger und ein ruhigerer Ton. */ body.is-zweig-hell .isb-zweig--bald > span { color: var(--isb-leise, #6B6873); cursor: default; } /* Der Strich trennt Zweige von Seiten. */ body.is-zweig-hell .isb-trenner > span { display: inline-block; width: 1px; height: 18px; background-color: #CFCCC5; vertical-align: middle; } /* Die Seiten: leiser als die Zweige. */ body.is-zweig-hell .isb-haupt > a { color: var(--isb-ruhig, #3C3A42); font-weight: 500; } body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li > a:hover, body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li > a:focus-visible { color: var(--isb-pink, #C4054F); } /* Der Knopf. */ body.is-zweig-hell .isb-anfrage { margin-left: 10px; } body.is-zweig-hell .isb-anfrage > a { padding: 13px 22px; background-color: var(--isb-tinte, #16161A); color: #FFFFFF; font-size: 14px; font-weight: 500; border-bottom: 0; transition: background-color .25s ease; } body.is-zweig-hell .isb-anfrage > a:hover, body.is-zweig-hell .isb-anfrage > a:focus-visible { background-color: var(--isb-pink, #C4054F); color: #FFFFFF; } } /* --- Unter 1100 px: die Tafel bleibt dunkel -------------- */ @media (max-width: 1099px) { /* In der Tafel stehen die Punkte untereinander. Der Strich wird deshalb waagerecht — er trennt die drei Welten von den drei Seiten, und diese Teilung ist der Kern von Entwurf B. Bisher stand hier display: none, damit war die Gruppierung auf dem Handy nicht mehr zu sehen. */ body.is-zweig-hell .isb-trenner > span { display: block; height: 1px; margin: 16px 0; background-color: rgba(255, 255, 255, .22); } /* „Sie sind hier“: auf dem Schreibtisch ein Strich unter dem Wort, in der Tafel derselbe Strich. Nicht die Schriftfarbe — die traegt schon der Anfrage-Knopf. */ body.is-zweig-hell .isb-zweig--hier > a, body.is-zweig-hell .isb-haupt--hier > a { border-bottom: 2px solid #FF4D8D; padding-bottom: 2px; } body.is-zweig-hell .isb-zweig--bald > span { display: block; color: #918D9C; cursor: default; } body.is-zweig-hell .isb-anfrage > a { color: #FF4D8D; } } /* ========================================================= 10 — Sprachwahl und Sturm unter der Adminleiste ----------------------------------------------------- Beide haengen fest am Fenster (position: fixed), nicht am Kopf: .lang--kopf mit top 32px aus dem Customizer, der Burger mit top 30px aus dem Eltern-Theme. So bleiben sie beim Scrollen oben stehen — das ist Absicht. Die Adminleiste schiebt dagegen das gesamte Dokument um ihre Hoehe nach unten (html { margin-top }). Ein fest am Fenster haengendes Element macht diese Verschiebung nicht mit. Folge: Fuer angemeldete Benutzer stehen Sprachwahl und Sturm genau um die Leistenhoehe zu hoch, fuer alle anderen stimmt es. Deshalb haengt die Korrektur an body.admin-bar und nur daran. Besucher sehen unveraendert, was sie vorher sahen. Die Leiste ist 32 px hoch, unterhalb von 782 px Breite 46 px. Beide Faelle stehen hier. ========================================================= */ /* NACHTRAG 03.11.2026 — die Rechnung oben gilt nicht mehr. ----------------------------------------------------- Seit der Kopf fest am Fenster haengt (Abschnitt 45) und ein backdrop-filter traegt, ist ER der Bezugsrahmen fuer seine fest stehenden Kinder — nicht mehr das Fenster. Ein Element mit Filter oder Transformation uebernimmt diese Rolle. Folge: Die 64 px der Sprachwahl rechneten ploetzlich ab Kopfkante statt ab Fensterkante und landeten 32 px zu tief. Gemessen am 03.11.: Mitte bei 108 px, waehrend Menue und Anfrage-Knopf bei 77 px sitzen. Das habe ich mir mit Abschnitt 45 selbst eingehandelt. Die Korrektur fuer die Adminleiste braucht es hier deshalb nicht mehr — sie steht einmal am Kopf selbst. Sprachwahl und Sturm setzen sich stattdessen mittig auf ihn und liegen damit auf derselben Linie wie das Menue, bei Besuchern wie bei Angemeldeten. */ body .header .lang--kopf, body .header .menu-toggle { top: 50%; transform: translateY(-50%); } /* ========================================================= 11 — Zweig STUDIO, auf Anthrazit ----------------------------------------------------- Der dunkle Zweig. Grund, Flaechen und Linien kommen aus der Palette in Abschnitt 4, damit ein spaeterer Wechsel an einer Stelle passiert. Pink ist hier wieder zweigeteilt: #FF0066 als Flaeche und Linie, #FF4D8D als Schriftfarbe — auf Anthrazit erreicht das CI-Pink als Schrift nur 4,1:1. Alles haengt unter .iss, parallel zu .isb auf der hellen Startseite. Gleiche Bausteinnamen, anderer Grund. ========================================================= */ .iss { background-color: var(--is-grund); color: var(--is-text); font-family: Barlow, sans-serif; line-height: 1.6; } .iss *, .iss *::before, .iss *::after { box-sizing: border-box; } .iss__bahn { padding-left: 40px; padding-right: 40px; } .iss__innen { max-width: 1280px; margin: 0 auto; } .iss h1, .iss h2, .iss h3, .iss h4 { font-family: "Barlow Condensed", sans-serif; margin: 0; } .iss p { margin: 0; } .iss a { color: inherit; text-decoration: none; } .iss__dach { font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--is-text-leise); margin: 0 0 20px; } body .iss h1.iss__titel, body .iss h2.iss__titel { font-family: "Barlow Condensed", sans-serif; font-size: clamp(34px, 4.4vw, 68px); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: normal; color: var(--is-text); max-width: 24ch; } body .iss p.iss__vorspann { margin-top: 28px; font-size: 20px; max-width: 64ch; color: var(--is-text-ruhig); } .iss__weiter { display: inline-block; margin-top: 28px; font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--is-pink-schrift); transition: color .25s ease; } .iss__weiter:hover { color: var(--is-text); } .iss__abschnitt { padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--is-linie); } .iss__auftakt { padding-top: 140px; padding-bottom: 104px; border-top: 0; } /* --- Gewerke --------------------------------------------- */ .iss__vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 44px; } .iss__gewerk { background-color: var(--is-grund-2); border-top: 3px solid var(--is-pink); padding: 28px 24px 30px; } body .iss__gewerk h3 { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 500; text-transform: uppercase; line-height: 1.1; } .iss__gewerk p { margin-top: 10px; font-size: 16px; color: var(--is-text-ruhig); } /* --- Credits --------------------------------------------- */ .iss__credits { margin-top: 44px; border-top: 1px solid var(--is-linie); } .iss__credit { display: grid; grid-template-columns: 2fr 2fr 1.4fr .6fr; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--is-linie); } body .iss__credit h3 { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 500; text-transform: uppercase; line-height: 1.15; } .iss__credit span { font-size: 15px; letter-spacing: .04em; color: var(--is-text-ruhig); } .iss__credit .iss__jahr { font-family: "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; color: var(--is-text-leise); } /* Offene Angaben stehen in Klammern und sollen auch so aussehen — als Luecke, nicht als Inhalt. */ .iss__offen { color: var(--is-text-leise); font-style: normal; opacity: .75; } /* --- Eigene Produktion ----------------------------------- */ .iss__gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; } .iss__bild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background-color: var(--is-flaeche); } .iss__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); } .iss__karte:hover .iss__bild img { transform: scale(1.045); } .iss__meta { padding-top: 16px; } .iss__kunde { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--is-pink-schrift); } .iss__disziplin { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--is-text-leise); } body .iss .iss__name { font-family: "Barlow Condensed", sans-serif; font-size: 24px; font-weight: 500; text-transform: uppercase; line-height: 1.15; margin-top: 6px; } /* --- Drei Wege ------------------------------------------- */ .iss__drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; } .iss__weg { border-top: 1px solid var(--is-linie-stark); padding-top: 22px; } .iss__zahl { font-family: "Barlow Condensed", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--is-pink-schrift); } body .iss__weg h3 { font-family: "Barlow Condensed", sans-serif; font-size: 28px; font-weight: 500; text-transform: uppercase; line-height: 1.1; margin-top: 8px; } .iss__weg p { margin-top: 10px; font-size: 16px; color: var(--is-text-ruhig); } /* --- Technik --------------------------------------------- */ .iss__daten { margin-top: 44px; border-top: 1px solid var(--is-linie); } .iss__zeile { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--is-linie); } .iss__zeile dt { font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--is-text-leise); margin: 0; } .iss__zeile dd { margin: 0; font-size: 17px; color: var(--is-text-ruhig); } /* --- Kontakt --------------------------------------------- */ .iss__draht { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 36px; } .iss__draht a { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 400; border-bottom: 2px solid var(--is-linie-stark); padding-bottom: 2px; transition: border-color .25s ease, color .25s ease; } .iss__draht a:hover { color: var(--is-pink-schrift); border-bottom-color: var(--is-pink); } /* --- Schmale Bildschirme --------------------------------- */ @media (max-width: 980px) { .iss__vier, .iss__gitter, .iss__drei { grid-template-columns: 1fr; } .iss__credit { grid-template-columns: 1fr 1fr; row-gap: 8px; } .iss__zeile { grid-template-columns: 1fr; row-gap: 6px; } .iss__auftakt { padding-top: 104px; padding-bottom: 72px; } } @media (max-width: 600px) { .iss__bahn { padding-left: 20px; padding-right: 20px; } .iss__credit { grid-template-columns: 1fr; } .iss__draht { gap: 28px; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .iss__bild img { transition: none; } .iss__karte:hover .iss__bild img { transform: none; } } /* ========================================================= 12 — Zweig-Navigation auf dunklem Grund ----------------------------------------------------- Dieselben Bausteine wie auf der hellen Startseite, nur fuer die dunklen Zweige. Der Vorsatz body.is-zweig-dunkel sorgt dafuer, dass sich die beiden Saetze nie in die Quere kommen — unabhaengig davon, welcher im Stylesheet weiter unten steht. ========================================================= */ @media (min-width: 1100px) { body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-zweig > a, body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-zweig > span { font-weight: 500; } /* Der Zweig, in dem der Besucher steht. */ body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-zweig--hier > a { border-bottom: 2px solid var(--is-pink); } /* Zweige ohne Seite: kein Link, kein Zeigefinger. */ body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-zweig--bald > span { display: inline-block; padding: 10px 0; font-family: "Barlow Condensed", sans-serif; font-size: 15px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--is-text-leise); cursor: default; } body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-trenner > span { display: inline-block; width: 1px; height: 18px; background-color: var(--is-linie-stark); vertical-align: middle; } body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-haupt > a { color: var(--is-text-ruhig); font-weight: 500; } body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-anfrage { margin-left: 10px; } body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-anfrage > a { padding: 13px 20px; background-color: var(--is-pink); color: #FFFFFF; font-size: 14px; font-weight: 500; border-bottom: 0; transition: background-color .25s ease; } body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-anfrage > a:hover, body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-anfrage > a:focus-visible { background-color: #FFFFFF; color: var(--is-grund); } } @media (max-width: 1099px) { body.is-zweig-dunkel .isb-trenner > span { display: block; height: 1px; margin: 16px 0; background-color: var(--is-linie-stark, #4C4859); } body.is-zweig-dunkel .isb-zweig--hier > a, body.is-zweig-dunkel .isb-haupt--hier > a { border-bottom: 2px solid var(--is-pink-schrift, #FF4D8D); padding-bottom: 2px; } body.is-zweig-dunkel .isb-zweig--bald > span { display: block; color: var(--is-text-leise); cursor: default; } body.is-zweig-dunkel .isb-anfrage > a { color: var(--is-pink-schrift); } } /* ========================================================= 13 — Vollflaechig: die Folgen von .alignfull ----------------------------------------------------- Das Eltern-Theme deckelt jedes direkte Kind von .content auf eine Spaltenbreite — bei 1920 px auf 1620 px, zentriert mit 10 px Innenabstand. Darunter liegt .oh mit #DDDDDD, und genau das war der graue Rand links und rechts. Die Deckelungsregel nimmt .alignfull ausdruecklich aus. Deshalb tragen die beiden Bloecke jetzt diese Klasse, statt dass hier gegen das Theme angeschrieben wird. Das ist der Weg, den das Theme selbst vorsieht. Einen Haken hat es: .content .alignfull img setzt JEDES Bild im Block auf width: 100%. Die Kundenlogos standen damit 1280 px breit untereinander statt nebeneinander. Die Regeln unten holen sie zurueck — eine Stufe spezifischer als die Theme-Regel, damit es nicht von der Ladereihenfolge abhaengt. ========================================================= */ body .isb .isb__logos img { width: auto; height: 30px; } body .isb .isb__bild img, body .iss .iss__bild img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 600px) { body .isb .isb__logos img { height: 24px; } } /* ========================================================= 14 — Zweig FILM ----------------------------------------------------- FILM und STUDIO sind beide der dunkle Zweig und teilen sich deshalb die Bausteine aus Abschnitt 11. Die Seite traegt beide Klassen: .iss fuer Grund, Typografie und Raster, .isf fuer das, was nur FILM hat — den Faktenstreifen, die Stoffliste und die Personen. ========================================================= */ /* --- Faktenstreifen -------------------------------------- */ .isf__fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 56px; background-color: var(--is-linie); border: 1px solid var(--is-linie); } .isf__fakt { background-color: var(--is-grund); padding: 24px 22px 26px; } .isf__fakt dt { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--is-text-leise); margin: 0 0 10px; } .isf__fakt dd { margin: 0; font-size: 17px; line-height: 1.45; color: var(--is-text); } .isf__fakt dd span { display: block; font-size: 15px; color: var(--is-text-ruhig); } /* --- Stoffe in Entwicklung ------------------------------- */ .isf__stoffe { margin-top: 44px; border-top: 1px solid var(--is-linie); } .isf__stoff { display: grid; grid-template-columns: 2.4fr 1fr 1fr auto; gap: 28px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--is-linie); } body .isf__stoff h3 { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 500; text-transform: uppercase; line-height: 1.15; } .isf__stoff p { margin-top: 8px; font-size: 16px; color: var(--is-text-ruhig); } .isf__stoff .iss__offen { display: block; font-size: 15px; } /* Der Stand ist die eigentliche Auskunft fuer eine Redaktion — deshalb bekommt er eine eigene Marke. */ .isf__stand { justify-self: end; white-space: nowrap; font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--is-pink-schrift); border: 1px solid var(--is-linie-stark); padding: 6px 12px; } /* --- Realisiert ------------------------------------------ */ .isf__werke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; } .isf__werk { background-color: var(--is-grund-2); border-top: 3px solid var(--is-pink); padding: 26px 24px 28px; } .isf__wo { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--is-text-leise); } body .isf__werk h3 { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 500; text-transform: uppercase; line-height: 1.15; margin-top: 8px; } .isf__werk p { margin-top: 10px; font-size: 16px; color: var(--is-text-ruhig); } /* --- Personen -------------------------------------------- */ .isf__leute { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 44px; } .isf__person { border-top: 1px solid var(--is-linie-stark); padding-top: 22px; } body .isf__person h3 { font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 400; line-height: 1.1; } .isf__rolle { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--is-pink-schrift); margin-top: 8px; } .isf__person p { margin-top: 12px; font-size: 16px; color: var(--is-text-ruhig); } /* --- Schmale Bildschirme --------------------------------- */ @media (max-width: 980px) { .isf__fakten { grid-template-columns: repeat(2, 1fr); } .isf__werke, .isf__leute { grid-template-columns: 1fr; } .isf__stoff { grid-template-columns: 1fr 1fr; row-gap: 10px; } .isf__stand { justify-self: start; } } @media (max-width: 600px) { .isf__fakten { grid-template-columns: 1fr; } .isf__stoff { grid-template-columns: 1fr; } } /* ========================================================= 15 — Leistungen, Zweig AGENCY ----------------------------------------------------- Heller Zweig, deshalb traegt die Seite .isb fuer Grund, Typografie und Raster. .isl ergaenzt nur die drei grossen Bloecke: Bild und Text im Wechsel, darunter die Liste der Gewerke und der Weg zu den Projekten. Die Farbe des Blocks kommt aus --welt. Dieselben drei Toene wie auf der Startseite: Bewegtbild pink, Interaktiv blau, Marke und Idee violett. ========================================================= */ .isl__block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 88px; border-top: 1px solid var(--isb-linie); } /* Jeder zweite Block dreht sich: Bild nach rechts. */ .isl__block:nth-child(even) .isl__bild { order: 2; } .isl__block--bewegtbild { --welt: var(--isb-pink); } .isl__block--interaktiv { --welt: var(--isb-blau); } .isl__block--marke { --welt: var(--isb-violett); } .isl__bild { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background-color: var(--isb-karte); } body .isl__bild img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Ein schmaler Streifen in der Weltfarbe an der Bildkante — damit die Zuordnung auch ohne Text sofort lesbar ist. */ .isl__bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background-color: var(--welt); } .isl__nummer { font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--welt); font-variant-numeric: tabular-nums; } body .isl__text h2 { font-family: "Barlow Condensed", sans-serif; font-size: clamp(30px, 3.2vw, 48px); font-weight: 400; text-transform: uppercase; line-height: 1.06; letter-spacing: normal; margin-top: 12px; } body .isl__text p { margin-top: 18px; font-size: 18px; max-width: 54ch; color: var(--isb-ruhig); } /* Variante C: kein Kaestchen, sondern ein Strich in der Weltfarbe ueber jedem Gewerk — dieselbe Geste wie die Linie unter dem Bild und wie die Markierung "Sie sind hier" in der Navigation. Der Rahmen vorher sah aus wie ein Knopf und stand direkt ueber dem echten Verweis darunter. */ .isl__gewerke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 4px; } .isl__gewerke li { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 15px 12px 14px 0; border: 0; border-top: 2px solid var(--welt); background-color: transparent; color: var(--welt); } /* Die Grundregel des Eltern-Themes setzt Listen auf margin: 0 und liegt hoeher als eine Klassenregel — gemessen kam oben 0 px Abstand heraus, der Weltstrich klebte am Absatz. */ body .isl .isl__gewerke { margin-top: 38px; } /* Auf schmalen Schirmen passten vier Gewerke in drei Spalten — VFX stand allein in einer zweiten Reihe. Vier gehoeren in 2 x 2, drei in eine Reihe; dann steht nichts allein in einer zweiten Reihe. Die Auswahl „drittes Kind ist das letzte“ zaehlt die Eintraege, ohne dass es im Markup stehen muss. */ @media (max-width: 560px) { .isl__gewerke { grid-template-columns: repeat(2, 1fr); } .isl__gewerke:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } } .isl__gewerke span { font-family: "Barlow Condensed", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; line-height: 1.16; color: var(--isb-tinte, #16161A); hyphens: auto; } .isl__block .isb__weiter { color: var(--welt); } .isl__block .isb__weiter:hover { color: var(--isb-tinte); } @media (max-width: 980px) { .isl__block { grid-template-columns: 1fr; gap: 32px; padding-top: 64px; padding-bottom: 64px; } /* Im Einspalter steht das Bild immer oben. */ .isl__block:nth-child(even) .isl__bild { order: 0; } } /* ========================================================= 16 — Die aktuelle Seite im Menue ----------------------------------------------------- Zwei Ebenen, zwei Staerken: Der Zweig (AGENCY, STUDIO, FILM) traegt den pinken Strich, die Seite darin einen ruhigen grauen. Sonst konkurrieren zwei Markierungen in derselben Farbe um dieselbe Aufmerksamkeit. Der lange Vorsatz ist noetig, weil die Grundregel border-bottom auf transparent setzt und hoeher liegt als eine kurze Klassenregel. ========================================================= */ @media (min-width: 1100px) { body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li.isb-haupt--hier > a { color: var(--isb-tinte, #16161A); border-bottom-color: #CFCCC5; } body.is-zweig-dunkel header.header .nav_wrap_v2 ul.menu > li.isb-haupt--hier > a { color: var(--is-text); border-bottom-color: var(--is-linie-stark); } } /* ========================================================= 17 — Work und Team im hellen Zweig ----------------------------------------------------- Die Work-Seite uebernimmt den Visual-Portfolio-Block von /projekte/ mitsamt allen 39 Kacheln. Der Block steht neben den eigenen HTML-Bloecken, nicht darin — deshalb bekommt hier die Seitenflaeche selbst den hellen Grund und nicht nur .isb. Die Kachelbeschriftung aus Abschnitt 5 ist fuer Anthrazit gesetzt: Projektname weiss, Kunde #FF4D8D. Auf hellem Grund waere der Name unsichtbar. Hier stehen dieselben drei Zeilen in den hellen Toenen. ========================================================= */ body.is-zweig-hell .oh { background-color: var(--is-hell); } /* --- Kachelbeschriftung auf hell ------------------------- */ body.is-zweig-hell .vp-portfolio__item-meta-excerpt, body.is-zweig-hell .vp-portfolio__item-meta-excerpt * { color: #C4054F; } body.is-zweig-hell .vp-portfolio__item-meta-categories, body.is-zweig-hell .vp-portfolio__item-meta-categories * { color: #6B6873; } body.is-zweig-hell .vp-portfolio__item-meta-title, body.is-zweig-hell .vp-portfolio__item-meta-title * { color: #16161A; } /* --- Filterzeile auf hell -------------------------------- */ body.is-zweig-hell .vp-filter .vp-filter__item a { color: #3C3A42; } body.is-zweig-hell .vp-filter .vp-filter__item a:hover { color: #C4054F; } /* Der aktive Filter wird am Unterstrich erkannt (Abschnitt 22), nicht an der Farbe — sonst saehe "All" aus wie Bewegtbild. */ body.is-zweig-hell .vp-filter .vp-filter__item-active a { color: #16161A; } /* Der Tastaturfokus auf den Kacheln war fuer dunkel gesetzt. */ body.is-zweig-hell .vp-portfolio__item a:focus-visible { outline-color: #C4054F; } /* --- Team: Zweispalter ----------------------------------- */ .ist__zwei { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; padding-top: 80px; padding-bottom: 24px; border-top: 1px solid var(--isb-linie); } body .ist__titel { font-family: "Barlow Condensed", sans-serif; font-size: clamp(28px, 3vw, 44px); font-weight: 400; text-transform: uppercase; line-height: 1.06; letter-spacing: normal; } body .ist__zwei p { font-size: 18px; max-width: 62ch; color: var(--isb-ruhig); } body .ist__zwei p + p { margin-top: 18px; } /* --- Team: Bildleiste ------------------------------------ */ .ist__galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; } .ist__galerie figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background-color: var(--isb-karte); } body .ist__galerie img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); } .ist__galerie figure:hover img { transform: scale(1.045); } /* --- Team: Stellen --------------------------------------- */ .ist__stellen { margin-top: 44px; border-top: 1px solid var(--isb-linie); } .ist__stelle { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--isb-linie); } body .ist__stelle h3 { font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 400; text-transform: uppercase; line-height: 1.1; } body .ist__stelle p { margin-top: 10px; font-size: 17px; max-width: 70ch; color: var(--isb-ruhig); } body .ist__stelle p.ist__klein { margin-top: 8px; font-size: 15px; color: var(--isb-leise); } .ist__stelle .isb__weiter { margin-top: 0; white-space: nowrap; } .isb__abschnitt { padding-top: 0; } @media (max-width: 980px) { .ist__zwei { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; } .ist__galerie { grid-template-columns: repeat(2, 1fr); gap: 14px; } .ist__stelle { grid-template-columns: 1fr; gap: 18px; align-items: start; } } @media (max-width: 600px) { .ist__galerie { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { body .ist__galerie img { transition: none; } .ist__galerie figure:hover img { transform: none; } } /* ========================================================= 18 — Kundenlogos als Laufleiste ----------------------------------------------------- Kein Slider mit Sprüngen, sondern ein gleichmaessiger Lauf. Die Spur enthaelt dieselbe Reihe zweimal und wandert um genau die halbe Spurbreite — danach steht wieder der Anfang an derselben Stelle, und der Sprung zurueck ist unsichtbar. Die zweite Reihe ist aria-hidden: Fuer Vorlesewerkzeuge waere sie nur eine Wiederholung. An den Raendern blendet eine Maske aus, damit die Logos nicht hart abgeschnitten wirken. ========================================================= */ .isb__laufband { position: relative; overflow: hidden; margin-top: 28px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); } .isb__spuren { display: flex; flex-direction: column; gap: 34px; } .isb__spur { display: flex; width: max-content; animation: isb-lauf 78s linear infinite; } /* Zwei Reihen, gleiche Richtung, aber nicht im Gleichschritt: die untere laeuft langsamer und startet versetzt. Liefen beide synchron, saehe es aus wie ein einziger Block, der sich schiebt. */ .isb__spur--b { animation-duration: 96s; animation-delay: -24s; margin-left: -130px; } /* Wer hinsieht, soll lesen koennen. */ .isb__laufband:hover .isb__spur { animation-play-state: paused; } .isb__reihe { display: flex; align-items: center; gap: 64px; padding-right: 64px; } /* Rueckmeldung 28.10.: „manche Logos ragen so gross raus“. Alle Dateien sind auf 300 px Breite angelegt, die Hoehe schwankt — Porsche Design ist 300 x 14, also 21:1. Bei fester Hoehe wird daraus zwangslaeufig eine 699 px lange Zeile, waehrend Mann-Filter bei 66 px bleibt. Deshalb jetzt eine Obergrenze fuer die Breite. Was breiter waere, wird kleiner statt laenger; object-fit: contain haelt das Seitenverhaeltnis. Betrifft nur die vier breitesten, alles andere bleibt, wie es war. */ body .isb .isb__reihe img { width: auto; max-width: 230px; object-fit: contain; height: 32px; flex: 0 0 auto; filter: brightness(0); opacity: .45; transition: opacity .25s ease; } body .isb .isb__laufband:hover .isb__reihe img { opacity: .62; } body .isb .isb__reihe img:hover { opacity: 1; } @keyframes isb-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (max-width: 600px) { .isb__reihe { gap: 40px; padding-right: 40px; } /* Auch der Deckel wird kleiner: 230 px waeren auf einem 375-px-Schirm 61 % der Breite. */ body .isb .isb__reihe img { height: 26px; max-width: 170px; } } /* Ohne Bewegung: Die Leiste steht und laesst sich schieben. */ @media (prefers-reduced-motion: reduce) { .isb__spur { animation: none; } .isb__laufband { overflow-x: auto; } } /* ========================================================= 19 — Credits mit Bild (Zweig STUDIO) ----------------------------------------------------- Aus der reinen Typo-Liste werden Karten, sobald es ein Bild zur Produktion gibt. Produktionen ohne Bild stehen weiter als Zeile darunter — eine leere Bildflaeche waere schlechter als keine. ========================================================= */ .iss__filme { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; margin-top: 44px; } .iss__film { background-color: var(--is-grund-2); display: flex; flex-direction: column; } .iss__filmbild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background-color: var(--is-flaeche); } body .iss__filmbild img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); } .iss__film:hover .iss__filmbild img { transform: scale(1.04); } .iss__filmtext { padding: 24px 26px 28px; } .iss__lauf { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; background-color: var(--is-pink); padding: 5px 11px; } body .iss__film h3 { font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 400; text-transform: uppercase; line-height: 1.1; } .iss__film .iss__zeile { grid-template-columns: 130px 1fr; padding: 12px 0; gap: 16px; } .iss__film dl { margin: 18px 0 0; border-top: 1px solid var(--is-linie); } /* Die Standmarke sitzt in den Filmkarten in einer Zelle, in der Textzeile dagegen unter dem Titel. Dort ist sie kein Rasterkind, also greift justify-self nicht. */ .iss__credit .isf__stand { display: inline-block; justify-self: start; margin-top: 10px; } @media (max-width: 980px) { .iss__filme { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { body .iss__filmbild img { transition: none; } .iss__film:hover .iss__filmbild img { transform: none; } } /* ========================================================= 20 — Netzwerk-Band mit Trailer (Zweig STUDIO) ----------------------------------------------------- Steht zwischen den Arbeiten und den harten Zahlen: Wer die Arbeiten gesehen hat, fragt als naechstes, wo diese Leute sitzen. Die Antwort — Ludwigsburg, im Cluster, neben der Filmakademie — leitet direkt in Pipeline und Technik ueber. Das Video liegt links und gross, der Text rechts: Der Trailer ist das Argument, nicht die Illustration. ========================================================= */ .iss__netz { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: center; margin-top: 44px; } .iss__film16 { position: relative; aspect-ratio: 16 / 9; background-color: var(--is-flaeche); overflow: hidden; } .iss__film16 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .iss__netztext p { margin-top: 14px; font-size: 17px; color: var(--is-text-ruhig); } body .iss__netztext h3 { font-family: "Barlow Condensed", sans-serif; font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; text-transform: uppercase; line-height: 1.08; } body .iss .iss__netzlogo { display: block; height: 38px; width: auto; max-width: none; margin-bottom: 18px; /* Das Logo liegt dunkel vor; auf Anthrazit muss es hell werden, sonst verschwindet es. */ filter: brightness(0) invert(1); opacity: .8; } @media (max-width: 980px) { .iss__netz { grid-template-columns: 1fr; gap: 28px; } } /* --------------------------------------------------------- Nachbarschaft — typografisch statt mit fremden Logos ----------------------------------------------------- Die beiden Hochschulen sind Nachbarn und Nachwuchsquelle, keine Partner, die fuer Imagestorm buergen. Ihre Zeichen wuerden genau das behaupten — und beide Haeuser haben eigene Markenrichtlinien. Die Namen in der schmalen Schrift tragen dieselbe Aussage, ohne sich fremder Marken zu bedienen. --------------------------------------------------------- */ .iss__nachbarn { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--is-linie); } .iss__nachbarn ul { list-style: none; margin: 10px 0 0; padding: 0; } .iss__nachbarn li { font-family: "Barlow Condensed", sans-serif; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: .05em; color: var(--is-text); padding-left: 18px; position: relative; } .iss__nachbarn li + li { margin-top: 4px; } /* Die beiden Nachbarn standen 28,5 px eingerueckt, waehrend „In der Nachbarschaft“ und die Linie darueber an der Spaltenkante sitzen. Der Einzug kam vom Eltern-Theme (li { margin-left }), nicht aus dem Entwurf: Der Strich davor steht auf left: 0, gehoert also an dieselbe Kante. Gemessen am 03.11.: Liste 1147, Zeile darueber 1119. */ body .iss .iss__nachbarn li { margin-left: 0; } .iss__nachbarn li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background-color: var(--is-pink); } /* ========================================================= 21 — Stoffe und Personen (Zweig STOFF) ----------------------------------------------------- Aus den schmalen Zeilen werden Karten, sobald die Stoffe Substanz haben. Zwei Stoffe nebeneinander statt hinter Reitern: Eine Redaktion soll beide auf einen Blick sehen und ihren Zusammenhang erkennen — ein Reiter versteckt die Haelfte. ========================================================= */ .isf__zwei { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 44px; } .isf__karte { background-color: var(--is-grund-2); border-top: 3px solid var(--is-pink); padding: 30px 28px 32px; display: flex; flex-direction: column; } .isf__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } body .isf__karte h3 { font-family: "Barlow Condensed", sans-serif; font-size: 34px; font-weight: 400; text-transform: uppercase; line-height: 1.06; } .isf__arbeitstitel { font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--is-text-leise); display: block; margin-bottom: 6px; } body .isf__karte .isf__logline { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--is-text); } .isf__karte dl { margin: 22px 0 0; border-top: 1px solid var(--is-linie); } .isf__karte .iss__zeile { grid-template-columns: 130px 1fr; padding: 11px 0; gap: 16px; } .isf__bezug { margin-top: 28px; padding: 18px 20px; background-color: var(--is-flaeche); border-left: 3px solid var(--is-pink); font-size: 16px; color: var(--is-text-ruhig); } /* --- Personen mit Bild ----------------------------------- */ .isf__person--bild { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; } body .isf__portraet { display: block; width: 120px; max-width: none; height: 120px; object-fit: cover; border-radius: 50%; } @media (max-width: 980px) { .isf__zwei { grid-template-columns: 1fr; } .isf__person--bild { grid-template-columns: 90px 1fr; gap: 18px; } body .isf__portraet { width: 90px; height: 90px; } } /* --------------------------------------------------------- Konstellation unter den Stoffkarten ----------------------------------------------------- Zwei Absaetze: der inhaltliche Zusammenhang der beiden Stoffe, und wer was macht. Letzteres braucht es, weil die Rechte beim einen Stoff bei der JHK GmbH liegen und IMAGESTORM als Produktionsfirma begleitet — ohne den Satz liest sich die Zeile "JHK GmbH" wie ein Fremdkoerper. --------------------------------------------------------- */ .isf__bezug p { margin: 0; } .isf__bezug p + p { margin-top: 12px; } .isf__bezug strong { color: var(--is-text); font-weight: 500; } .isf__bezug a, .isf__karte dd a { color: var(--is-pink-schrift); transition: color .25s ease; } .isf__bezug a:hover, .isf__karte dd a:hover { color: var(--is-text); } /* ========================================================= 22 — Weltfarbe auf der Work-Seite ----------------------------------------------------- Dezent, nicht gerahmt: Ein Rahmen um die Kachel wuerde mit dem Bild konkurrieren. Die Disziplinzeile traegt die Farbe, der Kunde bleibt Pink, der Projektname dunkel — die Rangfolge bleibt, wie sie ist. Dazu die Filterzeile in denselben Farben, damit man den Code lesen lernt, bevor man ihn braucht. Der aktive Filter wird am Unterstrich erkannt, nicht an der Farbe. Violett fehlt vorerst: Fuer die Welt Marke & Idee gibt es noch keine Kategorie im Portfolio. Die Regel steht trotzdem schon — sobald Brand-Design-Projekte angelegt sind, greift sie von selbst. ========================================================= */ body.is-zweig-hell .is-welt-bewegtbild .vp-portfolio__item-meta-categories, body.is-zweig-hell .is-welt-bewegtbild .vp-portfolio__item-meta-categories * { color: #C4054F; } body.is-zweig-hell .is-welt-interaktiv .vp-portfolio__item-meta-categories, body.is-zweig-hell .is-welt-interaktiv .vp-portfolio__item-meta-categories * { color: #0F6E96; } body.is-zweig-hell .is-welt-marke .vp-portfolio__item-meta-categories, body.is-zweig-hell .is-welt-marke .vp-portfolio__item-meta-categories * { color: #6B3F96; } /* --- Filterzeile ----------------------------------------- */ body.is-zweig-hell .vp-filter .vp-filter__item.is-welt-bewegtbild a { color: #C4054F; } body.is-zweig-hell .vp-filter .vp-filter__item.is-welt-interaktiv a { color: #0F6E96; } body.is-zweig-hell .vp-filter .vp-filter__item.is-welt-marke a { color: #6B3F96; } body.is-zweig-hell .vp-filter .vp-filter__item a { border-bottom: 2px solid transparent; padding-bottom: 3px; transition: border-color .25s ease; } body.is-zweig-hell .vp-filter .vp-filter__item-active a { border-bottom-color: currentColor; } /* ========================================================= 23 — Stimmen (Zweig AGENCY) ----------------------------------------------------- Drei Karten vor dem Kontakt: Wer bis hierher gelesen hat, weiss was ihr macht — jetzt bestaetigt es jemand anders, dann kommt die Aufforderung. Die eckigen Klammern sind Absicht und bleiben stehen, bis echte Zitate mit Freigabe da sind. Erfundene Kundenstimmen neben echten Logos waeren das Schlimmste, was diese Seite haben koennte. ========================================================= */ .isb__stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; } .isb__stimme { background-color: var(--isb-weiss); border-top: 3px solid var(--isb-pink); padding: 30px 28px 32px; display: flex; flex-direction: column; } .isb__stimme blockquote { margin: 0; font-family: "Barlow Condensed", sans-serif; font-size: 24px; font-weight: 500; line-height: 1.28; color: var(--isb-tinte); } /* Das Anfuehrungszeichen haengt in den Rand, damit die erste Zeile buendig zum Kartenrand steht. */ .isb__stimme blockquote::before { content: "\201E"; color: var(--isb-pink); margin-right: 2px; } .isb__stimme blockquote::after { content: "\201C"; color: var(--isb-pink); } .isb__wer { margin-top: auto; padding-top: 22px; } .isb__wer .isb__name2 { font-family: "Barlow Condensed", sans-serif; font-size: 17px; font-weight: 500; letter-spacing: .04em; color: var(--isb-tinte); } .isb__wer .isb__rolle2 { font-size: 15px; color: var(--isb-leise); margin-top: 2px; } @media (max-width: 980px) { .isb__stimmen { grid-template-columns: 1fr; } } /* ========================================================= 24 — Icons an den Leistungen ----------------------------------------------------- Die sieben Icons der alten Leistungsseite sind kein Satz pro Bereich, sondern ein Vokabular: 3D, Motion, VFX, Film, XR, Innovation, Kreation — mehrfach verwendet. Coding benutzt dort das XR-Icon. Statt GIFs eine CSS-Bewegung: Die Dateien sind schlichte schwarze PNGs, zusammen 56 KB. Ein animiertes GIF je Icon waere ein Vielfaches davon, haette harte Kanten und liesse sich nicht abschalten. Hier hebt und dreht sich das Icon beim Darueberfahren leicht — und steht still, wenn reduzierte Bewegung eingestellt ist. ========================================================= */ body .isl .isl__zeichen { display: block; width: 24px; height: 24px; max-width: none; flex: 0 0 auto; color: var(--welt); transition: transform .35s cubic-bezier(.22,.61,.36,1); } .isl__gewerke li:hover .isl__zeichen { transform: translate3d(0, -2px, 0) rotate(-6deg) scale(1.08); } @media (prefers-reduced-motion: reduce) { body .isl .isl__zeichen { transition: none; } .isl__gewerke li:hover .isl__zeichen { transform: none; } } /* ========================================================= 25 — Einstiegs-Buehne ----------------------------------------------------- Fuenf Folien, eine je Leistungsbereich, mit den Texten aus eurem eigenen Slider. Bild formatfuellend, darueber ein Verlauf, damit die Schrift auf jedem Motiv traegt. 68vh statt voller Hoehe: Ein formatfuellender Einstieg drueckt alles andere aus dem ersten Blick. So bleibt der Anfang des naechsten Abschnitts sichtbar und sagt, dass es weitergeht. Gewechselt wird per Ueberblendung, nicht per Schub — ruhiger und ohne Layoutsprung. ========================================================= */ .isb__buehne { position: relative; height: 68vh; min-height: 440px; max-height: 760px; overflow: hidden; background-color: var(--isb-karte); } .isb__folie { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; } .isb__folie.is--an { opacity: 1; visibility: visible; } body .isb .isb__folie img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; display: block; } /* Der Verlauf macht die Schrift lesbar, ohne das Bild flaechig abzudunkeln. */ .isb__folie::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(100deg, rgba(22, 22, 26, .82) 0%, rgba(22, 22, 26, .55) 42%, rgba(22, 22, 26, .08) 78%); } .isb__folietext { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; /* Die Kopfzeile liegt absolut ueber der Buehne und verdeckt sonst die oberen 54 px der Ueberschrift — gemessen, nicht geschaetzt. Der Innenabstand schiebt den Satz darunter. */ padding-top: 92px; } .isb__folietext .isb__innen { width: 100%; } .isb__buehne .isb__dach { color: var(--isb-pink-hell, #FF8FB5); margin-bottom: 14px; } body .isb__buehne p.isb__folietitel { max-width: none; font-family: "Barlow Condensed", sans-serif; font-size: clamp(40px, 6vw, 92px); font-weight: 300; text-transform: uppercase; line-height: .98; letter-spacing: normal; color: #FFFFFF; } body .isb__buehne .isb__folieSatz { margin-top: 18px; max-width: 46ch; font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, .88); } .isb__buehne .isb__weiter { color: #FFFFFF; } .isb__buehne .isb__weiter:hover { color: var(--isb-pink-hell, #FF8FB5); } /* --- Bedienung ------------------------------------------- */ .isb__punkte { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; justify-content: center; gap: 10px; } .isb__punkt { width: 34px; height: 3px; padding: 0; border: 0; background-color: rgba(255, 255, 255, .38); cursor: pointer; transition: background-color .25s ease; } .isb__punkt:hover { background-color: rgba(255, 255, 255, .7); } .isb__punkt[aria-selected="true"] { background-color: #FFFFFF; } .isb__punkt:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; } .isb__pfeil { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 48px; height: 48px; border: 0; background-color: rgba(22, 22, 26, .35); color: #FFFFFF; font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .25s ease; } .isb__pfeil:hover { background-color: rgba(22, 22, 26, .7); } .isb__pfeil:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } .isb__pfeil--zurueck { left: 16px; } .isb__pfeil--vor { right: 16px; } @media (max-width: 980px) { /* Die Pfeile waren hier abgeschaltet — auf dem Handy blieb damit nur der Selbstlauf. Jetzt kleiner, aber da; dazu Wischen, siehe js/reveal.js. */ body .isb .isb__buehne { height: clamp(380px, 86vw, 560px); } body .isb .isb__pfeil { display: block; width: 38px; height: 38px; font-size: 18px; } body .isb .isb__pfeil--zurueck { left: 8px; } body .isb .isb__pfeil--vor { right: 8px; } body .isb .isb__folietext { padding-top: 80px; padding-bottom: 76px; } body .isb__buehne .isb__folieSatz { font-size: 17px; } /* Der Verlauf oben laeuft nach rechts aus — gebaut fuer eine Textspalte, die nur die linke Haelfte einnimmt. Auf schmalen Schirmen steht der Satz ueber die volle Breite, und seine rechte Haelfte liegt im hellen Bild. Hier deshalb ein Schleier von unten nach oben. */ .isb__folie::after { background-image: linear-gradient(to bottom, rgba(22, 22, 26, .86) 0%, rgba(22, 22, 26, .72) 58%, rgba(22, 22, 26, .55) 100%); } } @media (prefers-reduced-motion: reduce) { .isb__folie { transition: none; } } /* ========================================================= 26 — Sprungziele ----------------------------------------------------- Die Kopfzeile liegt absolut ueber der Seite, nicht fest am Fenster — ein Ankersprung landet also nicht darunter. Trotzdem sitzt ein Abschnitt, auf den gesprungen wird, sonst hart an der oberen Kante. Der Abstand gibt ihm Luft. scroll-behavior: smooth gilt nur, wenn der Besucher nicht ausdruecklich weniger Bewegung wuenscht. ========================================================= */ .isl__block[id], .isb__bahn[id], .iss__bahn[id], [id="arbeiten"], [id="kontakt"], [id="credits"], [id="stoffe"], [id="jobs"] { scroll-margin-top: 48px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ========================================================= 27 — Filterzeile: zwei Ebenen, erkennbar getrennt ----------------------------------------------------- Die Kacheln tragen seit dem 27.10. auch ihre Welt als Kategorie. Visual Portfolio baut die Filterzeile aus allen vorkommenden Kategorien — die drei Welten standen damit zwischen den Gewerken, in der Reihenfolge, in der sie zufaellig zuerst vorkamen. .vp-filter ist bereits flex; order stellt die Welten nach vorn, ein Strich trennt sie von den Gewerken. Faellt :has() aus, steht die Zeile wie bisher — nur in anderer Folge. ========================================================= */ .vp-filter { align-items: baseline; } .vp-filter .vp-filter__item { order: 5; } .vp-filter .vp-filter__item:has(> a[data-vp-filter="*"]) { order: 1; } .vp-filter .vp-filter__item:has(> a[data-vp-filter="bewegtbild"]) { order: 2; } .vp-filter .vp-filter__item:has(> a[data-vp-filter="interaktiv"]) { order: 3; } .vp-filter .vp-filter__item:has(> a[data-vp-filter="marke"]) { order: 4; } /* Rueckmeldung 28.10.: „doppelte Kategorien“. In einer Reihe liest sich BEWEGTBILD neben FILM, 3D und MOTION wie dasselbe in anderen Worten. Es sind zwei Ebenen — also stehen sie jetzt in zwei Reihen: oben die drei Welten, darunter kleiner und ruhiger die Gewerke. Der Umbruch ist ein Pseudo-Element mit flex-basis: 100%. */ .vp-filter::after { content: ""; order: 4; flex-basis: 100%; height: 12px; } body.is-zweig-hell .vp-filter .vp-filter__item a { font-size: 14px; } body.is-zweig-hell .vp-filter .vp-filter__item:has(> a[data-vp-filter="*"]) a, body.is-zweig-hell .vp-filter .vp-filter__item:has(> a[data-vp-filter="bewegtbild"]) a, body.is-zweig-hell .vp-filter .vp-filter__item:has(> a[data-vp-filter="interaktiv"]) a, body.is-zweig-hell .vp-filter .vp-filter__item:has(> a[data-vp-filter="marke"]) a { font-size: 19px; } /* ========================================================= 28 — Gesichter im Kontaktblock ----------------------------------------------------- Die alte Seite zeigt im Kontaktbereich zwei runde Portraets mit Namen und Rolle. Das nimmt dem Block das Behoerdliche — es ruft jemand an, und er weiss, wen er dran bekommt. Zur Bildbreite: Das Eltern-Theme setzt .content .alignfull img auf width: 100% — Spezifitaet (0,2,1). Die Regel hier liegt bei (0,3,1) und gewinnt. Ohne sie waeren die Portraets 300 px breit statt 72. ========================================================= */ .isb__menschen { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-top: 36px; } .isb__mensch { display: flex; align-items: center; gap: 14px; margin: 0; } body .isb .isb__mensch img { width: 72px; height: 72px; max-width: none; border-radius: 50%; object-fit: cover; display: block; } .isb__mensch figcaption { display: flex; flex-direction: column; } body .isb .isb__mname { font-family: "Barlow Condensed", sans-serif; font-size: 21px; font-weight: 500; line-height: 1.12; text-transform: uppercase; } body .isb .isb__mrolle { font-size: 15px; line-height: 1.3; color: var(--isb-leise, #6B6873); } /* ========================================================= 29 — Projektseiten: Rangfolge geradegezogen ----------------------------------------------------- Auf /projekte/dekra-motorradfilm/ stand der Kundenname als H1 und der eigentliche Titel als H2 — die Rangfolge war vertauscht. Der Titel ist jetzt die H1, der Kunde ein Absatz darueber. Optisch bleibt er, was er war: 36 px Barlow Condensed 500 in Versalien. Eine kleine Dachzeile, wie auf den neuen Seiten, saehe neben den 42 px grossen Gewerke-Icons daneben verloren aus — diese Zeile bekommt ihre Form erst, wenn die Icons der Gewerke-Leiste weichen. Dasselbe beim Zwischensatz: Er war als H3 ausgezeichnet, obwohl er Fliesstext ist. Er bleibt optisch die ruhige, mittige Zeile — nur eben keine Gliederungsebene mehr. ========================================================= */ /* Der Kundenname ist ein Link auf die Seite des Kunden. Als Ueberschrift erbte er Weiss; als Absatz nahm er das Linkrosa des Eltern-Themes an und leuchtete ueber dem Foto. Vorher war er weiss — das bleibt so, die Farbe kommt erst beim Darueberfahren. */ body .page_wrap p.is-kunde a { color: inherit; } body .page_wrap p.is-kunde a:hover, body .page_wrap p.is-kunde a:focus-visible { color: var(--is-pink-schrift, #FF4D8D); } body .page_wrap p.is-kunde { font-family: "Barlow Condensed", sans-serif; font-size: 36px; font-weight: 500; line-height: 1.2; text-transform: uppercase; color: inherit; max-width: none; margin: 0 0 45px; } body .page_wrap p.is-zwischensatz { font-family: "Barlow Condensed", sans-serif; font-size: 32px; font-weight: 300; line-height: 1.22; text-align: center; color: inherit; max-width: 58ch; margin: 0 auto 45px; } @media (max-width: 780px) { body .page_wrap p.is-kunde { font-size: 28px; margin-bottom: 28px; } body .page_wrap p.is-zwischensatz { font-size: 24px; } } /* ========================================================= 30 — Einstiegsblock: Ueberschrift laeuft auf dem Handy raus ----------------------------------------------------- has-xxl-font-size steht fest auf 84 px, auch bei 375 px Fensterbreite. Ein langes Wort wie GENERATIONEN passt dort nicht hinein: gemessen 69 px Ueberlauf auf /projekte/dekra-motorradfilm/ und 58 px auf /projekte/ludwigsburg-vr/ — letztere unberuehrt, der Fehler ist also alt und nicht durch den Umbau entstanden. Nur nach unten begrenzt: Ab 861 px bleibt alles, wie es war. ========================================================= */ /* WordPress setzt die Groessenklassen mit !important: .has-xxl-font-size { font-size: var(--wp--preset--font-size--xxl) !important } Eine eigene Regel dagegenzusetzen hiesse, selbst !important zu benutzen. Stattdessen wird die Variable im Einstiegsblock neu belegt — der Wert aendert sich, die Regel bleibt unberuehrt. */ @media (max-width: 860px) { .block-intro { --wp--preset--font-size--xxl: clamp(32px, 9.2vw, 64px); --wp--preset--font-size--xl: clamp(28px, 7.4vw, 52px); } body .page_wrap .block-intro .has-xxl-font-size { line-height: 1.04; } /* Die Gewerke-Icons im Einstieg standen auf dem Handy als Streifen da — gemessen 9 x 50 statt 50 x 50. Ihre Spalte war nur 26 px breit, und max-width: 100% quetscht das Bild in der Breite, waehrend die Hoehe am Inline-Stil haengen bleibt. Nicht durch den Umbau entstanden: /projekte/ludwigsburg-vr/ zeigt unberuehrt 17 x 50. Eine Mindestbreite genuegt. */ body .page_wrap .block-intro .wp-block-columns { flex-wrap: wrap; row-gap: 14px; } body .page_wrap .block-intro .wp-block-column:has(> .wp-block-image) { flex: 0 0 auto; min-width: 50px; } /* Die Figur traegt alignleft und damit 17 px Aussenabstand rechts — in einer 50 px breiten Spalte blieben dem Bild nur 33. Im Einstieg steht ohnehin nichts daneben. */ body .page_wrap .block-intro .wp-block-image figure { margin-left: 0; margin-right: 0; } } /* ========================================================= 31 — Verweis in die Welt am Fuss der Projektseiten ----------------------------------------------------- Unter jeder Projektseite steht ein wiederverwendbarer Block mit weiteren Arbeiten. Er endete bisher ohne Ausgang — wer mehr sehen wollte, musste zurueck. Jetzt steht dort ein Verweis auf den Weltfilter der Work-Seite. color: inherit, weil derselbe Block auf dunklem wie auf hellem Grund stehen kann. Der Strich nimmt dieselbe Farbe wie die Schrift — so wie die Verweise auf den neuen Seiten. ========================================================= */ body .page_wrap p.is-weltweiter { text-align: right; margin-top: 14px; max-width: none; } body .page_wrap p.is-weltweiter a { font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: inherit; text-decoration: none; transition: color .25s ease; } body .page_wrap p.is-weltweiter a:hover, body .page_wrap p.is-weltweiter a:focus-visible { color: var(--is-pink-schrift, #FF4D8D); } @media (max-width: 560px) { body .page_wrap p.is-weltweiter { text-align: left; } } /* ========================================================= 32 — Verweise wurden beim Darueberfahren weiss ----------------------------------------------------- Rueckmeldung vom 28.10., vier Punkte, eine Ursache: Im Customizer-CSS steht .page_wrap a:hover { color: #FFFFFF } Das war fuer den dunklen Auftritt gedacht und wirkt auf jeder Seite. Auf den hellen Seiten verschwindet damit jeder Verweis beim Darueberfahren. Gemessen an „Arbeiten ansehen“: rgb(255,255,255) auf fast weissem Grund. ========================================================= */ body.is-zweig-hell .page_wrap a:hover { color: var(--isb-pink, #C4054F); } /* Verweise mit eigener Hover-Farbe brauchen dieselbe Stufe. Bis zum 29.10. ging es hier auf Tinte. Wo der Verweis in Ruhe schon Tinte war — „Arbeiten ansehen“, „Alle Projekte ansehen“ — passierte beim Ueberfahren also nichts. Mit dem Unterstrich war das zu verschmerzen; ohne ihn fehlt jede Rueckmeldung. Jetzt geht es auf Pink, die Hausfarbe. */ body.is-zweig-hell .page_wrap .isb__weiter:hover, body.is-zweig-hell .page_wrap .isl__block .isb__weiter:hover { color: var(--isb-pink, #C4054F); } /* Die dunklen Tueren behalten ihr Weiss — Pink auf Pink waere keine Rueckmeldung. Eine Stufe hoeher als oben. */ body.is-zweig-hell .page_wrap .isb__tuer--dunkel .isb__weiter:hover { color: #FFFFFF; } body.is-zweig-hell .page_wrap .isb__draht a:hover { color: var(--isb-pink, #C4054F); border-bottom-color: var(--isb-pink, #C4054F); } /* Die Projektkacheln nahmen das Pink der DUNKLEN Palette (#FF4D8D) — auf hellem Grund kaum zu lesen. */ body.is-zweig-hell .vp-portfolio__item:hover .vp-portfolio__item-meta-title a, body.is-zweig-hell .page_wrap .vp-portfolio__item-meta-title a:hover { color: var(--isb-pink, #C4054F); } body.is-zweig-hell .page_wrap .vp-portfolio__item-meta-categories a:hover { color: inherit; } /* Der Anfrage-Knopf: Meine eigene Navigationsregel (0,5,2) lag ueber der Knopfregel (0,3,1). Folge: Pink auf Pink — die Schrift verschwand — und kein seitlicher Innenabstand, weil auch padding von der Navigationsregel kam. Gleiche Tiefe, gleiche Stufe. */ body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li.isb-anfrage > a { padding: 13px 22px; } body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li.isb-anfrage > a:hover, body.is-zweig-hell header.header .nav_wrap_v2 ul.menu > li.isb-anfrage > a:focus-visible { color: #FFFFFF; background-color: var(--isb-pink, #C4054F); } /* Das Eltern-Theme unterstreicht Menuepunkte beim Darueberfahren. Ueber dem pinken Strich der aktuellen Seite stand dann ein zweiter Strich. */ header.header .nav_wrap_v2 ul a:hover, header.header .nav_wrap_v2 ul a:focus-visible { text-decoration: none; } /* ========================================================= 33 — Zwei Abstaende aus der Rueckmeldung vom 28.10. ----------------------------------------------------- a) „Drei Welten, ein Haus“: Die Gewerke standen 26 px weiter eingerueckt als der Absatz darueber (54 statt 28 vom Kartenrand) — das margin-left kommt aus dem Eltern-Theme. Und sie klebten am Beschreibungstext: gemessen 0 px. b) Team: Die Klasse .isb__abschnitt war nie gestaltet — kein senkrechter Innenabstand, kein Strich. Die drei Abschnitte liefen ineinander, und die Bildreihe stiess direkt an den naechsten Block. Die Klasse kommt nur auf der Team-Seite vor; sonst ist nichts betroffen. ========================================================= */ body .isb .isb__liste { margin-top: 20px; } body .isb .isb__liste li { margin-left: 0; } body .isb .isb__abschnitt { padding-bottom: 76px; } body .isb .isb__abschnitt + .isb__abschnitt { padding-top: 76px; border-top: 1px solid var(--isb-linie, #DEDCD6); } @media (max-width: 760px) { body .isb .isb__abschnitt { padding-bottom: 52px; } body .isb .isb__abschnitt + .isb__abschnitt { padding-top: 52px; } } /* ========================================================= 34 — Einstiegs-Buehne, umgebaut nach der Rueckmeldung ----------------------------------------------------- Drei Befunde, alle nachgemessen: 1. Die Pfeile liessen sich nicht anklicken. Nicht weil sie fehlten — sie sind sichtbar und haben z-index 3 —, sondern weil .isb__folietext darueber liegt: deklariert ist z-index 2, berechnet wird 10. elementFromPoint auf der Pfeilmitte lieferte die Textebene, auf dem Punkt das Bild. Darum: Textebene ohne Mausereignisse, nur ihre Verweise nehmen wieder welche an, Bedienung weit nach oben. 2. Die Punkte waren 34 x 3 px gross — drei Pixel Trefferhoehe. Jetzt 34 x 20, sichtbar bleibt der Strich: background-clip auf den Inhaltsbereich. 3. „Verzerrt“ war ein Ausschnitt-Problem. Die Buehne stand bei 2,85:1, die Bilder liegen zwischen 1,50:1 und 2,00:1 — es wurden also 30 bis 47 Prozent der Bildhoehe weggeschnitten. Jetzt rund 2,3:1. ========================================================= */ /* Hoehe: am Bildverhaeltnis orientiert, aber an der Fensterhoehe gedeckelt — sonst fuellt der Einstieg auf einem 1080er Schirm fast alles und die Seite darunter ist nicht mehr zu ahnen. */ body .isb .isb__buehne { height: min(clamp(460px, 46vw, 820px), 78vh); max-height: none; } /* Der Titel stand auf halber Hoehe und damit mitten im Motiv. Unten links liegt er ueber dem dunkelsten Teil des Schleiers. */ /* position kam vom Eltern-Theme auf relative zurueck — damit stand die Ebene im Fluss, war nur 513 statt 820 px hoch, und flex-end hatte nichts zu verteilen. */ body .isb .isb__folietext { position: absolute; inset: 0; align-items: flex-end; padding-top: 92px; padding-bottom: 88px; pointer-events: none; } body .isb .isb__folietext a { pointer-events: auto; } body .isb .isb__pfeil, body .isb .isb__punkte { z-index: 20; } /* Schleier: von unten, wo der Text steht, plus eine weiche Waesche von links. Der alte Verlauf lief nach rechts aus und half unten gar nicht. */ body .isb .isb__folie::after { background-image: linear-gradient(to top, rgba(22, 22, 26, .92) 0%, rgba(22, 22, 26, .80) 26%, rgba(22, 22, 26, .50) 54%, rgba(22, 22, 26, .14) 78%, rgba(22, 22, 26, 0) 100%), linear-gradient(to right, rgba(22, 22, 26, .62) 0%, rgba(22, 22, 26, .28) 36%, rgba(22, 22, 26, 0) 66%); } /* Zusaetzlich ein weicher Schatten — auf hellen Motiven traegt der Schleier allein nicht. Grosser Radius, geringe Deckung: liest sich als Tiefe, nicht als Schlagschatten. */ body .isb .isb__buehne .isb__dach, body .isb .isb__buehne p.isb__folietitel, body .isb .isb__buehne .isb__folieSatz, body .isb .isb__buehne .isb__weiter { text-shadow: 0 2px 22px rgba(0, 0, 0, .55); } body .isb .isb__punkt { width: 34px; height: 20px; padding: 8px 0; background-clip: content-box; background-color: rgba(255, 255, 255, .42); } body .isb .isb__punkt:hover { background-color: rgba(255, 255, 255, .78); } body .isb .isb__punkt[aria-selected="true"] { background-color: #FFFFFF; } body .isb .isb__punkte { bottom: 22px; gap: 8px; } /* Der Fliesstext stand auf .88 Deckung — ueber hellen Daechern zu wenig. Voll weiss, dazu ein enger zweiter Schatten unter den weichen: der weiche gibt Tiefe, der enge Kontur. */ body .isb .isb__buehne .isb__folieSatz { color: #FFFFFF; text-shadow: 0 2px 22px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .72); } /* Die Pfeile sassen auf halber Hoehe und damit genau auf der Dachzeile, seit der Text unten steht. 03.11.: wieder mittig gewuenscht. Der Entwurf hatte das schon richtig geloest — top: 50% mit translateY(-24px), also der halben Pfeilhoehe. Meine 34 % haben genau diese Zentrierung ausgehebelt; sie sind wieder raus. */ body .isb .isb__pfeil { top: 50%; } /* Die Handy-Regeln fuer die Buehne stehen weiter oben im Stylesheet, also VOR Abschnitt 34 — bei gleicher Spezifitaet gewinnt die spaetere Regel, und die Buehne blieb auch auf dem Handy bei 460 px. Deshalb hier noch einmal, am Ende. */ @media (max-width: 980px) { body .isb .isb__buehne { height: clamp(380px, 84vw, 560px); } body .isb .isb__folietext { padding-top: 80px; padding-bottom: 72px; } /* Weiter nach oben als am Schreibtisch: Auf 380 px Hoehe lag der Pfeil bei 34 Prozent genau auf der Ueberschrift. */ body .isb .isb__pfeil { top: 21%; } body .isb .isb__punkte { bottom: 16px; } } /* ========================================================= 35 — Filterzeile: zweite Ebene klappt auf ----------------------------------------------------- Oben stehen nur „Alle“ und die drei Welten. Die Gewerke einer Welt erscheinen erst, wenn man sie waehlt — das Umschalten macht js/reveal.js. Die gewaehlte Welt bleibt markiert, auch wenn darunter ein Gewerk aktiv ist: dann stehen zwei Striche, und man sieht, wo man ist. ========================================================= */ .vp-filter .vp-filter__item.is-zu { display: none; } /* Ist keine Welt gewaehlt, braucht es auch keinen Umbruch. */ .vp-filter.is-ohne-gewerke::after { display: none; } body.is-zweig-hell .vp-filter .vp-filter__item.is-offen > a { border-bottom-color: currentColor; } /* ========================================================= 36 — Studio: Karten und Striche (Rueckmeldung 28.10.) ----------------------------------------------------- Die vier Bereiche standen als Flaechen in nur wenig hellerem Grau nebeneinander. Bei 28 px Abstand verschwammen besonders Character Animation und 3D ineinander. Jetzt hat jede Karte eine eigene Kante. In den Credit-Karten trug jede Angabe einen eigenen Strich — vier Zeilen, vier Striche. Die Stichpunkte tragen sich selbst. ========================================================= */ body .iss .iss__vier { gap: 24px; } body .iss .iss__gewerk { border-right: 1px solid var(--is-linie, #3C3947); border-bottom: 1px solid var(--is-linie, #3C3947); border-left: 1px solid var(--is-linie, #3C3947); } /* Der Fliesstext, der die drei Wege jetzt in einem Absatz erzaehlt, stand ohne Abstand direkt unter dem Vorspann — gemessen 0 px. Beides las sich als ein Block. */ body .iss p.iss__fliess { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--is-text-ruhig, #AEABB6); } body .iss p.iss__fliess strong { font-weight: 500; color: var(--is-text, #FFFFFF); } body .iss .iss__zeile { border-bottom: 0; padding: 9px 0; } /* ========================================================= 37 — Kundenlogos mit Zieladresse ----------------------------------------------------- Seit die Leiste aus einem Block kommt, kann je Logo eine Adresse hinterlegt werden. Steht sie, wird das Logo in einen Verweis gefasst. Der Verweis ist ein Flex-Element, damit er nicht hoeher wird als das Bild. Beim Darueberfahren wird das Logo kraeftiger — sonst waere nicht zu erkennen, dass ueberhaupt einer dahinter liegt. Die Farbe bleibt weg: ein einzelnes buntes Logo in einer grauen Reihe waere unruhig. ========================================================= */ body .isb .isb__reihe a.isb__kunde2 { display: flex; align-items: center; flex: 0 0 auto; } body .isb .isb__reihe a.isb__kunde2 img { transition: opacity .25s ease; } body .isb .isb__reihe a.isb__kunde2:hover img, body .isb .isb__reihe a.isb__kunde2:focus-visible img { opacity: .85; } body .isb .isb__reihe a.isb__kunde2:focus-visible { outline: 2px solid var(--isb-pink, #C4054F); outline-offset: 6px; } /* ========================================================= 38 — Anklickbare Gewerke und anschreibbare Menschen ----------------------------------------------------- Zwei Rueckmeldungen vom 28.10. in einem Abschnitt. a) Web, App und VR fuehren jetzt in den gefilterten Work-Bestand. Social Media bleibt Text, weil es dort noch keine Kategorie gibt — ein Verweis liefe ins Leere. b) Die beiden Portraets im Kontakt werden groesser und anklickbar. Ein Bild allein sieht nicht anklickbar aus, deshalb steht unter der Rolle eine dritte Zeile, die sagt, was beim Klick passiert. Die Regel des Eltern-Themes faerbt Verweise im Inhalt beim Ueberfahren weiss. Auf hellem Grund waere der Name dann verschwunden — deshalb stehen die Farben hier ausdruecklich. ========================================================= */ /* --- a) Gewerke als Verweis ------------------------------ */ body .isl .isl__gewerke .isl__gewerk { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; width: 100%; text-decoration: none; color: inherit; } body .isl .isl__gewerke .isl__gewerk:hover span, body .isl .isl__gewerke .isl__gewerk:focus-visible span { color: var(--welt); } body .isl .isl__gewerke .isl__gewerk:focus-visible { outline: 2px solid var(--welt); outline-offset: 4px; } /* --- b) Menschen im Kontakt ------------------------------ */ .isb__menschen { gap: 22px 52px; } body .isb a.isb__mensch { display: flex; align-items: center; gap: 18px; margin: 0; text-decoration: none; color: inherit; } body .isb a.isb__mensch img { width: 104px; height: 104px; max-width: none; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 0 var(--isb-pink, #C4054F); transition: box-shadow .25s ease; } body .isb a.isb__mensch:hover img, body .isb a.isb__mensch:focus-visible img { box-shadow: 0 0 0 3px var(--isb-pink, #C4054F); } body .isb .isb__mtext { display: flex; flex-direction: column; } body .isb a.isb__mensch .isb__mname { color: var(--isb-tinte, #16161A); transition: color .25s ease; } body .isb a.isb__mensch:hover .isb__mname, body .isb a.isb__mensch:focus-visible .isb__mname { color: var(--isb-pink, #C4054F); } body .isb .isb__mmail { font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: var(--isb-pink, #C4054F); margin-top: 7px; } body .isb a.isb__mensch:focus-visible { outline: 2px solid var(--isb-pink, #C4054F); outline-offset: 6px; } @media (max-width: 600px) { body .isb a.isb__mensch img { width: 84px; height: 84px; } .isb__menschen { gap: 20px 32px; } } @media (prefers-reduced-motion: reduce) { body .isb a.isb__mensch img, body .isb a.isb__mensch .isb__mname { transition: none; } } /* ========================================================= 39 — Rueckweg am Fuss der Projektseiten ----------------------------------------------------- Die meisten Projektseiten tragen den Weltverweis schon in ihrem „Weitere …-Projekte“-Block. Wo es den Block nicht gibt, haengt functions.php einen an — in genau derselben Gestalt, damit es ueberall gleich aussieht. Der Abstand nach oben war gemessen 14 px; der Verweis klebte am Bild darueber. ========================================================= */ body .page_wrap .is-weltfuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 40px; margin-top: 56px; } body .page_wrap .is-weltfuss p.is-weltweiter { margin-top: 0; } @media (max-width: 782px) { body .page_wrap .is-weltfuss { justify-content: flex-start; } } /* ========================================================= 40 — Die Tafel hinter dem Sturm ----------------------------------------------------- Entwurf A vom 28.10.: eine dunkle Flaeche ueber der Seite, und darauf steht alles. Keine zweite Stufe — wer die Karte oeffnet, will sehen, was es gibt. Die Welten tragen dieselben Farben wie auf den Leistungs- und Work-Seiten, nur in den hellen Fassungen fuer den anthrazitfarbenen Grund. ========================================================= */ .ist { position: fixed; inset: 0; z-index: 9999; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .ist[hidden] { display: none; } /* Im Backend sitzt oben die Admin-Leiste. */ body.admin-bar .ist { top: 32px; } @media (max-width: 782px) { body.admin-bar .ist { top: 46px; } } .ist__grund { position: fixed; inset: 0; background: rgba(12, 12, 15, .76); } /* Die Tafel ist so hoch, wie ihr Inhalt es verlangt; darunter bleibt die abgedunkelte Seite sichtbar. Eine Tafel ueber die volle Hoehe stand bei sechs kurzen Spalten zur Haelfte leer. */ .ist__tafel { position: relative; background: var(--is-grund, #232229); color: var(--is-text, #FFFFFF); padding: 26px 36px 44px; } .ist__tafel:focus { outline: none; } .ist__tafel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #FF4D8D, #6BBCE0 55%, #B894E0); } /* --- Kopf der Tafel -------------------------------------- */ .ist__kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1400px; margin: 0 auto 26px; padding-bottom: 20px; border-bottom: 1px solid var(--is-linie, #3C3947); } body .page_wrap .ist__wort, .ist__wort { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 500; color: var(--is-text-leise, #918D9C); margin: 0; } .ist__zu { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: transparent; border: 1px solid var(--is-linie-stark, #4C4859); color: var(--is-text-ruhig, #AEABB6); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; transition: color .2s ease, border-color .2s ease; } .ist__zu:hover, .ist__zu:focus-visible { color: var(--is-text, #FFF); border-color: var(--is-pink-schrift, #FF4D8D); } /* --- Spalten --------------------------------------------- */ /* Work steht als letzte Spalte und bekommt mehr Breite: Die Gewerke-Plaettchen brauchen sie, die anderen fuenf Spalten tragen nur kurze Zeilen. Am breiten Schirm passt damit alles in eine Reihe. */ .ist__spalten { display: grid; grid-template-columns: 1fr; gap: 30px 34px; max-width: 1400px; margin: 0 auto; } @media (min-width: 620px) { .ist__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ist__gruppe--work { grid-column: span 3; } } @media (min-width: 1040px) { .ist__spalten { grid-template-columns: repeat(5, minmax(0, 1fr)) 1.75fr; } .ist__gruppe--work { grid-column: auto; } } body .page_wrap .ist__kopfzeile, .ist__kopfzeile { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-weight: 500; font-size: 23px; line-height: 1.1; letter-spacing: .02em; margin: 0 0 4px; max-width: none; } body .page_wrap .ist__kopfzeile a, .ist__kopfzeile a { color: var(--is-text, #FFFFFF); } .ist__zahl { font-family: "Barlow", sans-serif; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--is-text-leise, #918D9C); } body .page_wrap .ist__zweck, .ist__zweck { font-size: 13px; line-height: 1.4; color: var(--is-text-leise, #918D9C); margin: 0 0 13px; max-width: none; } body .page_wrap .ist ul, .ist ul { list-style: none; margin: 0; padding: 0; } .ist li { margin-bottom: 7px; } body .page_wrap .ist a, .ist a { color: var(--is-text-ruhig, #AEABB6); text-decoration: none; font-size: 15px; border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease; } body .page_wrap .ist a:hover, body .page_wrap .ist a:focus-visible, .ist a:hover, .ist a:focus-visible { color: var(--is-pink-schrift, #FF4D8D); border-bottom-color: currentColor; } /* --- Work: die zweite Ebene ------------------------------ */ body .page_wrap .ist__welt, .ist__welt { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 500; margin: 15px 0 7px; padding-left: 9px; border-left: 2px solid currentColor; max-width: none; } .ist__welt--bewegtbild { color: #FF4D8D; } .ist__welt--interaktiv { color: #6BBCE0; } .ist__welt--marke { color: #B894E0; } body .page_wrap .ist__welt a, .ist__welt a { color: inherit; font-family: inherit; font-size: inherit; letter-spacing: inherit; } .ist__gewerke { display: flex; flex-wrap: wrap; gap: 7px; } body .page_wrap .ist__gewerke a, .ist__gewerke a { border: 1px solid var(--is-linie, #3C3947); border-bottom-color: var(--is-linie, #3C3947); padding: 3px 10px 4px; font-size: 13px; } body .page_wrap .ist__gewerke a:hover, .ist__gewerke a:hover { border-color: currentColor; } /* --- Fuss ------------------------------------------------ */ .ist__fuss { max-width: 1400px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--is-linie, #3C3947); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; } .ist__sprache { margin-left: auto; letter-spacing: .1em; font-size: 14px; color: var(--is-text-leise, #918D9C); display: flex; gap: 10px; } .ist__sprache b { color: var(--is-pink-schrift, #FF4D8D); font-weight: 500; } body .page_wrap .ist__anfrage, .ist__anfrage { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; font-weight: 500; color: var(--is-text, #FFFFFF); background-color: var(--is-pink, #FF0066); padding: 9px 18px 10px; border-bottom: 0; } body .page_wrap .ist__anfrage:hover, body .page_wrap .ist__anfrage:focus-visible, .ist__anfrage:hover, .ist__anfrage:focus-visible { color: var(--is-text, #FFFFFF); background-color: #D90057; border-bottom: 0; } @media (max-width: 600px) { .ist__tafel { padding: 22px 20px 36px; } .ist__sprache { margin-left: 0; } } /* ========================================================= 41 — Die Ueberschrift der „Weitere …“-Bloecke fuehrt selbst in den gefilterten Work-Bestand ----------------------------------------------------- Rueckmeldung 29.10.: lieber auf die Ueberschrift klicken als auf einen zweiten Verweis darunter. Der Verweis ist entfallen, die H2 traegt ihn jetzt. Die Ueberschrift ist im Block als schwarz ausgezeichnet. Der Verweis erbt diese Farbe, damit sich am Aussehen nichts aendert; erst beim Ueberfahren zeigt er sich. Die Regel des Eltern-Themes faerbt Verweise im Inhalt weiss — deshalb steht die Farbe hier ausdruecklich. ========================================================= */ /* Kein Unterstrich beim Ueberfahren — Rueckmeldung vom 29.10. Die Farbe allein sagt deutlich genug, dass hier etwas anklickbar ist, und eine Unterlaenge unter einer 42 px grossen Versalzeile sieht schwer aus. Die Ueberschrift war im 3D-Block als einzige von zehn schwarz ausgezeichnet — auf dem Grund #3B3B3B praktisch unlesbar. Das ist jetzt im Block selbst behoben, nicht hier: alle zehn sind weiss. */ body .page_wrap h2 > a { color: inherit; text-decoration: none; transition: color .25s ease; } body .page_wrap h2 > a:hover, body .page_wrap h2 > a:focus-visible { color: var(--is-pink-schrift, #FF4D8D); text-decoration: none; } body .page_wrap h2 > a:focus-visible { outline: none; } /* ========================================================= 42 — Kein Unterstrich mehr, dafür bewegt sich der Pfeil ----------------------------------------------------- Rückmeldung 29.10.: „den Unterstrich generell weglassen, den Pfeil darf stehen bleiben — und bei Rollover eine Aktion à la CI.“ Die Unterstriche sind in Abschnitt 11, 13, 20 und 31 entfernt. Als Aktion bleibt die Farbe — Pink ist die Hausfarbe — und der Pfeil macht einen Schritt in seine eigene Richtung. Die Klasse heisst isb__spitze, nicht isb__pfeil: Die Pfeiltasten der Einstiegsbuehne tragen diesen Namen bereits, samt Groesse und Position. Gleiche Namen haetten sich gegenseitig verstellt. Der Pfeil steht als Zeichen im Text, nicht als eigenes Element; CSS kann ihn so nicht fassen. Deshalb schneidet js/reveal.js ihn ab und legt ihn in ein span. Ohne JavaScript bleibt die Farbe als Aktion — die Seite funktioniert vollständig. ========================================================= */ .isb__spitze { display: inline-block; transition: transform .25s cubic-bezier(.22, .61, .36, 1); will-change: transform; } a:hover > .isb__spitze--rechts, a:focus-visible > .isb__spitze--rechts { transform: translate3d(5px, 0, 0); } a:hover > .isb__spitze--runter, a:focus-visible > .isb__spitze--runter { transform: translate3d(0, 4px, 0); } @media (prefers-reduced-motion: reduce) { .isb__spitze { transition: none; } a:hover > .isb__spitze--rechts, a:hover > .isb__spitze--runter { transform: none; } } /* ========================================================= 43 — Eine Leiste hinter Sprachwahl und Sturm ----------------------------------------------------- Rueckmeldung 29.10., am Handy gefunden: Die Kopfzeile scrollt weg (position: absolute), aber Sprachwahl und Sturm bleiben stehen (position: fixed) — mit durchsichtigem Hintergrund. Sie lagen damit auf allem, was darunter durchlief: auf „DREI WELTEN, EIN HAUS“, auf „FÜR PRODUKTIONEN.“, auf dem ersten Zitat. Unlesbar wurden beide — die Schalter und der Text darunter. Jetzt blendet eine schmale Leiste dahinter auf, sobald gescrollt wird. Oben, wo die Kopfzeile noch steht, bleibt sie weg. Kein neues Markup: Die Leiste ist ein ::before an der Sprachwahl. Weil die selbst fixiert ist und z-index 1500 traegt, liegt die Leiste mit z-index -1 hinter ihrer Schrift, aber ueber dem Seiteninhalt. Der Sturm steht ohnehin hoeher. Unterkante der Schalter: gemessen 60 px, am Schirm wie am Handy. Daher 74 px Leiste — 14 px Luft. Die Adminleiste kommt nur im Backend dazu. ========================================================= */ .lang--kopf::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 74px; background-color: rgba(22, 22, 26, .80); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border-bottom: 1px solid rgba(255, 255, 255, .10); opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: -1; } html.is-abgesetzt .lang--kopf::before { opacity: 1; } /* Auf hellem Grund traegt die Sprachwahl dunkle Schrift — eine dunkle Leiste dahinter waere schlimmer als gar keine. */ body.is-zweig-hell .lang--kopf::before { background-color: rgba(244, 243, 240, .88); border-bottom-color: rgba(22, 22, 26, .10); } body.admin-bar .lang--kopf::before { height: 106px; } @media (max-width: 782px) { body.admin-bar .lang--kopf::before { height: 120px; } } @media (prefers-reduced-motion: reduce) { .lang--kopf::before { transition: none; } } /* ========================================================= 44 — Die dunklen Türen: Überschrift lesbar ----------------------------------------------------- Rückmeldung 30.10.: „Studio und Stoff kann man nicht lesen.“ Gemessen: rgb(22,22,26) auf rgb(35,34,41) — ein Kontrast von etwa 1,1 : 1. Praktisch unsichtbar. Die Karte setzt zwar color: #FFFFFF, aber sie ist selbst ein , und die Verweisfarbe des Eltern-Themes liegt höher. Deshalb hier ausdrücklich und eine Stufe darüber. Anklickbar war die ganze Karte schon vorher; neu ist, dass man es beim Überfahren sieht. ========================================================= */ body .page_wrap a.isb__tuer--dunkel, body.is-zweig-hell .page_wrap a.isb__tuer--dunkel { color: #FFFFFF; } body .page_wrap a.isb__tuer--dunkel h3, body.is-zweig-hell .page_wrap a.isb__tuer--dunkel h3 { color: #FFFFFF; transition: color .25s ease; } body .page_wrap a.isb__tuer--dunkel:hover h3, body .page_wrap a.isb__tuer--dunkel:focus-visible h3, body.is-zweig-hell .page_wrap a.isb__tuer--dunkel:hover h3, body.is-zweig-hell .page_wrap a.isb__tuer--dunkel:focus-visible h3 { color: var(--is-pink-schrift, #FF4D8D); } @media (prefers-reduced-motion: reduce) { body .page_wrap a.isb__tuer--dunkel h3 { transition: none; } } /* ========================================================= 45 — Die Kopfzeile bleibt stehen ----------------------------------------------------- Gewuenscht am 03.11.: Agency, Studio, Stoff und Leistungen sollen beim Scrollen oben stehenbleiben, leicht durchscheinend. Gemessen vorher: Der Kopf liegt mit position: absolute bei 32 px — und die Buehne beginnt bei denselben 32 px. Er liegt also schon heute UEBER dem Inhalt, nicht davor. Deshalb verschiebt das Festhalten nichts; es nimmt ihn nur aus einem Fluss, in dem er ohnehin nichts hielt. ========================================================= */ body .header { position: fixed; top: 0; left: 0; right: 0; /* Radius bewusst klein. Zwei bildschirmbreite Unschaerfeflaechen — Kopf und Fussleiste — werden bei jedem Scrollbild neu berechnet; am 03.11. blieb der Darsteller damit stehen. Weniger Radius, kein saturate: derselbe Eindruck, ein Bruchteil der Last. */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Die Deckung steht NICHT hier, sondern dort, wo die Farbe des Kopfes ohnehin gesetzt wird — bei den Zweigen weiter oben. Ein zweiter Satz Regeln an dieser Stelle verlor das Rennen um die Spezifitaet (gemessen: body.is-zweig-hell header.header schlaegt body.is-zweig-hell .header) und haette ausserdem zwei Wahrheiten fuer dieselbe Flaeche hinterlassen. */ /* Die Adminleiste schiebt das Dokument nach unten, ein fest am Fenster haengender Kopf macht das nicht mit. Dieselbe Rechnung wie in Abschnitt 10, und nur fuer Angemeldete. */ body.admin-bar .header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .header { top: 46px; } } /* Die schmale Leiste aus Abschnitt 43 hat sich damit erledigt. Sie blendete beim Scrollen hinter Sprachwahl und Sturm auf, weil der Kopf wegfuhr. Jetzt bleibt er — zwei Leisten uebereinander waeren eine zu viel. */ .lang--kopf::before { display: none; } /* ========================================================= 46 — Die drei Welten: Gewerke in eine Zeile ----------------------------------------------------- Vorher stand jedes Gewerk als eigene Zeile mit Trennlinie darueber: vier Zeilen zu 51 px, zusammen 233 px je Kasten. Gewuenscht am 03.11.: alles in eine Reihe, mit Abstand getrennt — dann wird der weisse Kasten von selbst flacher. Dazu wird die Welt-Ueberschrift anklickbar und fuehrt auf die Leistungsseite. ========================================================= */ /* 03.11.: „Marke & Idee“ brach als einzige Welt auf zwei Zeilen um — gemessen 100 px Listenhoehe gegen 57 px bei den anderen. Vier Begriffe brauchen 307 px plus Abstaende, verfuegbar waren 357 px. Mit 20 px Innenabstand und 16 px Spalte sind es 365 gegen 355 — es passt, ohne die Schrift zu verkleinern. Unterhalb der Entwurfsbreite bricht es weiter um, und das ist richtig so. */ body .isb .isb__welt { display: flex; flex-direction: column; padding: 26px 20px 30px; transition: transform .3s cubic-bezier(.22, .61, .36, 1); } body .isb .isb__liste { display: flex; flex-wrap: wrap; gap: 2px 16px; /* Der Abstand unten kam vom Eltern-Theme (ul, 30 px) und stand als Leerraum im Kasten. Gemessen am 03.11.: Kartenhoehe 303 px bei 243 px Inhalt. */ margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--isb-linie); } /* Die Gewerke sind seit dem 03.11. keine eigenen Verweise mehr — die ganze Karte fuehrt auf die Leistungsseite. Die Schriftangaben standen vorher am Verweis und wandern deshalb hierher. */ body .isb .isb__liste li { border-top: 0; margin-left: 0; padding: 3px 0; font-family: "Barlow Condensed", sans-serif; font-size: 17px; font-weight: 500; letter-spacing: .04em; } /* Die Karte verhaelt sich jetzt wie die Tueren unter „Drei Zweige“: ganze Flaeche als Verweis, Pfeil am Fuss, beim Ueberfahren vier Pixel nach oben. Derselbe Weg, dieselbe Geste, derselbe Wert — abgeschrieben von .isb__tuer. */ body .isb .isb__welt .isb__weiter { margin-top: auto; padding-top: 22px; color: var(--farbe); } body .isb a.isb__welt:hover { transform: translate3d(0, -4px, 0); } /* Das Eltern-Theme faerbt jeden Verweis beim Ueberfahren weiss (.page_wrap a:hover). Auf einer weissen Karte hiesse das: Text weg. Deshalb behaelt die Karte ihre Farben, in Ruhe wie beim Ueberfahren. */ body .page_wrap a.isb__welt, body .page_wrap a.isb__welt:hover { color: var(--isb-tinte); text-decoration: none; } body .page_wrap a.isb__welt h3, body .page_wrap a.isb__welt:hover h3 { color: var(--farbe); } body .page_wrap a.isb__welt p, body .page_wrap a.isb__welt:hover p { color: var(--isb-ruhig); } body .page_wrap a.isb__welt:hover .isb__weiter { color: var(--farbe); } /* --- Kontakt: dieselbe Linie wie auf Studio -------------- */ /* Auf Studio tragen die Kontaktzeilen eine 2-px-Linie, die beim Ueberfahren pink wird (.iss__draht a). Auf der Startseite fehlte sie — dort wechselte nur die Farbe. Gleiche Stelle, gleiche Geste. */ body .isb .isb__draht a { border-bottom: 2px solid var(--isb-linie); padding-bottom: 2px; transition: color .25s ease, border-color .25s ease; } body .isb .isb__draht a:hover { border-bottom-color: var(--isb-pink); } /* ========================================================= 47 — Der Buehnentext auf die Satzkante ----------------------------------------------------- Gemeldet am 03.11.: „Bewegtbild“ und der Satz darunter sollen buendig stehen mit „Wir machen Menschen, Marken und Produkte sichtbar“. Ursache: .isb__folietext ist ein Flex-Container. Die Bahn darin ist ein Flex-Element und schrumpft auf Inhaltsbreite — gemessen 574 px —, statt die zentrierte 1280er-Spalte zu bilden. Der Text stand dadurch bei 40 px, waehrend alles darunter bei 313 px beginnt. Mit voller Breite greift .isb__innen wieder. Nachgemessen: 313 px, exakt auf der Kante. ========================================================= */ body .isb .isb__folietext .isb__bahn { width: 100%; } /* ========================================================= 48 — Glas hinter dem Buehnentext ----------------------------------------------------- Gewuenscht am 03.11.: die Optik, die iOS „Liquid Glass“ nennt — eine durchscheinende Scheibe, die den Grund verwischt und an den Kanten Licht faengt. Die Schwierigkeit lag nicht im Glas, sondern in der Breite. .isb__innen haelt die Satzkante bei 313 px, aber nur, weil es als 1280er Spalte mittig steht. Ein Glaskasten ueber die vollen 1280 px waere kein Kasten mehr, sondern ein Balken. Deshalb wandert das Zentrieren in die Bahn: Ihr Innenabstand rechnet dieselbe Kante aus. .isb__innen darf damit auf Inhaltsbreite schrumpfen und bleibt trotzdem exakt bei 313 px stehen. Drei Schichten machen das Glas: ein schraeger heller Verlauf als Koerper, die Unschaerfe dahinter, und zwei innere Lichtkanten oben und unten. Der Schatten setzt die Scheibe vom Bild ab. ========================================================= */ @media (min-width: 981px) { body .isb .isb__folietext .isb__bahn { padding-left: max(40px, calc((100% - 1280px) / 2)); padding-right: max(40px, calc((100% - 1280px) / 2)); } } body .isb .isb__folietext .isb__innen { width: max-content; /* 700 statt 560: „Ideenentwicklung“ ist bei 92 px Schrift 627 px breit und ein einziges Wort — es kann nicht umbrechen und stand mit „ng“ auf dem Foto (gemessen 129 px Ueberstand). Damit die anderen fuenf Folien trotzdem schmal bleiben, ist der Satz darunter gedeckelt; er treibt die Breite sonst bis zum Anschlag. */ max-width: min(100%, 700px); margin: 0; padding: 26px 30px 30px; /* 03.11.: rechteckig gewuenscht. Ohne Rundung wirkt die Scheibe wie geschnittenes Glas statt wie ein Knopf. */ border-radius: 0; border: 1px solid rgba(255, 255, 255, .20); /* Ein dunkler Grundton unter dem hellen Verlauf. Ohne ihn wird die Scheibe ueber hellem Himmel heller als die weisse Schrift darauf — die Buehne wechselt durch Motive von Nachtaufnahme bis Mittagssonne. */ background-color: rgba(20, 20, 24, .30); background-image: linear-gradient( 150deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 58%, rgba(255, 255, 255, .11) 100%); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 1px rgba(255, 255, 255, .12), 0 20px 46px rgba(0, 0, 0, .30); } /* Auf der Scheibe trug der schwere Schatten aus Abschnitt 34 nur noch Schmutz auf — das Glas setzt den Text schon ab. Ein enger Rest bleibt fuer helle Motive. */ body .isb .isb__buehne .isb__dach, body .isb .isb__buehne p.isb__folietitel, body .isb .isb__buehne .isb__folieSatz, body .isb .isb__buehne .isb__weiter { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } body .isb .isb__buehne .isb__folieSatz { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); max-width: 500px; } /* Ohne Unschaerfe-Unterstuetzung waere die Scheibe fast unsichtbar und der Text stuende blank auf dem Foto. Dann lieber eine ehrliche, dunkle Flaeche. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body .isb .isb__folietext .isb__innen { background-color: rgba(22, 22, 26, .55); } } /* ========================================================= 49 — Dieselbe Scheibe unten ----------------------------------------------------- Gewuenscht am 03.11.: Die feste Leiste am Fuss soll beim Scrollen denselben Glaseindruck machen wie die Buehne und der Kopf. Sie stand bisher ausdruecklich undurchsichtig (siehe die getrennte Fussregel weiter oben) — das war richtig, solange es nur den Kopf betraf. Jetzt bekommt sie dieselbe Behandlung: Grundton aus der Variablen, Deckung genommen, Unschaerfe dahinter, und eine helle Kante oben, damit sie sich vom Inhalt absetzt. Die erste Angabe bleibt der Rueckfall fuer Browser ohne color-mix. ========================================================= */ body .footer_fixed { background-color: var(--is-grund); background-color: color-mix(in srgb, var(--is-grund) 76%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .12); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body .footer_fixed { background-color: var(--is-grund); } } /* ========================================================= 50 — Auf dem Handy drei Striche statt des Sturms ----------------------------------------------------- Gemeldet am 03.11., zweimal: „Ich habe immer noch keine Navigation auf der Mobile-Seite.“ Nachgemessen war alles in Ordnung: Die Flaeche ist anklickbar, und ein Tippen oeffnet die Tafel mit der kompletten Seitenuebersicht (von display:none auf 390 x 798 px). Das Menue war also da. Der Fehler lag in der Gestaltung: Ich hatte das Hamburger-Symbol des Themes durch die Sturm-Marke ersetzt. Huebsch, aber niemand erkennt darin einen Menueknopf — der Kunde nicht, ein Besucher erst recht nicht. Eine Schaltflaeche, die man nicht als solche liest, ist keine. Auf schmalen Schirmen daher drei Striche: eine Linie als Koerper, zwei weitere als Schlagschatten darueber und darunter. Ein Element, drei Striche, kein zweites Bild. Am Schreibtisch bleibt der Sturm — dort steht das Menue ohnehin ausgeschrieben daneben. ========================================================= */ @media (max-width: 980px) { body.is-zweig-hell .header .menu-toggle::after, body.is-zweig-dunkel .header .menu-toggle::after, body .header .menu-toggle::after { background-image: none; background-color: currentColor; top: 50%; left: 3px; right: 3px; width: auto; height: 2px; margin-top: -1px; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; /* Eine andere Regel haelt das ::after auf opacity 0 — die Box und die Farbe stimmten, nur sichtbar war nichts. */ opacity: 1; } /* Die Sturm-Grafik sitzt nicht am ::after, sondern am span.ico — gesetzt vom Theme UND vom Customizer (.header .menu-toggle span.ico). Sie lag damit ueber den Strichen. Eine Stufe mehr Spezifitaet genuegt, kein !important. */ body .header .menu-toggle span.ico { background-image: none; } /* Die Striche erben ihre Farbe vom Knopf. Der stand auf Weiss — auf dem hellen Zweig damit unsichtbar. */ body.is-zweig-hell .header .menu-toggle { color: var(--isb-tinte, #16161A); } body.is-zweig-dunkel .header .menu-toggle { color: #FFFFFF; } } /* ========================================================= 51 — Die Buehne auf dem Handy ----------------------------------------------------- Gemeldet am 03.11.: Bild unsauber, viel zu gross skaliert, Pfeile zu weit oben. Nachgemessen bei 390 px Fensterbreite: • Die Buehne war 375 x 440 px — hochkant. Die Motive liegen bei 2:1 quer. Um eine hochkante Flaeche zu fuellen, muss ein Querformat so weit vergroessert werden, dass 57 % der Bildbreite wegfallen. Man sah einen schmalen Streifen in 1,6-facher Vergroesserung. • Die Glasscheibe bedeckte 73 % der Buehnenflaeche. Vom Motiv blieb kaum etwas uebrig. • Die Pfeile standen auf top: 21 % — eine Regel aus der Zeit vor der Scheibe. Jetzt: flachere Buehne (naeher am Bildverhaeltnis), kompaktere Scheibe, Pfeile mittig. ========================================================= */ @media (max-width: 760px) { body .isb .isb__buehne { /* Die Basisregel .isb__buehne setzt min-height: 440px — eine Untergrenze, die jede kleinere Hoehe aushebelt. Darauf bin ich erst beim Nachmessen gestossen. */ min-height: 0; height: clamp(340px, 90vw, 390px); } body .isb .isb__folietext { padding-top: 52px; padding-bottom: 14px; } body .isb .isb__folietext .isb__innen { padding: 16px 18px 20px; } body .isb__buehne p.isb__folietitel { font-size: clamp(28px, 7.5vw, 36px); } /* Die Schlagzeile ueber dem Titel bricht auf dem Handy auf zwei Zeilen und frisst die Scheibe. Kleiner und enger, aber sie bleibt lesbar. */ body .isb .isb__buehne .isb__dach { font-size: 10px; letter-spacing: .1em; margin-bottom: 8px; } body .isb .isb__buehne .isb__folieSatz { font-size: 14px; line-height: 1.4; } /* Mittig, wie am Schreibtisch. Die Verschiebung um die halbe Pfeilhoehe steckt bereits im transform. */ body .isb .isb__pfeil { top: 50%; } } /* ========================================================= 52 — zurueckgenommen am 03.11. ----------------------------------------------------- Der Text stand auf dem Handy kurzzeitig unter dem Bild (eigenes Bildband oben, dunkles Textband darunter). Das hat den Beschnitt von 47 % auf 8 % gedrueckt, aber der Glas-Look auf der Buehne war dahin — und der ist der Charakter der Startseite. Auf Wunsch wieder entfernt. Es gilt wieder Abschnitt 51: Text auf dem Bild, Scheibe darueber, Pfeile auf top: 50 % und damit mittig zum Bild, weil das Bild die ganze Buehne fuellt. Falls der Beschnitt spaeter doch wieder stoert: der verworfene Stand liegt als 1.47.1 im Protokoll. ========================================================= */