/** * acf/bild-cta — helles Band über einem vollflächigen Hintergrundbild. * * Die Buttons bringen ihr Aussehen aus universal.css mit * (.wp-block-button__link) — hier steht nur das Layout. Kein eigenes Rot, kein * eigener Radius: sonst driftet der Block vom Rest der Seite weg. */ .dhaw-bild-cta { /* Glasfläche wie im Hero — die Werte stehen zentral in assets/css/tokens.css (--dhaw-glass-*), damit beide Bänder auf einem Foto gleich wirken; dort ändern, nicht hier. Die Aliase bleiben, damit ein einzelner Block notfalls abweichen kann. Dunkles Glas heißt weiße Schrift; deshalb kippt --ink mit. */ --dhaw-bild-cta-band: var(--dhaw-glass-bg, rgba(26, 26, 26, 0.32)); --dhaw-bild-cta-band-border: var(--dhaw-glass-border, rgba(255, 255, 255, 0.18)); --dhaw-bild-cta-band-blur: var(--dhaw-glass-blur, 16px); --dhaw-bild-cta-ink: #ffffff; /* Trägt die Fläche, solange das Bild noch nicht geladen (oder keins gesetzt) ist — der Text steht nie auf Weiß. */ --dhaw-bild-cta-fallback: #1a1a1a; /* Breite und seitlicher Innenabstand kommen aus .dhaw-container, hier nur der vertikale Abstand — sonst addieren sich beide. */ padding-top: 40px; padding-bottom: 40px; } /* Der Bildrahmen: liegt innerhalb der Inhaltsspalte, trägt Bild und Band. */ .dhaw-bild-cta__frame { position: relative; display: grid; /* Position des Bands, gesetzt aus den beiden Feldern. start | center | end. Die Ausrichtung steht am Raster, nicht am Band selbst — ein "margin-inline: auto" am Band würde justify-items schlagen, weil Auto-Margins im Grid vor der Ausrichtung aufgelöst werden. */ align-items: var(--dhaw-bild-cta-y, center); justify-items: var(--dhaw-bild-cta-x, center); box-sizing: border-box; width: 100%; min-height: clamp(420px, 50vw, 640px); /* Abstand zwischen Band und Bildkante — auch ein linksbündiges Band klebt so nicht am Rand. */ padding: clamp(6px, calc(3vw - 10px), 38px); overflow: hidden; border-radius: var(--dhaw-radius); background-color: var(--dhaw-bild-cta-fallback); } .dhaw-bild-cta *, .dhaw-bild-cta *::before, .dhaw-bild-cta *::after { box-sizing: inherit; } /* Als statt background-image: so greifen srcset, lazy loading und der Bildausschnitt aus dem Feld. */ .dhaw-bild-cta__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--dhaw-bild-cta-focus, 50% 50%); } /* Ohne Bild gibt es nichts weichzuzeichnen, und dunkles Glas auf dunklem Grund verschwindet — dann trägt die Fläche sich selbst. */ .dhaw-bild-cta--no-image .dhaw-bild-cta__band { background-color: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: none; backdrop-filter: none; } .dhaw-bild-cta__band { /* Über dem absolut liegenden Bild, ohne z-index-Wettrennen. */ position: relative; /* Das Band ist so breit wie sein Inhalt, nicht so breit wie die Sektion. Die Breite gibt damit .dhaw-bild-cta__content vor (max. 760px), eine kurze Zeile lässt das Band schmaler werden. */ width: fit-content; /* Höchstens 40rem breit und nie über den Rand hinaus; der Abstand zum Rand kommt aus dem Innenabstand der Sektion. */ max-width: min(100%, 40rem); /* Rundum 2rem ab 768px; darunter gilt die Mobil-Regel am Dateiende. */ padding: 2rem; text-align: left; border: 1px solid var(--dhaw-bild-cta-band-border); background-color: var(--dhaw-bild-cta-band); border-radius: var(--dhaw-radius); /* Das Foto dahinter wird weichgezeichnet — das erzeugt den Glaseffekt. -webkit- für Safari, das die Eigenschaft nur mit Präfix kennt. */ -webkit-backdrop-filter: blur(var(--dhaw-bild-cta-band-blur)) saturate(var(--dhaw-glass-saturate, 120%)); backdrop-filter: blur(var(--dhaw-bild-cta-band-blur)) saturate(var(--dhaw-glass-saturate, 120%)); /* Schlagschatten trennt die Fläche vom Foto, der innere helle Strich zeichnet die Oberkante nach wie bei einer Glasscheibe. */ box-shadow: var( --dhaw-glass-shadow, 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14) ); } /* Ohne backdrop-filter (ältere Browser) fehlt die Weichzeichnung — dann muss die Fläche selbst deckender sein, damit der Text lesbar bleibt. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dhaw-bild-cta__band { background-color: var(--dhaw-glass-bg-fallback, rgba(26, 26, 26, 0.6)); } } /* Wer Transparenzen reduziert hat, bekommt eine ruhige, deckende Fläche. */ @media (prefers-reduced-transparency: reduce) { .dhaw-bild-cta__band { background-color: var(--dhaw-glass-bg-solid, rgba(26, 26, 26, 0.85)); -webkit-backdrop-filter: none; backdrop-filter: none; } } .dhaw-bild-cta__content { max-width: 760px; margin: 0 auto; } /* Überschrift ------------------------------------------------------------------------ */ /* Die Überschrift bekommt die Standard-Typografie der Website: Josefin Sans und 700 kommen aus universal.css, Größe und Versalien aus --dhaw-h2-size / --dhaw-h2-transform (tokens.css). Zwei weitere Ausnahmen: margin, weil der Abstand nach unten hier aus .dhaw-bild-cta__text kommt und das globale "margin-bottom: 1em" ihn sonst verdoppelt. Und color, weil das Dunkelrot der globalen Regel auf dem dunklen Glas nur rund 2,4:1 erreicht — mit hellem Band einfach --dhaw-bild-cta-ink auf #70122a setzen, dann ist auch die Farbe die voreingestellte. */ .dhaw-bild-cta__headline { margin: 0; font-size: var(--dhaw-h2-size, 30px); text-transform: var(--dhaw-h2-transform, uppercase); color: var(--dhaw-bild-cta-ink); } .dhaw-bild-cta__text { margin-top: 18px; font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 1.6; color: var(--dhaw-bild-cta-ink); } .dhaw-bild-cta__text > :first-child { margin-top: 0; } .dhaw-bild-cta__text > :last-child { margin-bottom: 0; } /* Buttons ------------------------------------------------------------------------ */ .dhaw-bild-cta__buttons { display: flex; flex-wrap: wrap; /* Linksbündig wie der Text darüber — die Buttonreihe soll an derselben Kante beginnen wie Überschrift und Satz. */ justify-content: flex-start; gap: 16px; margin-top: 40px; } .dhaw-bild-cta__button { margin: 0; } /* Button-Varianten ------------------------------------------------------------------------ Nur die Farbe wird getauscht — Radius, Innenabstand und Schriftgröße bleiben die der Website (.wp-block-button__link in universal.css), damit die Buttons nebeneinander exakt gleich groß sind. Die Selektoren nennen den Block plus zwei Klassen (0,0,3,0), weil universal.css `.wp-block-button__link` (0,0,1,0) und `.wp-block-button__link:hover` (0,0,2,0) setzt — sonst gewinnt das Signalrot im Hover zurück. */ /* universal.css setzt für .wp-block-button__link keine display-Eigenschaft, und das Core-Stylesheet wp-block-library läuft in diesem Theme nicht mit — die Buttons blieben dadurch `display: inline`. Ein Inline-Element hat keine eigene Box: seine Höhe kommt aus der Schrift (24px) statt aus der Zeilenhöhe, was 64px statt 62px ergab, und der senkrechte Innenabstand schiebt keine Zeilen weg. Deshalb hier explizit. */ .dhaw-bild-cta .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; /* Einheitliche Buttonhöhe, siehe --dhaw-btn-height in assets/css/container.css. */ min-height: var(--dhaw-btn-height, 54px); padding-top: var(--dhaw-btn-pad-y, 8px); padding-bottom: var(--dhaw-btn-pad-y, 8px); } /* Der allgemeine Stil des dunklen Buttons: Dunkelrot, im Hover Signalrot, mit weichem Farbübergang — identisch zu .gu-abschluss-cta__button und den Hero-Buttons. Bis 2026-09-08 wurde hier nach #5a0e21 abgedunkelt, was den Button als einzigen der Seite anders reagieren ließ. Farben aus der Palette in assets/css/container.css statt als Hex; der Block führt "dhaw-container" in seiner block.json, die Tokens sind also da. */ .dhaw-bild-cta .wp-block-button__link.dhaw-bild-cta__link--dark { background: var(--dhaw-color-burgundy, #70122a); color: #ffffff; transition: background-color 0.2s ease; } .dhaw-bild-cta .wp-block-button__link.dhaw-bild-cta__link--dark:hover, .dhaw-bild-cta .wp-block-button__link.dhaw-bild-cta__link--dark:focus-visible { background: var(--dhaw-color-red, #e42720); color: #ffffff; } /* Kontur als inset-Schatten statt border: eine echte Border würde den Button 4 px höher machen als seinen Nachbarn, weil der Innenabstand aus universal.css kommt. */ .dhaw-bild-cta .wp-block-button__link.dhaw-bild-cta__link--outline { background: transparent; color: var(--dhaw-color-burgundy, #70122a); box-shadow: inset 0 0 0 2px currentColor; } .dhaw-bild-cta .wp-block-button__link.dhaw-bild-cta__link--outline:hover, .dhaw-bild-cta .wp-block-button__link.dhaw-bild-cta__link--outline:focus-visible { background: var(--dhaw-color-burgundy, #70122a); color: #ffffff; box-shadow: inset 0 0 0 2px var(--dhaw-color-burgundy, #70122a); } /* Breakpoints ------------------------------------------------------------------------ */ /* Bis zum Seiten-Breakpoint (991px) gestapelt: Bild oben, Band darunter. Schon auf dem Tablet verdeckt das Band sonst den größten Teil des Fotos. */ @media (max-width: 991px) { /* Gestapelt steht das Band nicht mehr auf dem Foto, sondern darunter — dort ist helles Grau mit dunkler Schrift ruhiger als das dunkle Glas. Der Rahmen nimmt dieselbe Farbe, damit die Karte unten nahtlos endet. */ .dhaw-bild-cta { --dhaw-bild-cta-fallback: #efefef; --dhaw-bild-cta-ink: var(--dhaw-color-ink, #1c1c1c); } /* Der Rahmen behält Radius und overflow: hidden, Bild und Band bilden so eine gemeinsame Karte. */ .dhaw-bild-cta__frame { display: flex; flex-direction: column; min-height: 0; padding: 0; } /* Auf dem Tablet flacher, sonst wird das Foto über 500px hoch. */ .dhaw-bild-cta__image { position: static; height: auto; aspect-ratio: 16 / 9; } /* Unter dem Bild gibt es nichts weichzuzeichnen — das Band wird zur deckenden grauen Fläche in der Rahmenfarbe, ohne Glas, Rand und Schatten. */ .dhaw-bild-cta__band { width: 100%; max-width: none; border: 0; border-radius: 0; background-color: var(--dhaw-bild-cta-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } } @media (max-width: 767px) { .dhaw-bild-cta { padding-top: 32px; padding-bottom: 32px; } .dhaw-bild-cta__image { aspect-ratio: 3 / 2; } .dhaw-bild-cta__band { padding: 28px 22px; } .dhaw-bild-cta__text { margin-top: 14px; font-size: 16px; } /* Nebeneinander werden zwei Buttons hier zu schmal zum Treffen. */ .dhaw-bild-cta__buttons { flex-direction: column; align-items: stretch; margin-top: 28px; } } @media (prefers-reduced-motion: reduce) { .dhaw-bild-cta .wp-block-button__link.dhaw-bild-cta__link--dark { transition: none; } }