ins Formular. */
.yform altcha-widget { display: block; margin: 0 0 20px 0; }
/* Formular mit 2 Spalten: 48% + 4% column-gap (am form) + 48% = 100% */
.yform .form_left, .yform .form_right { flex-basis: 48%; min-width: 250px; margin: 0 0 20px 0; }
.yform .form_clear { flex-basis: 100%; }
@media all and (max-width:768px) {
.yform .form_left, .yform .form_right { flex-basis: 100%; }
}
/* Upload-Felder als Drop-Zone (Markup: yForm 5 value.upload.tpl.php). Natives
liegt unsichtbar über der ganzen Box - Klick und
Drag-and-drop funktionieren dadurch ohne JS. styles_js.inc ergänzt nur
Komfort (Dateiname, Dragover-Optik, Entfernen-Button); .has_file/.is_dragover
kommen von dort. */
.yform .upload_felder { flex-basis: 100%; margin: 0 0 20px 0; }
/* Optionale Überschrift über den Upload-Boxen (im Formular-Code als html-Feld) */
.yform .upload_felder .upload_titel { display: block; margin: 0 0 10px 0; font-weight: 600; font-size: 1.1rem; color: #333; }
/* Box */
.yform .upload_felder .form-group { position: relative; display: block; margin: 0 0 15px 0; padding: 20px 56px 20px 64px; min-height: 72px; border: 2px dashed #b9c2cc; border-radius: 6px; background-color: #f7f9fb; transition: border-color 0.2s, background-color 0.2s; }
.yform .upload_felder .form-group:hover,
.yform .upload_felder .form-group.is_dragover { border-color: #37434f; background-color: #eef3f8; }
.yform .upload_felder .form-group:focus-within { outline: 2px solid #0078d7; outline-offset: 2px; }
.yform .upload_felder .form-group.is_dragover { border-style: solid; }
/* Upload-Icon (Pfeil nach oben), Farbe im Projekt-CSS über fill anpassen */
.yform .upload_felder .form-group::before { content: ""; position: absolute; top: 50%; left: 22px; width: 24px; height: 24px; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; }
/* Label = sichtbarer Text der Box; Hinweis in Klammern über .upload_hint */
.yform .upload_felder .control-label { display: block; margin: 0; font-weight: 600; color: #333; cursor: pointer; }
.yform .upload_felder .upload_hint { display: block; margin: 4px 0 0 0; font-weight: 400; font-size: 0.85rem; color: #666; }
/* Natives Input unsichtbar über die ganze Box legen (klick- und drop-fähig) */
.yform .upload_felder .input-group { display: block; position: static; }
.yform .upload_felder .input-group input[type="file"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; z-index: 1; }
/* Ausgewählte Datei (wird vom JS gefüllt) */
.yform .upload_felder .upload_filename { display: none; margin: 6px 0 0 0; font-size: 0.85rem; color: #333; word-break: break-all; }
.yform .upload_felder .form-group.has_file .upload_filename { display: block; }
/* Entfernen-Button (×) aus dem yForm-Template: nur mit Datei sichtbar, über dem Input */
.yform .upload_felder .input-group-btn { display: none; position: absolute; top: 10px; right: 10px; z-index: 2; }
.yform .upload_felder .form-group.has_file .input-group-btn { display: block; }
.yform .upload_felder .input-group-btn .btn-default { width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid #b9c2cc; border-radius: 50%; background-color: #fff; color: #333; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.yform .upload_felder .input-group-btn .btn-default:hover { background-color: #a94442; border-color: #a94442; color: #fff; }
.yform .upload_felder .input-group-btn .btn-default:focus-visible { outline: 2px solid #0078d7; outline-offset: 2px; }
/* Hinweis-/Fehlertext unter dem Label (liegt unter dem transparenten Input, ist nur lesbar) */
.yform .upload_felder .help-block { position: relative; margin: 6px 0 0 0; font-size: 0.85rem; color: #666; }
.yform .upload_felder .help-block .text-warning { color: #a94442; }
/* Fehlerzustand */
.yform .upload_felder .form-group.has-error { border-color: #a94442; background-color: #FBF6F6; }
.yform .upload_felder .form-group.has-error .control-label { color: #a94442; }
/* Bereits hochgeladene Datei (nach fehlgeschlagener Validierung): yForm zeigt eine
Checkbox "Häkchen setzen um die Datei zu entfernen" - normale Checkbox-Optik */
.yform .upload_felder .checkbox { margin: -5px 0 15px 0; }
@media (forced-colors: active) {
.yform .upload_felder .form-group { border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
.yform .form-control,
.yform .btn-primary,
.yform .upload_felder .form-group { transition: none; }
}
/* header_001_einfaches_bild.css */
/* Default ("automatisch" + feste vh-Werte, NICHT "normal" s.u.): Text
bestimmt per min-height die Hoehe (waechst bei Bedarf), Bild deckt per
object-fit:cover ab. align-items/justify-content (Text-Position, Standard
zentriert) in moduleYYYYMMDD.css frei ueberschreibbar. */
.header_image_simple { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; min-height: 400px; margin: 0; padding: 0; z-index: 1; overflow: hidden; }
.header_image_simple img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.header_image_simple_text { position: relative; z-index: 1; display: block; width: auto; height: auto; margin: 0; padding: 20px; color: #fff; font-size: 3rem; text-align: center; }
/* TinyMCEs -margin-bottom kollabiert wegen des paddings nicht nach aussen
und verschiebt die zentrierte Box optisch nach oben - deshalb nur beim
letzten Absatz kappen. */
.header_image_simple_text > *:last-child { margin-bottom: 0; }
/* Feste Hoehen ueberschreiben nur die Basis-min-height von oben - Bild/Text-Mechanik
bleibt sonst wie im Default-Fall (Automatisch). */
.header_image_simple.height_25vh { min-height: 25vh; }
.header_image_simple.height_33vh { min-height: 33vh; }
.header_image_simple.height_50vh { min-height: 50vh; }
.header_image_simple.height_66vh { min-height: 66vh; }
.header_image_simple.height_75vh { min-height: 75vh; }
.header_image_simple.height_100vh { min-height: 100vh; }
/* "normal" (Bestandsverhalten vor der Automatisch/vh-Umstellung): Bild in
Original-Proportion ohne Zuschnitt, Text liegt position:absolute drueber
(kann bei langem Text ueberdecken - sonst "Automatisch" waehlen). */
.header_image_simple.normal { display: block; min-height: 0; overflow: visible; }
.header_image_simple.normal img { position: static; width: 100%; height: auto; object-fit: unset; inset: auto; }
.header_image_simple.normal .header_image_simple_text { position: absolute; top: 30px; left: 30px; width: auto; padding: 0; }
#arrow_slide_down_to_content { position: absolute; display: flex; align-items: center; justify-content: center; top: auto; bottom: 20px; left: 50%; width: 40px; height: 40px; margin: 0 0 0 -20px; padding: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.1); border: none; animation: arrow_slide_down_to_content_jump 2s infinite; cursor: pointer; font-size: 24px; color: #fff; }
#arrow_slide_down_to_content span { transform: rotate(90deg) translateY(-1px); }
#arrow_slide_down_to_content:hover,
#arrow_slide_down_to_content:focus { background-color: rgba(0, 0, 0, 0.5); }
#arrow_slide_down_to_content:focus, #arrow_slide_down_to_content:focus-visible { outline: 2px solid #0078d7; outline-offset: 2px; }
@keyframes arrow_slide_down_to_content_jump {
25% { transform: translate(0, 0) scale(1); }
50% { transform: translate(0, -10px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
#arrow_slide_down_to_content { animation: none; }
}
/* module20260914.css */
/* module20260914.css - Feinanpassung der Module, Projekt Andreas Heideck.
Einbinden per addCssOwn() NACH den Modul-CSS des AddOns.
Kaskade: default.css -> main.css -> Modul-CSS AddOn -> diese Datei.
Zwei Bloecke: erst alle Anpassungen an Poolmodulen, danach alle eigenen
m5XX-Module (konventionen.md). Farben aus den :root-Variablen. */
/* #############################################################################
A) Anpassungen an AddOn-Poolmodulen
############################################################################# */
/* =============================================================================
extras_010_formular_yform
.yform ... - gleiche Spezifitaet wie im styles_css.inc, diese Datei laedt
spaeter und gewinnt dadurch.
============================================================================= */
.yform .altcha { margin-bottom: 20px; }
.yform .btn-primary { display: inline-block; width: auto; margin: 0 0 10px 0; padding: 12px 30px; background-color: var(--color-link); color: var(--color-bg); text-decoration: none; border: 2px solid var(--color-link); border-radius: 0; }
.yform .btn-primary:hover,
.yform .btn-primary:focus { background-color: var(--color-bg); color: var(--color-link); text-decoration: none; }
/* Button dreht bei Fokus auf weissen Grund, deshalb dunkler Ring. */
.yform .btn-primary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; box-shadow: none; }
/* =============================================================================
021_bildergalerie_masonry
.outer_box.m021_bildergalerie_masonry > .bildergalerie_masonry
Achtung Spezifitaet: das styles_css.inc bindet an
.m021_bildergalerie_masonry .bildergalerie_masonry - ein Override mit nur
.bildergalerie_masonry setzt sich nicht durch (konventionen.md).
============================================================================= */
.m021_bildergalerie_masonry .bildergalerie_masonry { column-count: 4; }
@media screen and (max-width: 980px) {
.m021_bildergalerie_masonry .bildergalerie_masonry { column-count: 3; }
}
@media screen and (max-width: 768px) {
.m021_bildergalerie_masonry .bildergalerie_masonry { column-count: 2; }
}
@media screen and (max-width: 480px) {
.m021_bildergalerie_masonry .bildergalerie_masonry { column-count: 1; column-gap: 0; }
}
.m021_bildergalerie_masonry .bildergalerie_masonry a.glightbox {
display: block;
position: relative;
overflow: hidden;
}
.m021_bildergalerie_masonry .bildergalerie_masonry a.glightbox img {
display: block;
width: 100%;
height: auto;
transform: scale(1);
transition: transform 400ms ease-in-out;
}
.m021_bildergalerie_masonry .bildergalerie_masonry a.glightbox:hover img,
.m021_bildergalerie_masonry .bildergalerie_masonry a.glightbox:focus-visible img {
transform: scale(1.1);
}
/* Fokusring liegt auf dem Bild, deshalb hell. Negativer Offset, sonst schneidet
overflow:hidden auf dem Link den Rahmen ab. */
.m021_bildergalerie_masonry .bildergalerie_masonry a.glightbox:focus-visible {
outline: 2px solid var(--color-focus-light);
outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
.m021_bildergalerie_masonry .bildergalerie_masonry a.glightbox img {
transition: none;
}
}
/* #############################################################################
B) Eigene Module (m5XX) und Projektmodule
-----------------------------------------------------------------------------
Die Klassennamen unterhalb stammen aus den projekteigenen Modulen, nicht aus
dem AddOn, und sind hier nicht gegen das Markup geprueft.
Offen: die Bindestrich-Klassen (.slotzoom-hero-slider__..., .projects-carousel,
.project-title) widersprechen der Unterstrich-Konvention - umbenennen geht nur
zusammen mit output.inc und styles_js.inc des jeweiligen Moduls.
############################################################################# */
/* =============================================================================
Portfolio - Verwendung pruefen, ggf. ersatzlos streichen
============================================================================= */
#portfolio_gallery_head { position: relative; width: 97.52%; margin: 0 0 1.24% 1.24%; padding: 0; }
#portfolio_gallery_head section { position: absolute; top: 0; right: 0; width: 360px; margin: 0; padding: 0; text-align: right; z-index: 999; }
#portfolio_gallery { position: relative; display: block; width: 98.76%; margin: 0 0 1.24% 1.24%; padding: 0; }
.portfolio_modul { display: block; position: relative; top: 0; left: 0; width: 97.52%; height: auto; margin: 0 0 1.24% 1.24%; }
.portfolio_image,
.portfolio_gallery { display: block; width: 62%; max-width: 570px; height: auto; margin: 0; border: 6px solid #ede6e4; overflow: hidden; }
.portfolio_text { position: absolute; bottom: 0; right: 0; width: 33%; height: auto; max-width: 380px; margin: 0; }
.portfolio_text h3 { margin: 0; }
/* =============================================================================
Bildergalerie - Verwendung pruefen, ggf. ersatzlos streichen
============================================================================= */
.bildergalerie { display: flex; flex-wrap: wrap; }
.bildergalerie a { display: block; width: 21.71%; margin: 0 0 2.63% 2.63%; padding: 0; box-shadow: 0 0 6px 0 var(--color-bg); }
.bildergalerie a:hover { opacity: 0.6; }
.bildergalerie a:focus-visible { opacity: 0.6; outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* =============================================================================
Referenzen-Galerie
============================================================================= */
#referenzen_gallery { display: flex; flex-wrap: wrap; }
#referenzen_gallery .referenz {
display: block;
position: relative;
top: 0;
left: 0;
width: 29.82%;
height: auto;
margin: 0 0 2.63% 2.63%;
padding: 0;
overflow: hidden;
box-shadow: 0 0 6px 0 var(--color-bg);
}
.referenz a {
display: block;
position: relative;
}
.referenz a img {
transform: scale(1);
transition: transform 400ms ease-in-out, opacity 400ms ease-in-out;
}
.referenz a:hover img,
.referenz a:focus-visible img {
opacity: 1;
transform: scale(1.1);
}
.referenz a .referenz_text {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: auto;
min-height: 20px;
margin: 0;
padding: 6px 10px;
z-index: 10;
background-color: rgba(2, 28, 71, 0.75);
color: var(--color-bg);
transition: bottom 400ms ease-in-out;
}
.referenz a:hover .referenz_text,
.referenz a:focus-visible .referenz_text {
bottom: 0;
}
/* Fokusring liegt auf dem Bild, deshalb hell. Negativer Offset, sonst schneidet
overflow:hidden auf .referenz ihn ab. */
.referenz a:focus-visible {
outline: 2px solid var(--color-focus-light);
outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
.referenz a img,
.referenz a .referenz_text {
transition: none;
}
}
@media all and (max-width: 640px) {
#referenzen_gallery .referenz { width: 46.05%; }
}
@media all and (max-width: 480px) {
#referenzen_gallery { display: block; }
#referenzen_gallery .referenz { width: auto; margin: 0 10px 20px 10px; }
}
/* =============================================================================
Hauptslider (main_slider)
============================================================================= */
.main_slider { position: relative; overflow: hidden; min-height: 420px; }
.main_slider_box { position: relative; min-height: 420px; }
.main_slider_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.main_slider_box:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #171717; opacity: 0.6; z-index: 1; }
.main_slider_content { position: relative; z-index: 2; max-width: 700px; margin: 0 0 0 auto; padding: 33.7vmin 5vw 11.7vmin; text-align: right; color: var(--color-bg); }
.main_slider_title { margin: 0 0 0.3em 0; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 2.7778rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-bg); }
.main_slider_text { margin: 0 0 1.2em 0; font-size: 1rem; }
.main_slider_text p:last-child { margin-bottom: 0; }
.main_slider .tns-controls [aria-controls] { background-color: var(--color-link); }
.main_slider .tns-controls [aria-controls]:hover,
.main_slider .tns-controls [aria-controls]:focus-visible { color: var(--color-link); background-color: var(--color-bg); }
.main_slider .tns-controls [aria-controls]:focus-visible { outline: 2px solid var(--color-focus-light); outline-offset: 3px; }
.main_slider .tns-nav > [aria-controls] { background-color: rgba(255, 255, 255, 0.4); }
.main_slider .tns-nav > [aria-controls]:focus-visible { outline: 2px solid var(--color-focus-light); outline-offset: 3px; }
.main_slider .tns-nav > .tns-nav-active { background-color: var(--color-bg); border-color: var(--color-bg); }
/* =============================================================================
Hero-Slider mit Slotzoom-Uebergang
============================================================================= */
.slotzoom-hero-slider { width: 100%; position: relative; }
.slotzoom-hero-slider .swiper-slide {
height: 100vh;
min-height: 600px;
background-size: cover;
background-position: center;
background-color: #222; /* Fallback ohne Bild */
position: relative;
overflow: hidden;
}
/* diagonales Verlaufs-Overlay fuer Lesbarkeit, links hell -> rechts dunkler */
.slotzoom-hero-slider__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,.15) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,.55) 100%);
pointer-events: none;
}
.slotzoom-hero-slider__content {
position: absolute;
z-index: 2;
top: 50%;
right: 5%;
transform: translateY(-50%);
color: var(--color-bg);
max-width: min(75%, 800px);
text-align: right;
}
.slotzoom-hero-slider__title {
margin: 0 0 10px 0;
color: var(--color-bg);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 300;
text-transform: uppercase;
letter-spacing: clamp(.08em, 1.5vw, .3em);
overflow: hidden;
}
.slotzoom-hero-slider__subtitle {
margin: 1rem 0 0 0;
font-size: clamp(1rem, 1.4vw, 1.25rem);
opacity: 0;
transform: translateY(12px);
transition: opacity .6s .8s, transform .6s .8s; /* Verzoegerung wartet die Buchstaben-Animation ab */
}
.slotzoom-hero-slider .swiper-slide-active .slotzoom-hero-slider__subtitle {
opacity: .9;
transform: translateY(0);
}
/* Verhindert Umbruch mitten im Wort (siehe heroSplitChars) */
.slotzoom-hero-slider__word {
display: inline-block;
white-space: nowrap;
}
.slotzoom-hero-slider__char {
display: inline-block;
opacity: 0;
transform: translateX(80%) rotateZ(70deg);
animation-name: heroCharReveal;
animation-duration: .7s;
animation-timing-function: cubic-bezier(.22, 1, .36, 1);
animation-fill-mode: forwards;
animation-delay: calc(var(--i) * 50ms + 200ms);
}
@keyframes heroCharReveal {
0% { opacity: 0; transform: translateX(80%) rotateZ(70deg); }
100% { opacity: 1; transform: translateX(0) rotateZ(0deg); }
}
/* Screenreader liest den vollen Titel statt Buchstabe fuer Buchstabe */
.slotzoom-hero-slider__sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Slotzoom-Uebergang: das abgeloeste Bild wird in Streifen zerlegt, die einzeln
hochskaliert werden und dabei ausblenden. */
.slotzoom-hero-slider__slot-container { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.slotzoom-hero-slider__slot-wrapper { position: absolute; left: 0; width: 100%; overflow: hidden; }
.slotzoom-hero-slider__slot-inner {
position: absolute;
left: 0;
width: 100%;
will-change: transform, opacity;
transition: transform .65s cubic-bezier(.4,0,.2,1), opacity .65s cubic-bezier(.4,0,.2,1);
}
.slotzoom-hero-slider__slot-inner.is-animating {
transform: scaleY(1.6) scaleX(1.08);
opacity: 0;
}
/* Steuerleiste (.swiper-navigation) - nur die Abweichungen dieses Moduls */
.slotzoom-hero-slider {
--nav-offset-bottom: 24px;
--nav-color: rgba(255, 255, 255, .85);
--swiper-pagination-color: #fff;
--swiper-pagination-bullet-inactive-color: #fff;
--swiper-pagination-bullet-inactive-opacity: .45;
--swiper-pagination-bullet-size: 9px;
--swiper-pagination-bullet-horizontal-gap: 5px;
}
/* Play/Pause-Icon je nach aria-pressed */
.slotzoom-hero-slider__playpause .slotzoom-hero-slider__icon-play,
.slotzoom-hero-slider__playpause[aria-pressed="true"] .slotzoom-hero-slider__icon-pause {
display: none;
}
.slotzoom-hero-slider__playpause[aria-pressed="true"] .slotzoom-hero-slider__icon-play {
display: inline-block;
}
@media all and (max-width: 640px) {
.slotzoom-hero-slider__content { right: 24px; left: 24px; text-align: left; max-width: 100%; }
.slotzoom-hero-slider .swiper-navigation .swiper-button-prev,
.slotzoom-hero-slider .swiper-navigation .swiper-button-next { width: 34px; height: 34px; padding: 8px; }
.slotzoom-hero-slider__word {
display: inline; white-space: normal;
hyphens: auto; overflow-wrap: break-word;
}
}
/* Bewegungsreduzierung respektieren (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
.slotzoom-hero-slider__char { animation: none !important; opacity: 1 !important; transform: none !important; }
.slotzoom-hero-slider__subtitle { transition: opacity .15s, transform 0s !important; }
.slotzoom-hero-slider__slot-inner { transition: none !important; }
}
/* =============================================================================
Bilder-Galerie / Referenzen-Karussell
(Ausgabe-Modul "502 - Bilder-Galerie + Text + Link")
============================================================================= */
.projects-carousel {
clear: both;
position: relative;
overflow: hidden;
--nav-bg: rgba(2, 28, 71, .85);
--nav-bg-hover: rgba(2, 28, 71, 1);
--nav-border: rgba(255, 255, 255, .3);
--nav-border-hover: rgba(255, 255, 255, .5);
--nav-color: #fff;
}
.projects-carousel .swiper-navigation {
position: relative;
bottom: auto;
left: auto;
right: auto;
margin-top: 16px; /* Ausnahme zur margin-bottom-Regel: Leiste sitzt unter dem Karussell */
}
.projects-carousel .swiper-wrapper {
/* Fallback, solange Swiper-JS nicht geladen ist */
display: flex;
}
.project-slide {
height: auto;
}
.project {
display: block;
position: relative;
text-decoration: none;
color: inherit;
}
.project figure {
position: relative;
margin: 0;
overflow: hidden;
background-color: #eee; /* sichtbar, solange das Bild laedt */
}
.project img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.6s ease;
}
.project figure::after {
content: '';
position: absolute;
inset: 0;
background-color: #111;
opacity: 0.4;
transition: opacity 0.4s ease;
}
.project figcaption {
position: absolute;
inset: 0;
z-index: 1;
margin: 0;
padding: 24px 28px;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
transition: background-color 0.3s ease, padding-top 0.3s ease;
}
.project:hover figcaption,
.project:focus-visible figcaption {
background-color: rgba(2, 28, 71, 0.75);
padding-top: 36px;
}
.outer_box h3.project-title {
position: relative;
margin: 0;
font-size: 1.1rem;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-bg);
}
/* Erscheint unter dem Titel, der Titel bleibt stehen. */
.project-hover-text {
margin: 8px 0 0 0;
max-width: 100%;
color: var(--color-bg);
font-size: 0.9rem;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.project:hover figure::after,
.project:focus-visible figure::after {
opacity: 0;
}
.project:hover img,
.project:focus-visible img {
transform: scale(1.08);
}
.project:hover .project-hover-text,
.project:focus-visible .project-hover-text {
opacity: 1;
transform: translateY(0);
}
/* Fokusring auf .project selbst - ein Pseudoelement oder ein img bekommt keinen
sichtbaren Fokus. Liegt auf dem Bild, deshalb hell. */
.project:focus-visible {
outline: 2px solid var(--color-focus-light);
outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
.project img,
.project figure::after,
.project figcaption,
.project-hover-text {
transition: none;
}
}
#article_nav { clear: both; display: block; width: 94.74%; margin: 40px auto 20px 2.78%; }
#article_nav_back { float: left; width: 160px; }
#article_nav_next { float: right; width: 160px; text-align: right; }
#article_nav_home { width: auto; margin: 0 160px; text-align: center; }
#article_nav_back a.btn,
#article_nav_next a.btn,
#article_nav_home a.btn {
display: inline-block;
box-sizing: border-box;
background-color: #021c47;
color: #fff;
border: 2px solid #021c47;
padding: 5px 20px;
}
#article_nav_back a.btn:hover,
#article_nav_next a.btn:hover,
#article_nav_home a.btn:hover,
#article_nav_back a.btn:focus,
#article_nav_next a.btn:focus,
#article_nav_home a.btn:focus {
background-color: #fff;
color: #021c47; }
#article_nav_back a.btn:focus-visible,
#article_nav_next a.btn:focus-visible,
#article_nav_home a.btn:focus-visible {
outline: 2px solid blue; outline-offset: 3px; }
@media all and (max-width:480px) {
#article_nav_home {
margin: 0 50px;
}
#article_nav_back,
#article_nav_next {
width: 44px; }
#article_nav_back a.btn,
#article_nav_next a.btn {
display: inline-block;
box-sizing: border-box;
width: 44px;
height: 44px;
padding: 0;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
background-color: #021c47;
border: 2px solid #021c47;
background-repeat: no-repeat;
background-position: center center;
background-size: 28px auto; /* Seitenverhaeltnis 40:32 der PNGs bleibt erhalten */
}
#article_nav_back a.btn { background-image: url(icon-prev.png); }
#article_nav_next a.btn { background-image: url(icon-next.png); text-align: left; }
/* Weisse Icons wuerden auf weissem Hover-Hintergrund verschwinden -> hier bewusst
kein Farbtausch, nur ein Fokus-Ring fuer Tastaturbedienung */
#article_nav_back a.btn:hover,
#article_nav_back a.btn:focus,
#article_nav_next a.btn:hover,
#article_nav_next a.btn:focus {
background-color: #021c47;
color: #fff; }
#article_nav_back a.btn:focus-visible,
#article_nav_next a.btn:focus-visible {
outline: 2px solid #021c47;
outline-offset: 3px;
}
#article_nav_home a.btn { padding: 7px 18px; }
}