/* ========================================================= Artemis Bonn - main.css Helles, sportlich-elegantes Theme. Kein Dark Mode. Grundfarbe Weiß #FBFDFF, Akzent Rot (frei im Customizer editierbar). Formsprache: durchgängig abgerundete Rechtecke, keine Ellipsen/Kreise für UI-Elemente (Buttons, Badges, Nav, Kacheln). ========================================================= */ :root{ --c-bg:#FBFDFF; --c-bg-alt:#F2F5F8; --c-surface:#FFFFFF; --c-border:#E4E9EE; --c-text:#12181F; --c-text-muted:#5B6773; --c-red:#c3004a; /* wird von inc/customizer.php live überschrieben */ --c-red-dark:#A50D26; --c-red-tint:#FCEBEE; --radius:14px; /* globaler Eckenradius - Customizer: Farben & Formen */ --radius-lg:28px; --radius-md:18px; --radius-sm:10px; --radius-xs:6px; --logo-h:36px; /* Logo-Höhe im Nav - Customizer: Farben & Formen */ --hero-img-pos:50% 50%; /* Position der Hero-Grafik - Customizer: Grafiken */ --hero-img-size:340px; /* Breite des Bilds rechts im Hero */ --hero-bg-pos:50% 50%; /* Ausschnitt des Hintergrundbilds */ --hero-bg-overlay:.55; /* Staerke der Aufhellung darueber */ --hero-min-h:0px; /* Mindesthoehe des Hero */ --bento-row-h:230px; /* Kachel-Hoehe im Bento-Grid */ --hero-head-w:22ch; /* Umbruchbreite der Hero-Ueberschrift */ --header-opacity:100%; /* Deckkraft der Nav - Customizer: Farben & Formen */ --shadow-sm:0 1px 2px rgba(18,24,31,.04), 0 1px 1px rgba(18,24,31,.03); --shadow-md:0 10px 30px rgba(18,24,31,.07); --shadow-lg:0 24px 60px rgba(18,24,31,.10); /* Mehrstufige Soft-Shadows (2026-Stil): mehrere weiche Schatten-Layer übereinander statt einem harten Schatten - nur rgba-Alphawerte, keine neuen Farbtöne. Die rot getönte Variante nutzt ausschließlich --c-red per color-mix (bleibt exakt derselbe Markenfarbton). */ --shadow-soft-1: 0 1px 2px rgba(18,24,31,.04), 0 4px 10px rgba(18,24,31,.05), 0 14px 28px rgba(18,24,31,.06); --shadow-soft-2: 0 2px 4px rgba(18,24,31,.05), 0 10px 24px rgba(18,24,31,.07), 0 28px 56px -12px rgba(18,24,31,.14); --shadow-soft-red: 0 2px 4px rgba(18,24,31,.04), 0 10px 24px -4px color-mix(in srgb, var(--c-red) 22%, transparent), 0 28px 56px -16px color-mix(in srgb, var(--c-red) 28%, transparent); /* Glass-Highlight: dünne helle Innenlinie oben, rein neutral (kein Markenfarbton). */ --glass-highlight: inset 0 1px 0 rgba(255,255,255,.6); --glass-border: 1px solid rgba(255,255,255,.4); --ease-soft: cubic-bezier(.2,.8,.2,1); --maxw:1240px; /* Durchgaengiges vertikales Raster: alle Sektionen nutzen denselben Abstand, damit die Seite ruhig wirkt. Skaliert per clamp() sanft von Mobil zu Desktop, ohne eigene Media Queries je Sektion. */ --section-y:clamp(48px, 7vw, 92px); --section-y-tight:clamp(32px, 4.5vw, 56px); --gutter:clamp(16px, 4vw, 24px); --header-h:56px; /* 8px-Raster: eine einzige Abstands-Skala fuer alle Komponenten. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:64px; /* Hero-Grafik auf Mobil: Groesse, Position und Deckkraft frei steuerbar (Customizer: Grafiken). Default bewusst dezenter als zuvor. */ --hero-m-w:76%; --hero-m-op:.14; --hero-m-x:-6%; --hero-m-y:58%; /* Durchgehend Arial (mit sicheren Fallbacks). */ --font-body:Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-display:Arial, 'Helvetica Neue', Helvetica, sans-serif; } /* Bewegungsreduktion respektieren: Wer das Betriebssystem auf reduzierte Bewegung eingestellt hat, bekommt keine Transitions/Scroll-Animationen. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } *, *::before, *::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } /* Sichtbarer, konsistenter Fokusring für Tastaturnutzung - nur Alpha-Wert der bestehenden Akzentfarbe, kein neuer Farbton. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--c-red) 35%, transparent); border-radius:var(--radius-xs); } body{ margin:0; background:var(--c-bg); color:var(--c-text); font-family:var(--font-body); font-size:16px; line-height:1.6; overflow-x:hidden; /* Sicherheitsnetz gegen versehentlichen horizontalen Overflow */ /* Header ist position:fixed und braucht daher reservierten Platz, sonst rutscht der Inhalt darunter. --header-offset wird von main.js nachgemessen; --header-h dient nur als Ausgangswert. Beide Variablen sind bewusst getrennt, sonst wuerde die gemessene Hoehe die Header-Hoehe selbst beeinflussen und die Leiste immer weiter wachsen. */ padding-top:var(--header-offset, var(--header-h)); } /* Mitscroll-Modus: die Leiste liegt normal im Fluss, scrollt also mit nach oben weg. Dann darf auch KEIN Platz reserviert werden, sonst entstuende oben eine Luecke. */ body.header-behavior-scroll{ padding-top:0; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.15; margin:0 0 .5em; letter-spacing:-0.015em; text-wrap:balance; } h2{ font-size:clamp(24px, 3vw, 34px); } h3{ font-size:clamp(17px, 2vw, 20px); } p{ margin:0 0 1em; color:var(--c-text-muted); line-height:1.65; text-wrap:pretty; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; white-space:nowrap; } .skip-link:focus{ clip:auto; clip-path:none; width:auto; height:auto; margin:0; overflow:visible; white-space:normal; position:fixed !important; top:10px; left:10px; z-index:100000; background:#fff; color:var(--c-text); font-weight:700; padding:10px 16px; border-radius:var(--radius-sm); box-shadow:var(--shadow-md); } /* ---------- Buttons (abgerundete Rechtecke, kein Pill/999px) ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:var(--radius); font-weight:600; font-size:15px; white-space:nowrap; transition:transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft), background .2s ease; } .btn:active{ transform:scale(.97); } .btn--primary{ background:linear-gradient(135deg, var(--c-red), var(--c-red-dark)); color:#fff; box-shadow:0 6px 16px -6px color-mix(in srgb, var(--c-red) 55%, transparent); } .btn--primary:hover{ box-shadow:0 12px 24px -8px color-mix(in srgb, var(--c-red) 60%, transparent); } .btn--ghost{ background:var(--c-surface); color:var(--c-text); border:1px solid var(--c-border); } .btn--ghost:hover{ border-color:var(--c-red); color:var(--c-red); background:color-mix(in srgb, var(--c-red) 5%, var(--c-surface)); } .btn--lg{ padding:16px 30px; font-size:16px; } /* ---------- Header / Nav ---------- Logo + Menü linksbündig gruppiert, Aktionen/Hamburger rechtsbündig - auf Mobile bleibt so klar Abstand zwischen Logo und Menü-Button. position:fixed statt sticky: sticky kollidierte mit der Ausblenden- Animation (blieb beim Scrollen auf halber Höhe hängen, weil der Browser die Sticky-Position und die Transform-Animation gleichzeitig neu berechnet hat). Der Platz dafür wird per JS als body-padding-top reserviert (main.js), damit kein Inhalt darunter verschwindet. */ /* Versatz fuer die WordPress-Adminleiste: sie liegt selbst fixiert am oberen Rand, der Header muss also darunter beginnen, damit das Menue in der Vorschau nicht verdeckt wird. */ body.header-behavior-scroll .site-header{ position:relative; top:auto; } body.header-behavior-scroll.admin-bar .site-header{ top:auto; } body.admin-bar .site-header{ top:32px; } @media (max-width:782px){ /* Unterhalb dieser Breite ist die Adminleiste hoeher und scrollt mit. */ body.admin-bar .site-header{ top:46px; } } .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; background:color-mix(in srgb, var(--c-bg) var(--header-opacity), transparent); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--c-border); transition:transform .3s var(--ease-soft), border-radius .2s ease, box-shadow .2s ease; } /* "Beim Scrollen ausblenden" (Customizer: Farben & Formen → Navigationsleiste): Header schiebt sich beim Runterscrollen aus dem Bild und kommt beim Hochscrollen sofort wieder - per JS gesteuerte Klasse, siehe main.js. */ body.header-behavior-autohide .site-header.is-header-hidden{ transform:translateY(-130%); } /* Dock-Modus: schwebende, freigestellte Leiste mit Abstand zum Rand statt randloser voller Breite. Nutzt margin:auto statt transform, damit sich das nicht mit der Ausblenden-Animation (translateY) in die Quere kommt. */ body.admin-bar.header-dock-mode .site-header{ top:46px; } @media (max-width:782px){ body.admin-bar.header-dock-mode .site-header{ top:60px; } } body.header-dock-mode .site-header{ top:14px; left:0; right:0; margin:0 auto; width:min(calc(100% - 32px), 980px); border:1px solid var(--c-border); border-bottom:1px solid var(--c-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft-1); } body.header-dock-mode .site-header:hover{ box-shadow:var(--shadow-soft-2); } .site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--header-h); padding-top:6px; padding-bottom:6px; /* nur vertikal - horizontales Padding kommt von .wrap */ /* KEIN overflow:hidden hier - das würde die Aufklapp-Menüs abschneiden. Ein zu großes Logo wird stattdessen direkt an .site-logo begrenzt. */ } .site-header__left{ display:flex; align-items:center; gap:28px; min-width:0; flex:1; } .site-header__right{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .site-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:18px; flex-shrink:0; height:var(--logo-h); max-height:var(--header-h); overflow:hidden; } .site-logo__text strong{ color:var(--c-red); } .site-logo__mark svg rect{ rx:10px; } .site-logo__mark svg{ height:calc(var(--logo-h) * 0.68); width:auto; } /* Vereins-Wortmarke als Standardlogo. Sehr breites, flaches Format, daher ueber die Breite skaliert statt ueber die Hoehe. */ /* Logo-Bild sicher auf Headerhöhe begrenzen. */ .site-logo__img{ max-height:calc(var(--header-h) - 12px); width:auto; width:auto; height:auto; max-width:clamp(150px, 20vw, 230px); max-height:var(--logo-h); object-fit:contain; display:block; } /* Eigenes hochgeladenes Logo: proportionale, im Customizer einstellbare Maximalhöhe (Regler „Logo-Höhe im Nav“), Breite passt sich automatisch an. */ .site-logo--custom{ height:var(--logo-h); overflow:hidden; } .site-logo--custom .custom-logo-link{ display:flex; align-items:center; height:100%; } .site-logo--custom img{ max-height:var(--logo-h); max-width:280px; width:auto; height:auto; object-fit:contain; display:block; } .site-nav{ min-width:0; } .nav-list{ list-style:none; display:flex; gap:4px; margin:0; padding:0; flex-wrap:nowrap; align-items:center; } .nav-list > li{ position:relative; } .nav-list > li > a{ display:inline-flex; align-items:center; gap:4px; padding:9px 12px; border-radius:var(--radius); font-weight:600; font-size:14px; color:var(--c-text-muted); transition:background .15s ease, color .15s ease; text-decoration:none; white-space:nowrap; } .nav-list li a{ display:inline-flex; align-items:center; gap:4px; text-decoration:none; white-space:nowrap; transition:background .15s ease, color .15s ease; } .nav-list li a:hover, .nav-list li.current-menu-item > a{ background:var(--c-bg-alt); color:var(--c-text); } /* ---------- Aufklapp-Menüs (Untermenüs) ---------- Ohne diese Regeln rendert WordPress die Untermenüs als sichtbare, gestapelte Listen mit Aufzählungspunkten. Sie werden jetzt versteckt und erscheinen als Dropdown beim Überfahren des Elternpunkts. */ .nav-list .sub-menu{ list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0; z-index:120; min-width:230px; max-width:300px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:2px; /* Immer nach UNTEN aufklappen, nie nach oben. */ opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; pointer-events:none; } .nav-list li:hover > .sub-menu, .nav-list li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity .16s ease, transform .16s ease, visibility 0s; } /* Unsichtbare Brücke, damit der Mauszeiger vom Elternpunkt ins Menü gelangt, ohne dass es schließt. */ .nav-list .menu-item-has-children > .sub-menu::before{ content:''; position:absolute; top:-8px; left:0; right:0; height:8px; } /* Untermenüs, die zu weit rechts stehen, klappen nach links aus. */ .nav-list > li:nth-last-child(-n+2) .sub-menu{ left:auto; right:0; } .nav-list .sub-menu li a{ display:block; width:100%; padding:9px 12px; font-size:14px; border-radius:var(--radius-sm); color:var(--c-text); } .nav-list .sub-menu li a:hover{ background:var(--c-red-tint); color:var(--c-red); } /* Elternpunkte mit Untermenü bekommen einen kleinen Pfeil. */ .nav-list .menu-item-has-children > a::after{ content:''; width:6px; height:6px; margin-left:3px; flex:none; border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; } .nav-list .menu-item-has-children:hover > a::after, .nav-list .menu-item-has-children:focus-within > a::after{ transform:rotate(-135deg) translateY(2px); } /* Eltern-Link ohne Ziel (nur Aufklappen) nicht wie ein Link wirken. */ .nav-list .menu-item-has-children > a[href="#"]{ cursor:default; } .site-header__actions{ display:flex; align-items:center; gap:10px; } .site-header__actions .btn--ghost{ display:none; } .nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--c-border); background:var(--c-surface); flex-shrink:0; } .nav-toggle span{ width:18px; height:2px; background:var(--c-text); border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } .mobile-nav{ display:none; max-height:0; overflow:hidden; background:color-mix(in srgb, var(--c-surface) 88%, transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--c-border); transition:max-height .3s var(--ease-soft); } .mobile-nav.is-open{ max-height:70vh; overflow-y:auto; } .mobile-nav__list{ list-style:none; margin:0; padding:12px 24px; display:flex; flex-direction:column; } .mobile-nav__list a{ display:block; padding:14px 4px; border-bottom:1px solid var(--c-border); font-weight:600; } /* Untermenüs auf Mobil: eingerückt und ohne Aufzählungspunkte, als einfache Liste unter dem Elternpunkt (kein Hover-Dropdown auf Touch). */ .mobile-nav__list .sub-menu{ list-style:none; margin:0 0 4px; padding:0 0 0 16px; border-left:2px solid var(--c-border); } .mobile-nav__list .sub-menu a{ padding:11px 4px; font-weight:500; color:var(--c-text-muted); border-bottom:1px solid var(--c-border); } .mobile-nav__list .menu-item-has-children > a{ color:var(--c-text); font-weight:700; } .mobile-nav__cta{ margin:16px 24px 24px; border-radius:var(--radius); } /* ---------- Hero ---------- Schlichter, ruhiger Aufbau: Text links, optional ein Bild rechts. Ein optionales Hintergrundbild fuellt den gesamten Hero-Bereich, sein Ausschnitt laesst sich per Customizer verschieben (--hero-bg-pos) und per Aufhellungs-Schleier abschwaechen (--hero-bg-veil), damit der Text immer lesbar bleibt. Ohne Hintergrundbild bleibt der Hero einfach hell. */ .hero{ position:relative; overflow:hidden; padding:var(--section-y) 0; min-height:var(--hero-min-h, 0); display:flex; align-items:center; /* Sehr dezenter Farbschimmer hinter der Grafik rechts. Gibt dem sonst rein weissen Bereich Tiefe, ohne aufdringlich zu wirken. Entfaellt automatisch, sobald ein Hintergrundbild gesetzt ist. */ /* Staerke ueber den Customizer steuerbar, Standard 0 = aus. */ background:radial-gradient(ellipse 60% 70% at 78% 45%, color-mix(in srgb, var(--c-red) var(--hero-glow, 0%), transparent), transparent 70%); } .hero--has-bg{ background:none; } /* Ueberstand-Modus: das Bild rechts darf ueber den Hero hinausragen und hinter den folgenden Abschnitt (z. B. das Bento-Grid) reichen. Dafuer muss der Hero seinen Beschnitt aufgeben. Standard ist aus. */ .hero--overflow{ overflow:visible; z-index:1; } .hero--overflow .hero__visual{ margin-bottom:calc(var(--hero-overflow, 0px) * -1); position:relative; z-index:1; } /* Der folgende Abschnitt liegt darueber, damit nur der gewuenschte Teil der Grafik durchscheint und Texte lesbar bleiben. */ .hero--overflow + .artemis-section, .hero--overflow + * { position:relative; z-index:2; } .hero__bg{ position:absolute; inset:0; z-index:0; } .hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; object-position:var(--hero-bg-pos, 50% 50%); /* Zoom und Feinverschiebung: der Ursprung liegt auf der gewaehlten Bildposition, dadurch arbeiten Regler und Zoom zusammen statt gegeneinander. */ transform:translate(var(--hero-bg-dx, 0%), var(--hero-bg-dy, 0%)) scale(var(--hero-bg-zoom, 1)); transform-origin:var(--hero-bg-pos, 50% 50%); will-change:transform; } /* Der Ueberstand beim Hineinzoomen darf den Hero nicht verlassen. */ .hero__bg{ overflow:hidden; } /* Aufhellender Schleier ueber dem Hintergrundbild - Staerke im Customizer einstellbar, damit dunklere Fotos die Schrift nicht unlesbar machen. */ .hero__bg-veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg, color-mix(in srgb, var(--c-bg) calc(var(--hero-bg-overlay, .55) * 100%), transparent) 0%, color-mix(in srgb, var(--c-bg) calc(var(--hero-bg-overlay, .55) * 62%), transparent) 100%); } .hero__grid{ position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:space-between; gap:48px; } .hero__inner{ max-width:600px; flex:1 1 520px; min-width:0; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--c-text); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; } .hero h1{ font-size:clamp(36px, 5vw, 60px); margin-bottom:22px; letter-spacing:-0.02em; color:var(--c-text); /* Umbruchbreite der Ueberschrift: im Customizer einstellbar. Damit laesst sich steuern, ob eine Zeile wie "in Bonn und Umgebung." zusammenbleibt oder umbricht. */ max-width:var(--hero-head-w, 22ch); /* Kein text-wrap:balance hier - der Umbruch soll ausschliesslich ueber die eingestellte Breite und den gesetzten Zeilenumbruch laufen. */ text-wrap:normal; } .hero-accent{ color:var(--c-red); } .hero__lead{ font-size:18.5px; line-height:1.65; } .hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 24px; } /* Klar gegliederter Aufbau statt loser Textknoten: Rubrik, Titel und Datum sind eigene Bloecke. Dadurch bricht nichts mehr mitten im Satz. */ .hero__next-termin{ display:inline-flex; align-items:center; gap:12px; padding:11px 18px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); max-width:100%; } .hero__next-body{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; } .hero__next-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-muted); } .hero__next-title{ font-size:14px; font-weight:700; color:var(--c-text); } .hero__next-date{ font-size:13px; color:var(--c-text-muted); white-space:nowrap; } .hero__next-termin .dot{ width:8px; height:8px; border-radius:2px; background:var(--c-red); flex-shrink:0; box-shadow:0 0 0 4px color-mix(in srgb, var(--c-red) 16%, transparent); } /* Auf schmalen Bildschirmen untereinander: Rubrik, dann Titel, dann Datum. */ @media (max-width:600px){ .hero__next-termin{ align-items:flex-start; gap:10px; padding:12px 14px; width:100%; } .hero__next-termin .dot{ margin-top:5px; } .hero__next-body{ flex-direction:column; align-items:flex-start; gap:2px; } .hero__next-title{ font-size:15px; line-height:1.3; } } /* Optionales Bild rechts neben dem Text. */ .hero__visual{ position:relative; z-index:2; flex:0 0 auto; width:min(var(--hero-img-size), 40vw); } /* Grundregel fuer das Bild. Die Modus-Regeln weiter unten muessen NACH dieser Regel stehen, sonst wuerden sie ueberschrieben. */ .hero__visual img{ width:100%; display:block; object-position:var(--hero-img-pos, 50% 50%); } /* "In Box": festes Seitenverhaeltnis, Bild wird passend zugeschnitten. */ .hero__visual--box{ aspect-ratio:4 / 3; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft-1); } .hero__visual--box img{ height:100%; object-fit:cover; } /* "Freistehend": Bild vollstaendig sichtbar, ohne Rahmen und Beschnitt. Passend fuer freigestellte Grafiken wie die Vereins-Bogenschuetzin. */ .hero__visual--free{ aspect-ratio:auto; border-radius:0; overflow:visible; box-shadow:none; } .hero__visual--free img{ height:auto; object-fit:contain; /* Standard ohne Schatten. Ein Schatten laesst sich ueber den Customizer zuschalten (--hero-img-shadow). */ filter:var(--hero-img-shadow, none); } @media (max-width:900px){ .hero__visual{ width:min(var(--hero-img-size), 34vw); } } /* Auf schmalen Bildschirmen liegt die Grafik nicht mehr unter dem Text, sondern als grossflaechiges Motiv dahinter. Der Text bleibt oben und bekommt darueber genug Kontrast, das Bild fuellt den Hero-Bereich. */ @media (max-width:720px){ .hero{ padding:56px 0 44px; position:relative; } .hero__grid{ display:block; } .hero__inner{ max-width:none; position:relative; z-index:2; } /* Die Grafik liegt bewusst tiefer und weiter rechts als der Text- schwerpunkt, damit Ueberschrift und Buttons frei bleiben. Groesse, Position und Deckkraft sind ueber den Customizer steuerbar. */ .hero__visual{ position:absolute; z-index:0; top:var(--hero-m-y, 58%); right:var(--hero-m-x, -6%); transform:translateY(-50%); width:min(var(--hero-m-w, 76%), 420px); margin:0; opacity:var(--hero-m-op, .14); pointer-events:none; } .hero__visual--box{ aspect-ratio:auto; border-radius:0; overflow:visible; box-shadow:none; } .hero__visual--box img{ height:auto; object-fit:contain; } .hero--has-bg .hero__visual{ display:none; } .hero--overflow .hero__visual{ margin-bottom:0; } /* Customizer: Hero-Grafik auf Mobilgeraeten komplett ausblenden. */ body.hero-graphic-hide-mobile .hero__visual{ display:none; } /* Genug Luft unter dem Text, damit die Grafik nicht angeschnitten wirkt. */ .hero__cta{ margin-bottom:var(--sp-5); } } /* ---------- Kennzahlen-Leiste ---------- */ .stats-strip{ background:var(--c-bg-alt); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); padding:var(--section-y-tight) 0; } .stats-strip__inner{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .stats-strip__item{ display:flex; flex-direction:column; gap:4px; text-align:center; border-left:1px solid var(--c-border); padding-left:24px; } .stats-strip__item:first-child{ border-left:none; padding-left:0; } .stats-strip__num{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,34px); color:var(--c-text); letter-spacing:-0.01em; } .stats-strip__item:nth-child(1) .stats-strip__num{ color:var(--c-red); } .stats-strip__label{ font-size:12.5px; color:var(--c-text-muted); } @media (max-width:760px){ .stats-strip__inner{ grid-template-columns:repeat(2, 1fr); row-gap:20px; } .stats-strip__item:nth-child(3){ border-left:none; padding-left:0; } } @media (max-width:460px){ .stats-strip__inner{ grid-template-columns:1fr 1fr; } } /* ---------- Bento-Grid (Desktop) ---------- Klassisches Mehrspalten-Grid mit einheitlicher Zeilenhöhe - alle Kacheln in derselben Reihe sind exakt gleich hoch, größere Kacheln (2x2 etc.) sind ein sauberes Vielfaches dieser Zeilenhöhe statt einer zufälligen eigenen Größe. */ .bento{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:var(--bento-row-h, 230px); grid-auto-flow:dense; gap:clamp(14px, 2vw, 22px); padding:0 var(--gutter) var(--section-y); } .bento-card{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; border-radius:var(--radius-lg); background:var(--c-bg-alt); border:1px solid var(--c-border); overflow:hidden; box-shadow:var(--shadow-soft-1); transition:transform .2s var(--ease-soft), box-shadow .2s ease, border-color .2s ease; text-align:left; width:100%; color:#fff; } .bento-card--1x1{ grid-column:span 1; grid-row:span 1; } .bento-card--2x1{ grid-column:span 2; grid-row:span 1; } .bento-card--1x2{ grid-column:span 1; grid-row:span 2; } .bento-card--2x2{ grid-column:span 2; grid-row:span 2; } /* Bewusst zurueckhaltende Bewegung: leichtes Anheben, kein starker Schattenwechsel. Pro Kachel abschaltbar (Klasse .bento-card--static). */ .bento-card:hover{ transform:none; box-shadow:var(--shadow-soft-1); border-color:transparent; } .bento-card--static:hover{ transform:none; box-shadow:var(--shadow-soft-1); } .bento-card--static:hover .bento-card__media img, .bento-card--static:hover .bento-card__media svg{ transform:none; } /* Feiner heller Innenrand: gibt den Kacheln ueber dem Foto Kontur, ohne einen harten Rahmen zu zeichnen. */ .bento-card::after{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } /* Klick auf "Im Grid erweitern": die Kachel legt sich als Overlay ueber das gesamte Grid, statt sich in den Fluss einzureihen. Dadurch werden die uebrigen Kacheln weder verschoben noch springt das Layout - sie werden schlicht ueberdeckt. Das Grid selbst ist dafuer der Positionsbezug (.bento{ position:relative }). */ .bento{ position:relative; } .bento-card[data-click-mode="expand"].is-expanded{ position:absolute; /* Am Innenabstand des Grids ausrichten, damit die Kachel buendig mit den uebrigen Kacheln abschliesst und nicht in die Raender laeuft. */ top:0; left:var(--gutter); right:var(--gutter); bottom:var(--section-y); width:auto; height:auto; grid-column:auto !important; grid-row:auto !important; z-index:20; justify-content:flex-start; overflow-y:auto; box-shadow:var(--shadow-soft-2); } .bento-overlay-backdrop{ display:none; } .bento-card--none .bento-card__scrim{ background:linear-gradient(180deg, rgba(18,24,31,0) 38%, rgba(18,24,31,.72) 100%); } .bento-card--gradient .bento-card__scrim{ background:var(--card-tint, linear-gradient(150deg, var(--c-red), var(--c-red-dark))); opacity:.82; } .bento-card--red .bento-card__scrim{ background:linear-gradient(160deg, color-mix(in srgb, var(--c-red) 60%, transparent) 0%, rgba(18,24,31,.7) 100%); } /* Foto (eigenes Vereinsfoto) oder Bogensport-Illustration als Platzhalter - beides über object-fit/preserveAspectRatio "cover" exakt auf die Kachel zugeschnitten und dank overflow:hidden am Elternelement garantiert innerhalb der Kachel geclippt, kann also nie überstehen. */ .bento-card__media{ position:absolute; inset:0; overflow:hidden; } .bento-card__media img, .bento-card__media svg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-soft); } .bento-card:hover .bento-card__media img, .bento-card:hover .bento-card__media svg{ transform:scale(1.02); } /* Karten-Kachel: eingebetteter Kartenausschnitt als Hintergrund. Die Karte selbst ist nicht bedienbar (pointer-events aus), damit der Klick auf die Kachel zuverlaessig funktioniert. */ .bento-card__media--map{ background:var(--c-bg-alt); } .bento-card__media--map iframe{ width:100%; height:100%; border:0; display:block; pointer-events:none; filter:saturate(.85) contrast(.95); } /* Farbflaechen-Kachel: kein Foto, dafuer ein grosses Symbol als Motiv. Lockert das Raster auf, wenn nicht jede Kachel ein Foto tragen soll. */ .bento-card--plain{ background:var(--c-bg-alt); } .bento-card--plain .bento-card__title{ color:var(--c-text); text-shadow:none; } .bento-card--plain .bento-card__excerpt{ color:var(--c-text-muted); text-shadow:none; } .bento-card--plain .bento-card__arrow{ background:rgba(18,24,31,.08); color:var(--c-text); backdrop-filter:none; } .bento-card--plain::after{ box-shadow:inset 0 0 0 1px var(--c-border); } .bento-card__plain{ /* Die Grafik sass mit right:-6% teilweise ausserhalb der Kachel und wurde rechts angeschnitten. Sie steht jetzt vollstaendig innerhalb der Kachel, weiter links, mit sicherem Abstand zum Rand. */ position:absolute; top:50%; right:var(--sp-4, 16px); transform:translateY(-50%); width:min(46%, 176px); max-width:none; aspect-ratio:1/1; color:var(--c-red); opacity:.16; pointer-events:none; } .bento-card__plain svg{ width:100%; height:100%; } /* Farbige Varianten der Farbflaechen-Kachel */ .bento-card--plain.bento-card--red{ background:linear-gradient(150deg, var(--c-red), var(--c-red-dark)); } .bento-card--plain.bento-card--red .bento-card__title{ color:#fff; } .bento-card--plain.bento-card--red .bento-card__excerpt{ color:rgba(255,255,255,.85); } .bento-card--plain.bento-card--red .bento-card__plain{ color:#fff; opacity:.22; } .bento-card--plain.bento-card--red .bento-card__arrow{ background:rgba(255,255,255,.2); color:#fff; } .bento-card--plain.bento-card--red::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); } .bento-card--plain.bento-card--gradient{ background:var(--card-tint, linear-gradient(150deg, var(--c-red), var(--c-red-dark))); } .bento-card--plain.bento-card--gradient .bento-card__title{ color:#fff; } .bento-card--plain.bento-card--gradient .bento-card__excerpt{ color:rgba(255,255,255,.85); } .bento-card--plain.bento-card--gradient .bento-card__plain{ color:#fff; opacity:.22; } /* Kalender-Kachel: kompakte Liste der naechsten Termine. */ .bento-card__cal{ position:relative; z-index:2; display:block; margin-top:14px; } /* Zugeklappt die Kurzliste, aufgeklappt die vollstaendige Uebersicht. */ .bento-card__cal--full{ display:none; } .bento-card.is-expanded .bento-card__cal--short{ display:none; } .bento-card.is-expanded .bento-card__cal--full{ display:block; max-height:none; } .bento-card.is-expanded .bento-cal{ gap:6px; } .bento-cal{ display:flex; flex-direction:column; gap:8px; } .bento-cal__row{ display:flex; align-items:center; gap:10px; } .bento-cal__date{ flex-shrink:0; width:40px; height:40px; border-radius:var(--radius-xs); background:var(--c-red-tint); color:var(--c-red); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; } .bento-cal__day{ font-family:var(--font-display); font-weight:800; font-size:15px; } .bento-cal__mon{ font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; } .bento-cal__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; } .bento-cal__title{ font-size:13px; font-weight:700; color:var(--c-text); } .bento-cal__time{ font-size:11.5px; color:var(--c-text-muted); } .bento-cal__empty{ font-size:13px; color:var(--c-text-muted); } /* Auf Foto-Kacheln muss die Liste hell bleiben. */ .bento-card--has-media:not(.bento-card--plain) .bento-cal__title{ color:#fff; } /* Aufgeklappt ist Platz: Titel duerfen dort vollstaendig stehen. */ .bento-card.is-expanded .bento-cal__title{ white-space:normal; overflow:visible; } .bento-card--has-media:not(.bento-card--plain) .bento-cal__time, .bento-card--has-media:not(.bento-card--plain) .bento-cal__empty{ color:rgba(255,255,255,.8); } .bento-card__scrim{ position:absolute; inset:0; background:linear-gradient(190deg, rgba(18,24,31,.10) 0%, rgba(18,24,31,0) 42%, rgba(18,24,31,.80) 100%); transition:opacity .3s ease; } .bento-card:hover .bento-card__scrim{ opacity:.92; } /* Bündig in der Kachel-Ecke sitzendes Icon-Feld - dezentes Glas-Badge, damit es über jedem Foto lesbar bleibt. Eigene Grafik pro Kachel im Customizer/Bento-Editor hinterlegbar. */ .bento-card__glyph{ position:absolute; top:0; right:0; width:56px; height:56px; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom-left-radius:var(--radius-md); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); } .bento-card__glyph svg{ width:24px; height:24px; } .bento-card__glyph img{ width:100%; height:100%; object-fit:cover; } /* X-Close-Button: übernimmt bei expandierten Kacheln denselben Eckplatz wie das Icon-Feld. */ .bento-card__close{ display:none; position:absolute; top:0; right:0; width:44px; height:44px; z-index:3; align-items:center; justify-content:center; font-size:16px; font-weight:700; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); color:#fff; border-bottom-left-radius:var(--radius-md); } .bento-card[data-click-mode="expand"].is-expanded .bento-card__glyph{ display:none; } .bento-card[data-click-mode="expand"].is-expanded .bento-card__close{ display:flex; } .bento-card__body{ position:relative; z-index:2; display:flex; flex-direction:column; gap:6px; max-width:88%; } .bento-card__title{ font-family:var(--font-display); font-weight:800; font-size:21px; color:#fff; letter-spacing:-0.015em; text-shadow:0 1px 12px rgba(18,24,31,.35); } .bento-card--2x2 .bento-card__title, .bento-card.is-expanded .bento-card__title{ font-size:28px; } .bento-card__excerpt{ font-size:14px; color:rgba(255,255,255,.88); line-height:1.5; text-shadow:0 1px 10px rgba(18,24,31,.3); } .bento-card__arrow{ position:absolute; z-index:2; bottom:22px; right:22px; width:32px; height:32px; border-radius:var(--radius-xs); background:rgba(255,255,255,.18); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; transition:transform .2s ease; } .bento-card:hover .bento-card__arrow{ transform:translateX(3px); } /* Eigener Text statt Pluszeichen am Aufklapp-Symbol. */ .bento-card__arrow--text{ width:auto; padding:0 12px; font-size:12.5px; font-weight:700; letter-spacing:.01em; } .bento-card[data-click-mode="expand"].is-expanded .bento-card__arrow{ display:none; } .bento-card__expand-panel{ position:relative; z-index:2; display:none; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.25); max-width:640px; } .bento-card[data-click-mode="expand"].is-expanded .bento-card__expand-panel{ display:block; } .bento-card__expand-text{ display:block; font-size:14.5px; color:rgba(255,255,255,.9); line-height:1.6; margin-bottom:10px; } /* Schaltflaeche, die erst im aufgeklappten Zustand erscheint. Kein , da die Kachel selbst bereits ein Button ist (verschachtelte interaktive Elemente waeren ungueltiges Markup) - der Klick wird per JavaScript aufgeloest. */ .bento-card__expand-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } .bento-card__expand-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:var(--radius); background:#fff; color:var(--c-text); font-weight:600; font-size:14.5px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; } .bento-card__expand-btn:hover{ box-shadow:var(--shadow-soft-1); } /* ---------- Aufgeklappte Kachel: Lesbarkeit sicherstellen ---------- Die Farbflaechen-Kachel hat einen hellen Hintergrund, erbt aber die weissen Textfarben der Foto-Kacheln. Im aufgeklappten Zustand muss der Text daher wieder dunkel sein, sonst ist er unlesbar. */ .bento-card--plain.is-expanded .bento-card__expand-text{ color:var(--c-text-muted); } .bento-card--plain.is-expanded .bento-card__expand-panel{ border-top-color:var(--c-border); } .bento-card--plain.is-expanded .bento-card__expand-btn{ background:var(--c-red); color:#fff; } .bento-card--plain.is-expanded .bento-card__close{ background:rgba(18,24,31,.08); color:var(--c-text); } /* Das grosse Hintergrundsymbol wuerde den Inhalt ueberlagern. */ .bento-card.is-expanded .bento-card__plain{ display:none; } /* Im aufgeklappten Zustand von oben nach unten lesen, mit Luft zum Rand. */ .bento-card[data-click-mode="expand"].is-expanded{ padding:30px; } .bento-card.is-expanded .bento-card__body{ max-width:100%; } /* Zwischen 761-960px: 2 statt 4 Spalten, damit die Kacheln nicht zu schmal werden. Unter 760px greift der Sticky-Stack (siehe unten). */ @media (max-width:960px){ .bento{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:190px; } .bento-card[data-click-mode="expand"].is-expanded{ grid-column:1 / -1; } } @media (max-width:760px){ /* Auf schmalen Bildschirmen: Sticky-Stack-Effekt statt Grid. Alle Kacheln bekommen dieselbe Höhe, damit der Stapel sauber aussieht - Desktop bleibt bewusst beim klassischen Grid. Das "Im Grid erweitern" bleibt hier als zentriertes Overlay, weil auf schmalen Screens für ein In-Flow-Wachstum schlicht kein Platz ist. */ .bento{ display:flex; flex-direction:column; padding:0 var(--gutter) var(--section-y); } .bento-card{ position:sticky; top:calc(var(--header-offset, var(--header-h)) + 16px); margin-bottom:18px; padding:24px; } /* Im Stapel duerfen die Kacheln deutlich hoeher sein: nahezu quadratisch, damit die Fotos zur Geltung kommen. Ueber das Seitenverhaeltnis statt einer festen Hoehe, damit es auf allen Geraetebreiten stimmig bleibt. */ .bento-card--1x1, .bento-card--2x1, .bento-card--1x2, .bento-card--2x2{ grid-column:unset; grid-row:unset; min-height:clamp(230px, 64vw, 300px); aspect-ratio:auto; } .bento-card--has-media:not(.bento-card--plain){ min-height:clamp(280px, 86vw, 380px); } .bento-card.bento-card--content-calendar{ min-height:0; } .bento-card.bento-card--map{ min-height:340px; } .bento-card--content-calendar{ justify-content:flex-start; } .bento-card:hover{ transform:none; } .bento-card:nth-child(1){ z-index:1; } .bento-card:nth-child(2){ z-index:2; } .bento-card:nth-child(3){ z-index:3; } .bento-card:nth-child(4){ z-index:4; } .bento-card:nth-child(5){ z-index:5; } .bento-card:nth-child(6){ z-index:6; } .bento-card:nth-child(7){ z-index:7; } .bento-card[data-click-mode="expand"].is-expanded{ position:fixed; top:50%; bottom:auto; left:16px; right:16px; margin:0; transform:translateY(-50%); grid-column:auto; grid-row:auto; transition:none; animation:bentoPopM .26s var(--ease-soft) both; width:auto; /* Wichtig: das quadratische Format der Stapel-Kacheln darf hier NICHT greifen, sonst wird der Inhalt oben abgeschnitten. */ aspect-ratio:auto; min-height:0; height:auto; max-height:82vh; overflow-y:auto; padding:24px; z-index:1001; box-shadow:var(--glass-highlight), var(--shadow-soft-2); } /* Von oben nach unten lesen statt am unteren Rand ausgerichtet. */ .bento-card[data-click-mode="expand"].is-expanded .bento-card__body{ margin-top:0; } .bento-card.is-expanded .bento-card__title{ font-size:20px; } /* Kompakter, damit der Inhalt ohne Scrollen auf den Bildschirm passt. */ .bento-card.is-expanded .bento-card__excerpt{ display:none; } .bento-card.is-expanded .bento-card__cal{ margin-top:10px; } .bento-card.is-expanded .bento-cal{ gap:4px; } .bento-card.is-expanded .bento-cal__row{ gap:8px; } .bento-card.is-expanded .bento-cal__date{ width:34px; height:34px; } .bento-card.is-expanded .bento-cal__day{ font-size:13px; } .bento-card.is-expanded .bento-cal__mon{ font-size:8.5px; } .bento-card.is-expanded .bento-cal__title{ font-size:12.5px; } .bento-card.is-expanded .bento-cal__time{ font-size:11px; } .bento-card.is-expanded .bento-card__expand-panel{ margin-top:10px; padding-top:10px; } .bento-card.is-expanded .bento-card__expand-text{ font-size:13px; line-height:1.45; } .bento-card.is-expanded .bento-card__expand-actions{ margin-top:10px; } /* Auf dem Handy nur die naechsten Termine, der Rest steht auf der Terminseite. Die Schaltflaeche dorthin bleibt immer sichtbar. */ .bento-card.is-expanded .bento-cal__row:nth-child(n+5){ display:none; } .bento-overlay-backdrop{ display:block; position:fixed; inset:0; background:rgba(18,24,31,.42); opacity:0; pointer-events:none; z-index:1000; transition:opacity .25s var(--ease-soft); } .bento-overlay-backdrop.is-visible{ opacity:1; pointer-events:auto; } body.bento-overlay-open{ overflow:hidden; } } /* ---------- Standard content page ---------- */ .page-hero{ padding:var(--section-y) 0 var(--section-y-tight); } .page-hero__inner{ max-width:820px; } .page-hero h1{ font-size:clamp(30px,5vw,46px); letter-spacing:-0.02em; } .page-hero__media{ margin:26px 0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); } .page-hero__media img{ width:100%; } .page-hero__media--placeholder{ height:320px; position:relative; overflow:hidden; } .page-hero__media--placeholder svg, .page-hero__media--placeholder img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .content-prose p{ font-size:16.5px; } .content-prose{ max-width:760px; } .page-hero__cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } /* ---------- Standard-Seiten-Layout: Inhalt + Sidebar ---------- */ .page-layout{ display:flex; align-items:flex-start; gap:clamp(28px, 4vw, 48px); padding:var(--section-y-tight) var(--gutter); } .page-layout__main{ flex:1 1 620px; min-width:0; max-width:720px; } .page-layout__sidebar{ flex:0 0 280px; position:sticky; top:calc(var(--header-offset, var(--header-h)) + 24px); } .sidebar-card{ background:var(--c-bg-alt); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:26px; } .sidebar-card h3{ font-size:15px; margin-bottom:16px; } .sidebar-card__list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:14px; } .sidebar-card__list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--c-text-muted); line-height:1.5; } .sidebar-card__list a{ color:var(--c-text-muted); text-decoration:underline; text-underline-offset:2px; } .sidebar-card__icon{ flex-shrink:0; width:20px; height:20px; color:var(--c-red); margin-top:1px; } .sidebar-card__icon svg{ width:100%; height:100%; } .sidebar-card__btn{ width:100%; justify-content:center; } @media (max-width:960px){ .page-layout{ flex-direction:column; } .page-layout__sidebar{ flex:1 1 auto; width:100%; position:static; } .sidebar-card{ max-width:420px; } } /* ---------- Nächste Schritte (Abschluss jeder Standardseite) ---------- */ .next-steps{ padding:0 var(--gutter) var(--section-y); } .next-steps > .eyebrow{ margin-bottom:18px; } .next-steps__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; } .next-steps__card{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:20px 22px; font-weight:700; box-shadow:var(--shadow-soft-1); transition:transform .2s var(--ease-soft), box-shadow .2s ease, border-color .2s ease; } .next-steps__card:hover{ box-shadow:var(--shadow-soft-2); border-color:transparent; } .next-steps__card--red{ background:linear-gradient(135deg, var(--c-red), var(--c-red-dark)); border-color:var(--c-red); color:#fff; } .next-steps__title{ font-size:15px; } .next-steps__arrow{ flex-shrink:0; width:30px; height:30px; border-radius:var(--radius-xs); background:var(--c-bg-alt); display:flex; align-items:center; justify-content:center; transition:transform .2s ease; } .next-steps__card--red .next-steps__arrow{ background:rgba(255,255,255,.2); } .next-steps__card:hover .next-steps__arrow{ transform:translateX(3px); } @media (max-width:900px){ .next-steps__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .next-steps__grid{ grid-template-columns:1fr; } } /* ---------- Kontakt ---------- */ .kontakt-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 20px); padding-bottom:var(--section-y); } .kontakt-card{ background:var(--c-surface); border:1px solid var(--c-border); border-top:3px solid var(--c-border); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-top-color .2s ease; } .kontakt-card:hover{ box-shadow:var(--shadow-md); border-top-color:var(--c-red); } .kontakt-card--red{ background:linear-gradient(135deg, var(--c-red), var(--c-red-dark)); border-top-color:var(--c-red); color:#fff; } .kontakt-card--red h3, .kontakt-card--red p{ color:#fff; } .kontakt-card--red a{ text-decoration:underline; } @media (max-width:860px){ .kontakt-grid{ grid-template-columns:1fr; } } /* ---------- Mitgliedschaft ---------- */ .steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-bottom:20px; } .steps-card{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:24px; transition:transform .2s ease, box-shadow .2s ease; } .steps-card:hover{ box-shadow:var(--shadow-md); } .steps-card--red{ background:linear-gradient(135deg, var(--c-red), var(--c-red-dark)); color:#fff; } .steps-card--red h3, .steps-card--red p{ color:#fff; } .steps-num{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-xs); background:var(--c-red-tint); color:var(--c-red); font-weight:800; margin-bottom:12px; } .steps-card--red .steps-num{ background:rgba(255,255,255,.2); color:#fff; } @media (max-width:900px){ .steps-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .steps-grid{ grid-template-columns:1fr; } } .cta-banner{ padding:0 0 var(--section-y); } .cta-banner__inner{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--c-bg-alt), #fff); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:52px 32px; text-align:center; } .cta-banner__inner::before{ content:''; position:absolute; top:-40%; right:-10%; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--c-red) 12%, transparent), transparent 70%); } .cta-banner__inner h2{ position:relative; margin-bottom:18px; } .cta-banner__inner .btn{ position:relative; } /* ---------- Footer ---------- Standardmäßig ohne dekorative Grafik - schlicht, nur Wortmarke + Text. Optional per Customizer wieder einblendbar (Design → Customizer → Footer). */ .site-footer{ background:var(--c-surface); border-top:1px solid var(--c-border); margin-top:40px; position:relative; } .site-footer::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--c-red), color-mix(in srgb, var(--c-red) 30%, transparent) 60%, transparent); } /* Footer als echtes Raster statt space-between-Flex: die Spalten stehen damit auf jeder Breite an derselben Stelle und rutschen im Querformat nicht mehr an die Bildschirmraender auseinander. */ .site-footer__inner{ display:grid; grid-template-columns:minmax(220px, 1.4fr) repeat(2, minmax(140px, 1fr)) minmax(200px, 1.2fr); align-items:start; gap:var(--sp-5) clamp(24px, 4vw, 40px); padding:var(--section-y-tight) var(--gutter) var(--sp-5); } .site-footer__brand{ display:flex; align-items:center; gap:var(--sp-3); max-width:34ch; } .site-footer__brand strong{ font-family:var(--font-display); } .site-footer__brand p{ margin:2px 0 0; font-size:13px; } .site-footer__nav ul{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0; padding:0; } .site-footer__nav a:hover{ color:var(--c-red); } .site-footer__heading{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-muted); margin-bottom:14px; } .site-footer__contact p{ margin:0 0 6px; font-size:14px; } .site-footer__social{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; max-width:280px; } .social-badge{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-sm); background:var(--c-bg-alt); color:var(--c-text-muted); transition:background .15s ease, color .15s ease, transform .15s ease; } .social-badge svg{ width:18px; height:18px; } .social-badge:hover{ background:var(--c-red); color:#fff; } .site-footer__brand .site-logo__mark img{ max-height:30px; max-width:110px; width:auto; height:auto; object-fit:contain; display:block; } .site-footer__bottom{ border-top:1px solid var(--c-border); } .site-footer__bottom-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-4) var(--gutter); font-size:.8125rem; color:var(--c-text-muted); } /* Icons in der Kachel-Ecke abschaltbar (Customizer: Startseite - Kacheln). */ body.bento-no-icons .bento-card__glyph{ display:none; } /* Mobil-Darstellung "Karten": schlicht untereinander statt gestapelt. */ @media (max-width:760px){ /* relative statt static: die Medienflaeche liegt absolut in der Kachel und braucht diesen Bezugspunkt, sonst spannt sie sich ueber das ganze Raster. */ body.bento-mobile-cards .bento-card{ position:relative; margin-bottom:0; } body.bento-mobile-cards .bento{ gap:14px; } } /* ---------- Mobile-Feinschliff ---------- Groessere Beruehrungsflaechen und weniger gedraengte Buttons auf kleinen Bildschirmen. 44px ist die gaengige Mindestgroesse fuer sicher treffbare Schaltflaechen. */ @media (max-width:600px){ .btn{ min-height:44px; padding:12px 20px; } .btn--lg{ min-height:50px; } /* Die beiden Hero-Buttons nebeneinander werden auf schmalen Displays schnell zu eng, daher volle Breite untereinander. */ .hero__cta{ flex-direction:column; align-items:stretch; } .hero__cta .btn{ width:100%; } .social-badge{ width:42px; height:42px; } /* Footer kompakt: zwei Spalten statt vier gestapelter Bloecke, kleinere Schrift und deutlich weniger Abstand. Desktop bleibt unveraendert. */ .site-footer__inner{ grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-4); padding:var(--sp-6) var(--gutter) var(--sp-4); } .site-footer__brand{ grid-column:1 / -1; max-width:none; } .site-footer__brand p{ font-size:12px; } .site-footer__contact{ grid-column:1 / -1; } .site-footer__heading{ margin-bottom:8px; font-size:11.5px; } .site-footer__nav ul{ gap:6px; } .site-footer__nav a{ font-size:14px; } .site-footer__contact p{ margin:0 0 4px; font-size:13px; } .site-footer__social{ margin-top:10px; } .site-footer__bottom-inner{ padding:12px var(--gutter); font-size:12px; } .next-steps__card{ min-height:56px; } /* Lange E-Mail-Adressen und Ortsangaben nicht ueber den Rand schieben. */ .sidebar-card__list a, .site-footer__contact a{ overflow-wrap:anywhere; } } /* ---------- Responsive nav switch ---------- Bewusst breiter als 960px, damit auch Tablets (z. B. iPad ~1024px) den Hamburger + das untereinander gestapelte Menü bekommen statt eines eng umbrechenden Pill-Menüs. */ @media (max-width:1080px){ .site-nav{ display:none; } .site-header__actions{ display:none; } .nav-toggle{ display:flex; } .mobile-nav{ display:block; } } @media (min-width:1081px){ .site-header__actions .btn--ghost{ display:inline-flex; } } /* ---------- Utility ---------- */ .artemis-muted{ color:var(--c-text-muted); font-size:14px; } /* ---------- Scroll-Reveal (Fade-In-Up) ---------- Progressive Enhancement: Ohne JS/bei reduzierter Bewegung bleibt der Inhalt normal sichtbar. Erst per JS wird der "hidden"-Zustand gesetzt und beim Eintritt in den Viewport per IntersectionObserver wieder aufgelöst (assets/js/main.js). Kein Layout-Shift, keine SEO-Nachteile. */ .reveal{ opacity:1; transform:none; } .reveal.reveal--hidden{ opacity:0; transform:translateY(22px); } .reveal.reveal--visible{ opacity:1; transform:translateY(0); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft); transition-delay:calc(var(--reveal-delay, 0) * 70ms); } @media (prefers-reduced-motion: reduce){ .reveal.reveal--hidden{ opacity:1; transform:none; } } /* ---------- Glassmorphism-Utility ---------- */ .glass{ background:color-mix(in srgb, var(--c-surface) 72%, transparent); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border:var(--glass-border); box-shadow:var(--glass-highlight), var(--shadow-soft-1); } /* ---------- Features ("Warum Artemis") ---------- */ .features{ padding:var(--section-y) var(--gutter); } .features__head{ max-width:520px; margin-bottom:44px; } .features__head h2{ font-size:clamp(26px, 3.4vw, 38px); letter-spacing:-0.01em; } .features__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .feature-card{ position:relative; padding-top:8px; border-top:2px solid var(--c-border); transition:border-color .2s ease; } .feature-card:hover{ border-color:var(--c-red); } .feature-card__num{ display:block; font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--c-text-muted); letter-spacing:.05em; margin-bottom:14px; } .feature-card h3{ font-size:18px; margin-bottom:8px; } .feature-card p{ font-size:14.5px; line-height:1.6; } @media (max-width:900px){ .features__grid{ grid-template-columns:1fr 1fr; row-gap:32px; } } @media (max-width:560px){ .features__grid{ grid-template-columns:1fr; } } /* ---------- Beitrags-Galerie (Startseite) ---------- Modernes Overlay-Grid: Bild füllt die ganze Kachel, Verlauf am unteren Rand für Lesbarkeit, Kategorie als gestyltes Badge (nie als reiner Text), erste Kachel größer hervorgehoben. */ .agallery{ padding:0 var(--gutter) var(--section-y); } .agallery__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; flex-wrap:wrap; } .agallery__head h2{ margin:0; font-size:clamp(26px, 3.4vw, 38px); letter-spacing:-0.01em; } .agallery__head .eyebrow{ margin-bottom:8px; } .agallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:200px; gap:18px; } .agallery-card{ position:relative; display:block; grid-column:span 1; grid-row:span 1; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft-1); transition:transform .3s var(--ease-soft), box-shadow .3s ease; } .agallery-card--feature{ grid-column:span 2; grid-row:span 2; } .agallery-card:hover{ box-shadow:var(--shadow-soft-2); } .agallery-card__media{ position:absolute; inset:0; display:block; background:var(--c-bg-alt); overflow:hidden; } .agallery-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-soft); } .agallery-card:hover .agallery-card__media img{ transform:scale(1.06); } .agallery-card__placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--c-text-muted); } .agallery-card__placeholder svg{ width:32px; height:32px; opacity:.4; } .agallery-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(18,24,31,.8) 100%); pointer-events:none; } .agallery-card__badge{ position:absolute; top:14px; left:14px; z-index:2; background:color-mix(in srgb, var(--c-red) 90%, transparent); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-xs); } .agallery-card__body{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; display:flex; flex-direction:column; gap:3px; } .agallery-card__title{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:14.5px; line-height:1.3; } .agallery-card--feature .agallery-card__title{ font-size:20px; } .agallery-card__date{ color:rgba(255,255,255,.75); font-size:11px; } @media (max-width:960px){ .agallery-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:640px){ .agallery-grid{ grid-template-columns:1fr; grid-auto-rows:220px; } .agallery-card--feature{ grid-column:span 1; grid-row:span 1; } } /* ---------- Fotogalerie ---------- */ .galerie-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(10px, 1.6vw, 14px); padding-bottom:var(--section-y); } .galerie-tile{ aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; } .galerie-tile img{ width:100%; height:100%; object-fit:cover; } .galerie-tile--placeholder{ background:var(--c-bg-alt); border:1px dashed var(--c-border); display:flex; align-items:center; justify-content:center; } .galerie-tile--placeholder svg{ width:32px; height:32px; opacity:.5; } @media (max-width:860px){ .galerie-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:560px){ .galerie-grid{ grid-template-columns:repeat(2, 1fr); } } /* ---------- News-/Beitragsliste ---------- */ .news-list{ display:flex; flex-direction:column; gap:10px; padding-bottom:var(--section-y); } .news-item{ display:flex; align-items:baseline; gap:18px; background:var(--c-surface); border:1px solid var(--c-border); border-left:3px solid transparent; border-radius:var(--radius-md); padding:18px 20px; transition:box-shadow .15s ease, transform .15s ease, border-left-color .15s ease; } .news-item:hover{ box-shadow:var(--shadow-md); border-left-color:var(--c-red); } .news-item__date{ flex-shrink:0; font-size:13px; font-weight:700; color:var(--c-red); width:88px; } .news-item__body{ display:flex; flex-direction:column; gap:4px; min-width:0; } .news-item__title{ font-weight:700; } .news-item__excerpt{ font-size:14px; color:var(--c-text-muted); } @media (max-width:560px){ .news-item{ flex-direction:column; gap:6px; } .news-item__date{ width:auto; } } /* ========================================================= v1.8.0 - Systemischer Feinschliff Footer (Querformat), Karten-Navigation, Bento-Fuellung, dynamische Typografie und einheitliche Interaktionszustaende. Farben bleiben unveraendert - nur neutrale Funktionstoene. ========================================================= */ /* ---------- Footer: Tablet & Querformat ---------- Zwischen 601 und 1024px hat der bisherige Flex-Footer die Spalten ueber die volle Breite verteilt; im Querformat auf dem Handy standen Marke und Navigation dadurch weit auseinander. Jetzt: klares 2- bzw. 3-Spalten-Raster mit fester Ausrichtung links. */ @media (max-width:1024px) and (min-width:601px){ .site-footer__inner{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-5) var(--sp-6); } .site-footer__brand{ grid-column:1 / -1; } .site-footer__contact{ grid-column:3 / 4; } } /* Handy im Querformat: sehr wenig Hoehe, dafuer Breite. Vier schmale Spalten in einer Zeile, kompakte Abstaende, kein Umbruch-Chaos. */ @media (max-height:520px) and (orientation:landscape){ .site-footer{ margin-top:var(--sp-6); } .site-footer__inner{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-4); padding:var(--sp-5) var(--gutter) var(--sp-4); align-items:start; } .site-footer__brand{ grid-column:auto; flex-direction:column; align-items:flex-start; gap:var(--sp-1); } .site-footer__contact{ grid-column:auto; } .site-footer__heading{ margin-bottom:var(--sp-2); } .site-footer__nav ul{ gap:var(--sp-1); } .site-footer__bottom-inner{ padding:var(--sp-2) var(--gutter); } } /* Sehr schmale Geraete: eine Spalte, Wichtiges (Kontakt) zuletzt und damit in der Daumen-Sichtzone. */ @media (max-width:400px){ .site-footer__inner{ grid-template-columns:1fr; gap:var(--sp-5); } .site-footer__nav, .site-footer__contact{ grid-column:1 / -1; } } /* ---------- Karten-Kachel: bedienbar + Navigation ---------- Die Karte laesst sich jetzt bewegen und zoomen. Damit der Klick auf die Kachel nicht verloren geht, liegt darueber eine Aktionsleiste mit einem Button, der je nach Geraet Apple Karten oder Google Maps oeffnet (Aufloesung passiert in main.js). */ /* Die Karte ist fest auf die hinterlegten Koordinaten eingestellt und nimmt selbst keine Eingaben an: sonst faengt sie beim Scrollen den Finger bzw. das Mausrad ab und die Seite bleibt haengen. Navigiert wird ueber den Button darunter. */ .bento-card--map .bento-card__media--map iframe{ pointer-events:none; filter:none; } .bento-card--map .bento-card__scrim{ pointer-events:none; } .bento-card--map .bento-card__body{ pointer-events:none; } .bento-map__actions{ position:absolute; z-index:6; left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4); display:flex; flex-wrap:wrap; gap:var(--sp-2); } .bento-map__btn{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-4); border-radius:var(--radius-sm); background:var(--c-red); color:#fff; font:600 .875rem/1 var(--font-body); cursor:pointer; border:0; box-shadow:var(--shadow-soft-1); transition:background .2s ease, transform .15s var(--ease-soft); } .bento-map__btn--ghost{ background:var(--c-surface); color:var(--c-text); } .bento-map__btn:hover{ } .bento-map__btn:active{ transform:translateY(0); } .bento-map__btn svg{ width:18px; height:18px; flex:none; } @media (max-width:760px){ .bento-map__actions{ left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); } .bento-map__btn{ flex:1 1 auto; justify-content:center; } } /* ---------- Bento: immer ein gefuelltes Raster ---------- Reststuecke einer Zeile werden serverseitig auf die vorhandenen Kacheln verteilt (siehe artemis_bento_balance_spans). Dafuer braucht es Breiten bis Spannweite 4. */ .bento-card--fill2{ grid-column:span 2; } .bento-card--fill3{ grid-column:span 3; } .bento-card--fill4{ grid-column:span 4; } @media (max-width:960px){ /* Nur zwei Spalten - alles was breiter war, wird volle Breite. */ .bento-card--fill3, .bento-card--fill4{ grid-column:span 2; } } @media (max-width:760px){ .bento-card--fill2, .bento-card--fill3, .bento-card--fill4{ grid-column:unset; } } /* ---------- Dynamische Typografie ---------- Alle Groessen relativ (rem/clamp), damit vergroesserte Systemschrift auf dem Smartphone das Layout nicht zerreisst. */ body{ font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); } .hero__lead{ font-size:clamp(1.0625rem, 1rem + 0.5vw, 1.1875rem); line-height:1.65; } .site-footer__brand p{ font-size:.8125rem; } .site-footer__contact p{ font-size:.875rem; } .site-footer__nav a{ font-size:.9375rem; } .site-footer__heading{ font-size:.78125rem; } .bento-card__title{ font-size:clamp(1.125rem, 1rem + 1vw, 1.375rem); } .bento-card--2x2 .bento-card__title, .bento-card.is-expanded .bento-card__title{ font-size:clamp(1.375rem, 1.1rem + 1.6vw, 1.75rem); } .bento-card__excerpt{ font-size:clamp(.875rem, .84rem + .2vw, .9375rem); } /* ---------- Einheitliche Interaktionszustaende ---------- Hover, Active und Focus verhalten sich ueber alle Komponenten gleich. */ .btn:active, .bento-map__btn:active, .social-badge:active{ transform:translateY(1px); } .bento-card:not(.is-expanded):focus-visible{ outline:2px solid var(--c-red); outline-offset:3px; } .bento-card.is-expanded:focus, .bento-card.is-expanded:focus-visible{ outline:none; box-shadow:none; } .btn:focus-visible, .bento-map__btn:focus-visible, .social-badge:focus-visible, .site-footer a:focus-visible{ outline:2px solid var(--c-red); outline-offset:3px; border-radius:var(--radius-sm); } /* Touch-Mindestflaeche 44px auf allen Bedienelementen. */ @media (pointer:coarse){ .site-footer__nav a, .site-footer__contact a{ display:inline-block; padding:var(--sp-1) 0; min-height:32px; } .btn, .bento-map__btn{ min-height:44px; } } /* ========================================================= v1.9.0 - Bestandsseiten im aktuellen Stil Alte Seiten, die mit dem Block-Editor oder klassisch angelegt wurden, sollen ohne Nacharbeit dieselbe Typografie, dieselben Abstaende und dieselben Zustaende bekommen wie neue Seiten. Deshalb wird hier zusaetzlich zu .content-prose auch der Standard-Ausgabecontainer von WordPress mit angesprochen. ========================================================= */ .content-prose, .entry-content, .page-content{ max-width:72ch; font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height:1.7; color:var(--c-text); } .content-prose > * + *, .entry-content > * + *, .page-content > * + *{ margin-top:var(--sp-5); } .content-prose h2, .entry-content h2, .page-content h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em; font-size:clamp(1.375rem, 1.15rem + 1vw, 1.75rem); margin-top:var(--sp-8); } .content-prose h3, .entry-content h3, .page-content h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.125rem, 1rem + .6vw, 1.375rem); margin-top:var(--sp-6); } .content-prose a, .entry-content a, .page-content a{ color:var(--c-red); text-decoration:underline; text-underline-offset:3px; } .content-prose a:hover, .entry-content a:hover, .page-content a:hover{ color:var(--c-red-dark); } .content-prose ul, .content-prose ol, .entry-content ul, .entry-content ol{ padding-left:var(--sp-5); } .content-prose li + li, .entry-content li + li{ margin-top:var(--sp-2); } .content-prose img, .entry-content img, .page-content img{ max-width:100%; height:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-soft-1); } .content-prose blockquote, .entry-content blockquote{ margin-left:0; padding:var(--sp-4) var(--sp-5); border-left:3px solid var(--c-red); background:var(--c-bg-alt); border-radius:var(--radius-sm); color:var(--c-text-muted); } .content-prose table, .entry-content table{ width:100%; border-collapse:collapse; font-size:.9375rem; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-sm); overflow:hidden; } .content-prose th, .content-prose td, .entry-content th, .entry-content td{ padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--c-border); text-align:left; } .content-prose th, .entry-content th{ background:var(--c-bg-alt); font-weight:700; } /* Breite Tabellen auf dem Handy scrollbar statt ueberlaufend. */ @media (max-width:760px){ .content-prose table, .entry-content table{ display:block; overflow-x:auto; } } /* Klassische WP-Buttons erben die Theme-Optik. */ .entry-content .wp-block-button__link{ background:var(--c-red); color:#fff; border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-5); min-height:44px; text-decoration:none; display:inline-flex; align-items:center; } .entry-content .wp-block-button__link:hover{ background:var(--c-red-dark); color:#fff; } /* ========================================================= v2.0.0 - Bento: volle Zeilen, nichts abgeschnitten ========================================================= */ /* Die Breite kommt jetzt ausschliesslich aus dem Zeilenausgleich (fill1..fill4), Zeilenspannen entfallen. Dadurch ist jede Zeile buendig gefuellt. */ .bento-card--fill1{ grid-column:span 1; grid-row:span 1; } .bento-card--fill2{ grid-column:span 2; grid-row:span 1; } .bento-card--fill3{ grid-column:span 3; grid-row:span 1; } .bento-card--fill4{ grid-column:span 4; grid-row:span 1; } /* Kein dense-Flow mehr: er wuerde Kacheln umsortieren und die berechnete Zeilenaufteilung durcheinanderbringen. */ .bento{ grid-auto-flow:row; } /* Zeilen duerfen mitwachsen: die Hoehe ist eine Mindesthoehe, kein fester Wert. So wird kein Titel und keine Terminliste abgeschnitten. */ .bento{ grid-auto-rows:minmax(var(--bento-row-h, 230px), auto); } /* Inhalt vollstaendig sichtbar: der Textblock darf die ganze Breite nutzen (der Pfeil bekommt stattdessen Abstand per padding) und wird nicht mehr auf 88 % beschnitten. */ .bento-card__body{ max-width:100%; padding-right:56px; } .bento-card__title{ overflow-wrap:anywhere; } .bento-card__excerpt{ overflow-wrap:anywhere; } /* Terminliste in der Kalender-Kachel: vollstaendig lesbar statt ueberlaufend, notfalls scrollbar innerhalb der Kachel. */ .bento-card__cal{ max-height:none; } .bento-card--fill1 .bento-card__cal .bento-cal{ gap:6px; } .bento-cal__title{ overflow-wrap:anywhere; } @media (min-width:961px){ .bento-card{ padding:24px; } .bento-card--fill3, .bento-card--fill4{ padding:28px 32px; } } /* Tablet: zwei Spalten. Alles, was auf dem Desktop breiter als eine Spalte war, nimmt hier die volle Zeile ein - damit bleibt auch hier keine halbe Zeile leer. */ @media (max-width:960px){ .bento{ grid-auto-rows:minmax(190px, auto); } .bento-card--fill1{ grid-column:span 1; } .bento-card--fill2, .bento-card--fill3, .bento-card--fill4{ grid-column:span 2; } } @media (max-width:760px){ .bento-card--fill1, .bento-card--fill2, .bento-card--fill3, .bento-card--fill4{ grid-column:unset; grid-row:unset; } /* Auf dem Handy bleiben die Kacheln quadratisch - Rechtecke wirken im Stapel unruhig. Der Inhalt wird dafuer begrenzt statt die Kachel zu strecken. */ .bento-card--1x1, .bento-card--2x1, .bento-card--1x2, .bento-card--2x2{ aspect-ratio:1 / 1; min-height:0; } .bento-card__body{ padding-right:52px; } } /* ---------- Kontakt: Anfahrt ---------- */ .kontakt-map{ padding-bottom:var(--section-y); } .kontakt-map__heading{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.25rem, 1.1rem + .8vw, 1.625rem); margin:0 0 var(--sp-4); } .kontakt-map__frame{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--c-border); box-shadow:var(--shadow-soft-1); aspect-ratio:16 / 9; } .kontakt-map__frame iframe{ width:100%; height:100%; border:0; display:block; } .kontakt-map__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4); } @media (max-width:600px){ .kontakt-map__frame{ aspect-ratio:4 / 3; } .kontakt-map__actions .btn{ flex:1 1 100%; justify-content:center; } } /* ---------- Beitragsliste: Blaettern und klare Aktion ---------- */ .news-item__more{ display:inline-block; margin-top:var(--sp-2); font-size:.875rem; font-weight:700; color:var(--c-red); } .news-item:hover .news-item__more{ text-decoration:underline; text-underline-offset:3px; } .news-pager{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--c-border); } .news-pager .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 var(--sp-3); border:1px solid var(--c-border); border-radius:var(--radius-xs); font-size:.875rem; font-weight:600; color:var(--c-text-muted); background:var(--c-surface); } .news-pager .page-numbers:hover{ border-color:var(--c-red); color:var(--c-red); } .news-pager .page-numbers.current{ background:var(--c-red); border-color:var(--c-red); color:#fff; } .galerie-hint{ grid-column:1 / -1; margin-top:var(--sp-4); } /* Farbflaechen-Kachel: Grafik weiter nach innen, damit sie auf keiner Breite am rechten Rand abgeschnitten wird. Auf breiten Kacheln darf sie etwas kleiner bleiben, auf schmalen rueckt sie weiter ein. */ .bento-card--fill2 .bento-card__plain{ width:min(34%, 168px); } .bento-card--fill3 .bento-card__plain, .bento-card--fill4 .bento-card__plain{ width:min(22%, 160px); right:var(--sp-6, 32px); } @media (max-width:760px){ .bento-card__plain{ width:min(42%, 150px); right:var(--sp-4, 16px); } } /* ========================================================= v2.1.0 - Karte, Aufklapp-Verhalten, Skalierung ========================================================= */ /* ---------- Karten-Kachel: Ecken und Lesbarkeit ---------- Das iframe hat eigene, eckige Ecken und lag deshalb sichtbar ueber der abgerundeten Kachel. Medien-Huelle und iframe erben jetzt den Radius, und die Huelle clippt selbst. */ .bento-card__media--map{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; -webkit-mask-image:-webkit-radial-gradient(#fff, #000); /* Safari: erzwingt das Clipping */ transform:translateZ(0); } .bento-card__media--map iframe{ width:100%; height:100%; border:0; display:block; border-radius:inherit; } .bento-card--map{ overflow:hidden; } /* Der Navigations-Button liegt unten - der Text bekommt darueber Platz, damit nichts dahinter verschwindet. */ .bento-card--map .bento-card__body{ padding-bottom:64px; } .bento-card--map.is-expanded .bento-card__body{ padding-bottom:72px; } @media (max-width:760px){ .bento-card--map .bento-card__body{ padding-bottom:60px; } } /* ---------- Aufklapp-Symbol ---------- Einheitliches Plus statt Pfeil: gleiche Groesse wie das Icon-Feld, klar als "mehr anzeigen" lesbar, kein Weiterleitungs-Pfeil. */ .bento-card[data-click-mode="expand"] .bento-card__arrow{ width:38px; height:38px; bottom:18px; right:18px; /* Abgerundetes Quadrat statt Kreis - passend zur Formensprache der Kacheln und Buttons. */ border-radius:12px; font-size:22px; font-weight:400; line-height:1; padding:0; background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); transition:transform .25s var(--ease-soft), background .2s ease; } .bento-card[data-click-mode="expand"]:hover .bento-card__arrow{ transform:none; background:rgba(255,255,255,.32); } .bento-card--plain[data-click-mode="expand"] .bento-card__arrow{ background:rgba(18,24,31,.08); color:var(--c-text); box-shadow:inset 0 0 0 1px var(--c-border); } .bento-card[data-click-mode="expand"] .bento-card__arrow--text{ width:auto; height:38px; border-radius:999px; padding:0 16px; font-size:.8125rem; font-weight:700; } /* Auf der Karten-Kachel sitzt das Plus oben, weil unten der Navigations-Button steht. */ .bento-card--map .bento-card__arrow{ bottom:auto; top:18px; right:18px; } .bento-card--map .bento-card__glyph{ display:none; } /* ---------- Aufgeklappt: Inhalt fuellt die Flaeche ---------- Vorher blieb vor allem in der Kalender-Kachel viel Leerraum. Der Inhalt verteilt sich jetzt ueber die volle Breite und waechst mit. */ .bento-card[data-click-mode="expand"].is-expanded{ display:flex; flex-direction:column; justify-content:flex-start; } .bento-card.is-expanded .bento-card__expand-panel{ max-width:none; } .bento-card.is-expanded .bento-card__cal--full{ flex:1 1 auto; margin-top:var(--sp-4); } .bento-card.is-expanded .bento-card__cal--full .bento-cal{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--sp-3) var(--sp-5); align-content:start; } .bento-card.is-expanded .bento-card__expand-actions{ margin-top:auto; padding-top:var(--sp-5); } /* Die Karte fuellt aufgeklappt die ganze Kachel - mit den ueblichen abgerundeten Ecken. */ .bento-card--map.is-expanded .bento-card__media--map{ inset:0; border-radius:inherit; } .bento-card--map.is-expanded .bento-map__actions{ left:var(--sp-6); right:var(--sp-6); bottom:var(--sp-6); } /* Weiches Wachsen: Groesse und Innenabstaende werden animiert, der Inhalt blendet gestaffelt ein - vergleichbar mit dem Aufziehen einer Kachel auf dem iPhone. */ .bento-card{ transition:transform .28s var(--ease-soft), box-shadow .28s var(--ease-soft), padding .28s var(--ease-soft), border-radius .28s var(--ease-soft); } .bento-card.is-expanded .bento-card__expand-panel, .bento-card.is-expanded .bento-card__cal--full{ animation:bentoFadeUp .32s var(--ease-soft) both; } @keyframes bentoFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .bento-card, .bento-card *{ animation:none !important; transition:none !important; } } /* Morph-Animation ueber die View-Transitions-API (siehe main.js). */ /* ---------- Skalierung auf kleineren Desktops (13") ---------- Ziel: das Raster passt vollstaendig ins Sichtfeld, die Inhalte werden dabei aber nicht kleiner, sondern proportional lesbarer. Zeilenhoehe und Abstaende schrumpfen, Schrift bleibt ueber clamp() stabil. */ @media (min-width:961px){ .bento{ --bento-row-h:clamp(180px, 17vw, 240px); } } @media (min-width:961px) and (max-width:1440px){ .bento{ gap:clamp(12px, 1.4vw, 18px); } .bento-card{ padding:clamp(18px, 1.7vw, 24px); } .bento-card__glyph{ width:48px; height:48px; } .bento-card__glyph svg{ width:21px; height:21px; } .bento-card__title{ font-size:clamp(1.0625rem, .8rem + .7vw, 1.3125rem); } .bento-card__excerpt{ font-size:clamp(.875rem, .8rem + .25vw, .9375rem); } } /* Sehr flache Fenster (z. B. 13" im Querformat): Zeilen niedriger, damit das Raster ohne Scrollen erfassbar bleibt. */ @media (min-width:961px) and (max-height:820px){ .bento{ --bento-row-h:clamp(160px, 22vh, 210px); } } /* ---------- Inline-Bearbeitung der Kacheln ---------- Nur fuer angemeldete Personen mit Bearbeitungsrecht sichtbar. Die Leiste liegt ueber der Kachel und faengt Klicks selbst ab. */ .bento-inline{ position:absolute; z-index:8; left:var(--sp-3); top:var(--sp-3); right:var(--sp-3); display:none; flex-direction:column; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2); background:rgba(18,24,31,.72); backdrop-filter:blur(10px); border-radius:var(--radius-sm); } .bento-card:hover .bento-inline, .bento-card:focus-within .bento-inline{ display:flex; } .bento-inline__btn{ display:inline-flex; align-items:center; min-height:30px; padding:0 var(--sp-3); border-radius:var(--radius-xs); cursor:pointer; background:rgba(255,255,255,.16); color:#fff; font:600 .75rem/1 var(--font-body); } .bento-inline__btn:hover{ background:rgba(255,255,255,.3); } .bento-inline__btn.is-on{ background:var(--c-red); } .bento-inline__select{ min-height:30px; padding:0 var(--sp-2); border-radius:var(--radius-xs); border:0; background:rgba(255,255,255,.9); color:var(--c-text); font:600 .75rem/1 var(--font-body); } .bento-inline__state{ font-size:.6875rem; color:rgba(255,255,255,.85); } /* Bearbeitbare Texte bekommen einen dezenten Hinweisrahmen. */ body.bento-inline-edit [data-bi-field]{ outline:1px dashed rgba(255,255,255,.4); outline-offset:3px; border-radius:2px; cursor:text; } body.bento-inline-edit .bento-card--plain [data-bi-field]{ outline-color:var(--c-border); } body.bento-inline-edit [data-bi-field]:focus{ outline:2px solid var(--c-red); } /* ========================================================= v2.2.0 - Mobil: quadratische Kacheln, Durchwischen ========================================================= */ @media (max-width:760px){ /* Quadratisch hat Vorrang vor allen Breiten-Ausgleichsklassen. */ .bento-card--fill1, .bento-card--fill2, .bento-card--fill3, .bento-card--fill4{ grid-column:unset; grid-row:unset; aspect-ratio:1 / 1; min-height:0; } /* Aufgeklappt darf die Kachel wieder mitwachsen, sonst wuerde der Inhalt im Quadrat abgeschnitten. */ .bento-card[data-click-mode="expand"].is-expanded, .bento-card--fill1.is-expanded, .bento-card--fill2.is-expanded, .bento-card--fill3.is-expanded, .bento-card--fill4.is-expanded{ aspect-ratio:auto; } /* Durchwischen zwischen geoeffneten Kacheln: die Kachel wandert beim Wischen mit und wird beim Wechsel seitlich ein- bzw. ausgeblendet. */ .bento-card.is-expanded.is-swiping{ transition:none; } .bento-card.is-expanded.is-leaving-left{ animation:bentoSlideOutLeft .18s ease forwards; } .bento-card.is-expanded.is-leaving-right{ animation:bentoSlideOutRight .18s ease forwards; } .bento-card.is-expanded.is-entering-left{ animation:bentoSlideInLeft .22s var(--ease-soft) both; } .bento-card.is-expanded.is-entering-right{ animation:bentoSlideInRight .22s var(--ease-soft) both; } /* Hinweis, dass sich weitere Kacheln durchwischen lassen. */ .bento-card.is-expanded .bento-swipe-hint{ position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:.6875rem; letter-spacing:.04em; color:rgba(255,255,255,.72); pointer-events:none; } .bento-card--plain.is-expanded .bento-swipe-hint{ color:var(--c-text-muted); } } @keyframes bentoSlideOutLeft{ to{ transform:translate(calc(-50% - 60vw), -50%); opacity:0; } } @keyframes bentoSlideOutRight{ to{ transform:translate(calc(-50% + 60vw), -50%); opacity:0; } } @keyframes bentoSlideInLeft{ from{ transform:translate(calc(-50% + 60vw), -50%); opacity:0; } to{ transform:translate(-50%, -50%); opacity:1; } } @keyframes bentoSlideInRight{ from{ transform:translate(calc(-50% - 60vw), -50%); opacity:0; } to{ transform:translate(-50%, -50%); opacity:1; } } /* v2.2.1 - Karte fixiert: keine Eingaben an die Karte selbst, weder in der Kachel noch aufgeklappt. So bleibt der Ausschnitt immer genau auf den eingetragenen Koordinaten und das Scrollen der Seite wird nicht von der Karte abgefangen. */ .bento-card--map .bento-card__media--map, .bento-card--map.is-expanded .bento-card__media--map, .bento-card--map .bento-card__media--map iframe, .bento-card--map.is-expanded .bento-card__media--map iframe{ pointer-events:none; touch-action:pan-y; } /* Auch die Karte auf der Kontaktseite bleibt fixiert. */ .kontakt-map__frame iframe{ pointer-events:none; touch-action:pan-y; } .kontakt-map__frame{ position:relative; } /* v2.4.0 - Inline-Leiste: zwei Zeilen und Schieberegler fuer den Bildausschnitt. */ .bento-inline__row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); } .bento-inline__row[hidden]{ display:none; } .bento-inline__range{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-2); min-height:30px; border-radius:var(--radius-xs); background:rgba(255,255,255,.16); color:#fff; font-size:.75rem; } .bento-inline__range input[type="range"]{ width:74px; accent-color:var(--c-red); } /* v2.5.0 - Pfeile zum Umsortieren in der Inline-Leiste. */ .bento-inline__btn--move{ width:30px; padding:0; justify-content:center; font-size:.9375rem; line-height:1; } /* v2.6.0 - Der Zoom der Kachel-Fotos wird animiert und darf die Kachel nicht verlassen. */ .bento-card__media{ overflow:hidden; } .bento-card__media img{ transition:transform .3s var(--ease-soft); will-change:transform; } /* ========================================================= v2.8.0 - Kachelbreite direkt ziehen Der Griff sitzt am rechten Kachelrand. Beim Ziehen wird die Kachel breiter und die benachbarte Kachel entsprechend schmaler - die Zeilensumme bleibt gleich, es entsteht also weder eine Luecke noch eine Ueberlagerung. ========================================================= */ .bento-resize{ position:absolute; z-index:9; top:20%; bottom:20%; right:-6px; width:12px; display:none; cursor:col-resize; border-radius:999px; background:transparent; } .bento-resize::after{ content:''; position:absolute; inset:0 4px; border-radius:999px; background:var(--c-red); opacity:0; transition:opacity .18s ease; } body.bento-inline-edit .bento-card:hover .bento-resize, body.bento-inline-edit .bento-card:focus-within .bento-resize{ display:block; } .bento-resize:hover::after, .bento-resize:focus-visible::after, .bento-resize.is-active::after{ opacity:1; } /* Waehrend des Ziehens: Vorschau der neuen Breite, keine Uebergaenge. */ body.bento-resizing{ cursor:col-resize; user-select:none; } body.bento-resizing .bento-card{ transition:none; } .bento-card.is-resize-preview{ outline:2px solid var(--c-red); outline-offset:2px; } /* Auf Touch-Geraeten wird nicht gezogen - dort bleibt die Auswahl in der Leiste der verlaessliche Weg. */ @media (max-width:760px), (pointer:coarse){ .bento-resize{ display:none !important; } } /* v2.9.0 - Das Plus ist ein SVG und dadurch exakt mittig; ein "+" als Schriftzeichen sitzt je nach Schriftart leicht daneben. */ .bento-card__arrow--plus{ padding:0; } .bento-card__arrow--plus svg{ width:18px; height:18px; display:block; } .bento-card[data-click-mode="expand"] .bento-card__arrow--text{ border-radius:12px; } /* ========================================================= v2.9.1 - Mobil: Inhalt fuellt die Kachel von oben nach unten Auf dem Handy stand der Inhalt am unteren Rand (wie bei den Foto-Kacheln), wodurch oben eine grosse leere Flaeche blieb. Bei Kacheln ohne Foto beginnt der Inhalt jetzt oben und verteilt sich ueber die volle Hoehe. Foto-Kacheln bleiben unten ausgerichtet - dort liegt der Text ueber dem Verlauf und waere oben schlecht lesbar. ========================================================= */ @media (max-width:760px){ .bento-card--plain, .bento-card--content-calendar{ justify-content:flex-start; padding:var(--sp-5); } /* Titel und Kurztext oben, mit etwas mehr Luft dazwischen. */ .bento-card--plain .bento-card__body, .bento-card--content-calendar .bento-card__body{ gap:var(--sp-2); padding-bottom:var(--sp-4); } /* Die Terminliste nimmt den restlichen Platz ein und verteilt die Eintraege gleichmaessig, statt sie unten zusammenzudraengen. */ .bento-card--content-calendar .bento-card__cal{ flex:1 1 auto; display:flex; align-items:stretch; } .bento-card--content-calendar .bento-cal{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; gap:var(--sp-3); } /* Das grosse Hintergrundsymbol wandert nach oben rechts, damit es nicht mehr mitten im Text liegt. */ .bento-card--plain .bento-card__plain{ top:var(--sp-5); transform:none; width:min(34%, 118px); } /* Platz fuer das Plus unten rechts, damit der letzte Eintrag nicht dahinter liegt. */ .bento-card--content-calendar .bento-cal__item:last-child{ padding-right:52px; } } /* ========================================================= v2.9.2 - Nur Mobil: Hero-Grafik und Uebergang zum Raster Desktop und Tablet bleiben unveraendert (Regeln greifen erst unter 721px bzw. 760px). ========================================================= */ @media (max-width:720px){ /* Der Hero bekommt eine Mindesthoehe, die sich aus dem Inhalt ergibt, und unten nur noch wenig Abstand. Vorher entstand nach den Buttons eine grosse leere Flaeche, weil die Grafik zwar absolut lag, der Hero seine Hoehe aber weiterhin vom Desktop-Wert bezog. */ .hero{ min-height:0; padding:48px 0 0; } .hero__inner{ padding-bottom:var(--sp-5); } /* Die Grafik haengt jetzt am unteren Rand des Hero statt frei in der Mitte zu schweben. Dadurch sitzt sie unter dem Inhalt, ueberlappt den Uebergang zum Raster leicht und wirkt angebunden statt verloren. --hero-m-y verschiebt sie zusaetzlich nach unten. */ .hero__visual{ top:auto; bottom:0; right:var(--hero-m-x, -6%); transform:translateY(calc(var(--hero-m-y, 58%) * 0.28)); width:min(var(--hero-m-w, 76%), 380px); max-height:46vh; /* Statt einer harten Unterkante loest sich die Grafik nach unten auf. Sie endet damit nicht abrupt, sondern geht in die Flaeche ueber - der Uebergang zum Raster wirkt dadurch gewollt. */ -webkit-mask-image:linear-gradient(to bottom, #000 45%, transparent 96%); mask-image:linear-gradient(to bottom, #000 45%, transparent 96%); } .hero__visual img{ max-height:46vh; object-fit:contain; object-position:bottom right; /* Kein Schlagschatten auf Mobil: mit der weichen Kante wuerde er als grauer Rand sichtbar. */ filter:none; } /* Der Hero endet weich am Raster: kein harter Absatz mehr, sondern ein knapper, bewusst gesetzter Abstand. */ .hero{ margin-bottom:0; } .bento{ padding-top:var(--sp-5); } section.bento + *, .hero + .bento{ margin-top:0; } } /* Auf sehr kleinen Geraeten wird die Grafik dezenter, damit sie den ersten Kacheln nicht die Aufmerksamkeit nimmt. */ @media (max-width:420px){ .hero__visual{ width:min(var(--hero-m-w, 76%), 300px); max-height:38vh; } .hero__visual img{ max-height:38vh; } } /* ========================================================= v2.9.4 - Handy im Querformat (Neufassung) Wichtig: die Kacheln behalten position:relative. In 2.9.3 stand hier position:static - dadurch verlor die absolut liegende Medienflaeche ihren Bezugspunkt und die Karte legte sich ueber das gesamte Raster. Bedingung ueber die Hoehe, nicht die Breite: ein Handy im Querformat ist breit, aber flach, und bekam sonst die Tablet-Regeln mit quadratischen Kacheln. ========================================================= */ @media (orientation:landscape) and (max-height:560px) and (max-width:1024px){ /* Zwei Spalten statt drei: die Ausgleichsbreiten sind auf vier Spalten gerechnet und gehen in einem Dreier-Raster nicht auf - genau daher stand zuletzt eine Kachel allein in der Zeile. Hier zaehlen die Breiten deshalb nicht mit: jede Kachel nimmt eine Spalte, und wenn die Anzahl ungerade ist, fuellt die letzte Kachel die Zeile aus. So bleibt keine Kachel allein. */ .bento{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:minmax(150px, auto); grid-auto-flow:row; gap:var(--sp-3); padding:var(--sp-4) var(--gutter) var(--sp-6); } .bento-card{ position:relative; /* Bezugspunkt fuer Bild, Karte und Overlay */ top:auto; aspect-ratio:auto; min-height:150px; margin-bottom:0; padding:var(--sp-4); } .bento-card--fill1, .bento-card--fill2, .bento-card--fill3, .bento-card--fill4, .bento-card--1x1, .bento-card--2x1, .bento-card--1x2, .bento-card--2x2{ grid-column:span 1; grid-row:span 1; aspect-ratio:auto; min-height:150px; } /* Ungerade Anzahl: die letzte Kachel nimmt die ganze Zeile ein. */ .bento-card:last-child:nth-child(odd){ grid-column:1 / -1; } .bento-card__title{ font-size:clamp(1rem, .9rem + .5vw, 1.1875rem); } .bento-card__excerpt{ font-size:.8125rem; } .bento-card__glyph{ width:40px; height:40px; } .bento-card__glyph svg{ width:18px; height:18px; } .bento-card__arrow, .bento-card[data-click-mode="expand"] .bento-card__arrow{ width:32px; height:32px; bottom:12px; right:12px; } .bento-card--content-calendar .bento-cal__item:nth-child(n+3){ display:none; } .hero{ min-height:0; padding:32px 0 0; } .hero__visual{ max-height:42vh; } .hero__visual img{ max-height:42vh; } } /* ========================================================= v2.9.7 - Nur Mobil: weicher Uebergang Hero -> Raster Bisher endete der Hero mit einer unsichtbaren Kante und das Raster begann einfach darunter. Jetzt schiebt sich das Raster leicht ueber den Hero, mit abgerundeter Oberkante und einem Verlauf in die Hintergrundfarbe - das ist die Bewegung, die man von den Karten in iOS kennt: eine Ebene legt sich ueber die darunterliegende, statt hart anzuschliessen. ========================================================= */ @media (max-width:760px){ .hero{ position:relative; /* Der Hero verlaeuft nach unten in die Seitenfarbe. */ padding-bottom:0; } .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(to bottom, transparent, var(--c-bg, #fff)); pointer-events:none; z-index:1; } /* Das Raster liegt als eigene Ebene ueber dem Hero-Ausklang. */ .bento{ position:relative; z-index:2; margin-top:-32px; padding-top:var(--sp-6); border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg); background:var(--c-bg, #fff); } /* Die erste Kachel bekommt etwas mehr Luft nach oben, damit die Ebene als solche lesbar bleibt. */ .bento > .bento-card:first-child{ margin-top:var(--sp-1); } } /* Im Querformat ist zu wenig Hoehe fuer die Ueberlappung. */ @media (orientation:landscape) and (max-height:560px) and (max-width:1024px){ .hero::after{ display:none; } .bento{ margin-top:0; border-radius:0; } } /* ---------- Oeffnungszeiten ---------- */ .opening-hours{ margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 var(--sp-7); max-width:640px; } .opening-hours__row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--c-border); } .opening-hours dt{ font-weight:600; color:var(--c-text); } .opening-hours dd{ margin:0; font-variant-numeric:tabular-nums; color:var(--c-text); } .opening-hours__row.is-closed dt, .opening-hours__row.is-closed dd{ color:var(--c-text-muted); } .opening-hours__note{ margin-top:var(--sp-4); font-size:.875rem; max-width:60ch; } .opening-hours--compact .opening-hours__row{ padding:2px 0; border:0; font-size:.8125rem; } .kontakt-hours{ padding-bottom:var(--section-y); } .kontakt-map__meta{ margin-top:var(--sp-4); } .kontakt-map__address{ margin:0; font-weight:600; } .kontakt-map__today{ margin:var(--sp-1) 0 0; display:flex; align-items:center; gap:var(--sp-2); font-size:.875rem; color:var(--c-text-muted); } .kontakt-map__dot{ width:8px; height:8px; border-radius:50%; background:var(--c-text-muted); } .kontakt-map__dot.is-open{ background:var(--c-red); } .site-footer__today{ font-weight:600; } /* ========================================================= v3.0.0 - Karte ohne Hinweisleiste Die eingebettete OpenStreetMap-Seite bringt unten eine eigene Leiste mit Lizenz- und API-Hinweis mit, die sich im iframe nicht abschalten laesst. Das iframe wird deshalb hoeher gerechnet als sein Rahmen, sodass die Leiste unter dem sichtbaren Bereich liegt. Die Namensnennung bleibt als eigener, gestalteter Hinweis erhalten - sie ist Pflicht. ========================================================= */ .bento-card__media--map{ position:absolute; inset:0; overflow:hidden; } .bento-card__media--map iframe{ position:absolute; left:0; top:0; width:100%; height:calc(100% + 46px); /* 46px = Hoehe der OSM-Leiste */ border:0; } .kontakt-map__frame{ overflow:hidden; position:relative; } .kontakt-map__frame iframe{ position:absolute; left:0; top:0; width:100%; height:calc(100% + 46px); border:0; } /* Pflichtangabe zur Kartenquelle, dezent gesetzt. */ .map-credit{ position:absolute; right:8px; bottom:6px; z-index:4; font-size:.625rem; letter-spacing:.02em; color:rgba(255,255,255,.9); background:rgba(18,24,31,.45); padding:2px 6px; border-radius:4px; pointer-events:none; } .kontakt-map__frame .map-credit{ color:var(--c-text-muted); background:rgba(255,255,255,.85); } /* ========================================================= v3.0.0 - Handy: Kacheln waagerecht als Karussell Auswahl im Customizer (Bento > Darstellung auf dem Handy). Die Punkt-Anzeige darunter nutzt die Akzentfarbe, aendert sich also mit, wenn der Rotton angepasst wird. ========================================================= */ @media (max-width:760px){ body.bento-mobile-carousel .bento{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 var(--gutter) var(--sp-4); margin-top:0; border-radius:0; } body.bento-mobile-carousel .bento::-webkit-scrollbar{ display:none; } body.bento-mobile-carousel .bento-card{ position:relative; flex:0 0 82%; scroll-snap-align:center; aspect-ratio:1 / 1; min-height:0; margin-bottom:0; top:auto; } body.bento-mobile-carousel .bento-card.is-expanded{ aspect-ratio:auto; } /* Punkt-Anzeige: zeigt, wie viele Kacheln es gibt und wo man ist. */ .bento-dots{ display:flex; justify-content:center; align-items:center; gap:var(--sp-2); padding:0 0 var(--sp-6); } .bento-dots__dot{ width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--c-red) 26%, transparent); transition:width .22s var(--ease-soft), background .22s ease; } .bento-dots__dot.is-active{ width:22px; border-radius:999px; background:var(--c-red); } } /* Ausserhalb des Karussells wird die Anzeige nicht gebraucht. */ .bento-dots{ display:none; } /* ---------- Bildregler im Seiten-Baukasten ---------- Erscheinen im Bearbeitungsmodus unter dem Bild-Button. Jedes Bild auf jeder Seite laesst sich damit verschieben und zoomen - getrennt fuer Desktop und Mobil. */ .asec-imgpos{ display:none; } body.asec-edit-mode .asec-imgpos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-1) var(--sp-3); position:absolute; left:var(--sp-3); right:var(--sp-3); bottom:56px; z-index:7; padding:var(--sp-3); background:rgba(18,24,31,.72); backdrop-filter:blur(10px); border-radius:var(--radius-sm); } .asec-imgpos__row{ display:flex; align-items:center; gap:var(--sp-2); color:#fff; font-size:.6875rem; font-weight:600; } .asec-imgpos__row input[type="range"]{ flex:1 1 auto; min-width:0; accent-color:var(--c-red); } [data-field-image]{ position:relative; overflow:hidden; } [data-field-image] img{ transition:transform .25s var(--ease-soft); } /* ========================================================= v3.3.0 - Bild-Menü überall wie im Bento Jedes Bild im Seiten-Baukasten bekommt im Bearbeitungsmodus dasselbe Menü wie die Kacheln: erscheint beim Überfahren, dunkle Fläche mit Foto-Auswahl und den Reglern für Ausschnitt und Zoom, getrennt für Desktop und Mobil. ========================================================= */ .asec-imgtools{ display:none; } body.asec-edit-mode [data-field-image]{ position:relative; overflow:hidden; } body.asec-edit-mode [data-field-image]:hover .asec-imgtools, body.asec-edit-mode [data-field-image]:focus-within .asec-imgtools{ display:block; position:absolute; z-index:8; left:var(--sp-3); right:var(--sp-3); top:var(--sp-3); padding:var(--sp-3); background:rgba(18,24,31,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:var(--radius-sm); } /* Dezenter Hinweis, solange nicht übergefahren wird. */ body.asec-edit-mode [data-field-image]::after{ content:'Bild bearbeiten'; position:absolute; z-index:7; left:var(--sp-3); top:var(--sp-3); padding:4px var(--sp-3); border-radius:var(--radius-xs); background:rgba(18,24,31,.6); color:#fff; font:600 .6875rem/1.6 var(--font-body); pointer-events:none; transition:opacity .18s ease; } body.asec-edit-mode [data-field-image]:hover::after, body.asec-edit-mode [data-field-image]:focus-within::after{ opacity:0; } body.asec-edit-mode .asec-image-btn{ display:inline-flex; align-items:center; min-height:30px; padding:0 var(--sp-3); margin:0 0 var(--sp-2); border:0; border-radius:var(--radius-xs); cursor:pointer; background:var(--c-red); color:#fff; font:600 .75rem/1 var(--font-body); } body.asec-edit-mode .asec-image-btn:hover{ background:var(--c-red-dark); } /* Regler in zwei Spalten, identisch zur Kachel-Leiste. */ .asec-imgmenu{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-1) var(--sp-3); } .asec-imgmenu__title{ grid-column:1 / -1; font:700 .625rem/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:2px; } .asec-imgmenu .asec-imgpos__row{ display:flex; align-items:center; gap:var(--sp-2); color:#fff; font-size:.6875rem; font-weight:600; } .asec-imgmenu input[type="range"]{ flex:1 1 auto; min-width:0; accent-color:var(--c-red); } @media (max-width:600px){ .asec-imgmenu{ grid-template-columns:1fr; } } /* ========================================================= v3.4.0 - Schritte, Eckdaten, Symbolauswahl ========================================================= */ /* ---------- Schritte ---------- Ohne Animation bleiben die Karten schlicht nebeneinander. Nur Sektionen mit .asec-steps__grid--animated spielen den Ablauf ab. */ .asec-steps__grid--animated{ position:relative; } .asec-steps__track{ position:absolute; left:8%; right:8%; top:34px; height:2px; background:var(--c-border); border-radius:2px; z-index:0; overflow:hidden; } .asec-steps__fill{ display:block; width:0; height:100%; background:var(--c-red); transition:width 1.2s cubic-bezier(.22,.8,.28,1); } /* Ausgangszustand: zurückgenommen und leicht verkleinert. */ .asec-steps__grid--animated .asec-steps__card{ position:relative; z-index:1; background:var(--c-surface); opacity:.5; transform:scale(.94) translateY(6px); transition:transform 1s cubic-bezier(.22,.8,.28,1), opacity .9s ease, box-shadow 1s ease, background .9s ease, border-color .9s ease; } /* Schon gezeigt: bleibt sichtbar, tritt aber zurück. */ .asec-steps__grid--animated .asec-steps__card.is-done{ opacity:.75; transform:scale(.96) translateY(2px); } /* Aktuell vorn: größer, angehoben, Zahl in der Markenfarbe. */ .asec-steps__grid--animated .asec-steps__card.is-active{ opacity:1; transform:scale(1.04) translateY(-6px); box-shadow:var(--shadow-lg); } .asec-steps__num{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; background:var(--c-bg-alt); color:var(--c-text-muted); font-family:var(--font-display); font-weight:800; font-size:1.125rem; transition:background .9s ease, color .9s ease, transform 1s cubic-bezier(.22,.8,.28,1); } .asec-steps__grid--animated .asec-steps__card.is-active .asec-steps__num{ background:var(--c-red); color:#fff; transform:scale(1.08); } /* Der letzte Schritt bleibt vorn und farbig - er ist das Ziel. */ .asec-steps__grid--animated .asec-steps__card.is-final{ background:var(--c-red); border-color:transparent; opacity:1; transform:scale(1.04) translateY(-6px); } .asec-steps__grid--animated .asec-steps__card.is-final h3, .asec-steps__grid--animated .asec-steps__card.is-final p{ color:#fff; } .asec-steps__grid--animated .asec-steps__card.is-final .asec-steps__num{ background:rgba(255,255,255,.2); color:#fff; } @media (max-width:760px){ .asec-steps__track{ left:32px; right:auto; top:24px; bottom:24px; width:2px; height:auto; } .asec-steps__fill{ width:100% !important; height:100%; } /* Auf dem Handy keine Vergrößerung - dort wird ohnehin gescrollt. */ .asec-steps__grid--animated .asec-steps__card, .asec-steps__grid--animated .asec-steps__card.is-active, .asec-steps__grid--animated .asec-steps__card.is-final{ transform:none; } } @media (prefers-reduced-motion:reduce){ .asec-steps__grid--animated .asec-steps__card, .asec-steps__num, .asec-steps__fill{ transition:none; opacity:1; transform:none; } } /* ---------- Eckdaten unter dem Text ---------- */ .asec-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--sp-3); margin-top:var(--sp-5); } .asec-facts__item{ position:relative; display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease-soft), border-color .25s ease; } .asec-facts__item:hover{ border-color:var(--c-red); } .asec-facts__icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:12px; background:var(--c-red-tint); color:var(--c-red); } .asec-facts__icon svg{ width:20px; height:20px; } .asec-facts__body{ display:flex; flex-direction:column; min-width:0; } .asec-facts__value{ font-family:var(--font-display); font-weight:800; font-size:clamp(.9375rem, .88rem + .3vw, 1.0625rem); line-height:1.25; color:var(--c-text); } .asec-facts__label{ font-size:.75rem; color:var(--c-text-muted); letter-spacing:.02em; } /* Pfeil-Link am Ende eines Bild-Text-Abschnitts. */ .asec-imgtext__link{ display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4); font-weight:700; font-size:.9375rem; color:var(--c-red); text-decoration:none; } .asec-imgtext__link svg{ width:18px; height:18px; transition:transform .22s var(--ease-soft); } .asec-imgtext__link:hover svg{ transform:translateX(3px); } /* ---------- Symbolauswahl im Bearbeitungsmodus ---------- */ .asec-iconpick{ display:none; } body.asec-edit-mode .asec-iconpick{ display:block; position:absolute; z-index:6; left:var(--sp-3); top:calc(100% - 6px); } body.asec-edit-mode .asec-trust__item, body.asec-edit-mode .asec-facts__item{ position:relative; } .asec-iconpick__select{ min-height:28px; padding:0 var(--sp-2); border:1px solid var(--c-border); border-radius:var(--radius-xs); background:var(--c-surface); color:var(--c-text); font:600 .6875rem/1 var(--font-body); } body.asec-edit-mode .asec-trust__item, body.asec-edit-mode .asec-facts__item{ padding-bottom:var(--sp-6); } /* ========================================================= v3.5.0 - Bildformate, Bento-Zeilenhöhe, Karten-Kachel ========================================================= */ /* ---------- Bildformate ---------- Hochformat z. B. für Porträts des Vorstands, quadratisch für Team-Raster. Gilt für Hero- und Bild-Text-Sektionen. */ .asec-media--landscape{ aspect-ratio:4 / 3; } .asec-media--portrait{ aspect-ratio:3 / 4; } .asec-media--square{ aspect-ratio:1 / 1; } .asec-media--auto{ aspect-ratio:auto; } .asec-media--auto img{ height:auto; } /* Im Hochformat darf die Spalte schmaler sein, damit der Text Platz behält. */ .asec-imgtext__media.asec-media--portrait{ width:clamp(200px, 26vw, 320px); } .asec-imgtext__media.asec-media--square{ width:clamp(200px, 28vw, 360px); } .asec-imgmenu__row{ grid-column:1 / -1; } .asec-imgmenu__select{ width:100%; min-height:28px; padding:0 var(--sp-2); border:0; border-radius:var(--radius-xs); background:rgba(255,255,255,.9); color:var(--c-text); font:600 .6875rem/1 var(--font-body); } /* ---------- Bento: Zeilenhöhe ziehen ---------- Am unteren Rand jeder Zeile liegt im Bearbeitungsmodus ein Griff. Ziehen ändert die Höhe genau dieser Zeile; gespeichert wird pro Zeile, sodass z. B. die mittlere Reihe höher stehen kann. */ .bento-rowgrip{ position:absolute; z-index:9; left:0; right:0; height:14px; display:none; cursor:row-resize; } body.bento-inline-edit .bento-rowgrip{ display:block; } .bento-rowgrip::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); top:5px; width:64px; height:4px; border-radius:999px; background:var(--c-red); opacity:0; transition:opacity .18s ease; } .bento-rowgrip:hover::after, .bento-rowgrip.is-active::after{ opacity:1; } body.bento-rowsizing{ cursor:row-resize; user-select:none; } body.bento-rowsizing .bento-card{ transition:none; } @media (max-width:760px), (pointer:coarse){ .bento-rowgrip{ display:none !important; } } /* ---------- Karten-Kachel: kein zusätzliches Plus ---------- Die Kachel lässt sich weiterhin antippen; der Navigations-Button bleibt die einzige sichtbare Schaltfläche. */ .bento-card--map .bento-card__arrow{ display:none; } /* v3.5.2 - Die Reihenfolge von Text und Bild wird in assets/css/section-editor.css gesetzt. Diese Datei wird nach main.css geladen, deshalb muessen die Regeln dort stehen - sonst werden sie ueberschrieben. */ /* ========================================================= v3.6.0 - Farbflächen-Kacheln: Inhalt oben verankert Bisher klebte der Inhalt am unteren Rand (sinnvoll auf Fotos, wo er über dem Verlauf liegt). Ohne Foto entstand beim Höherziehen einer Zeile eine große Lücke über dem Titel und die Grafik schwebte mitten im Text. Bei Kacheln ohne Foto steht der Inhalt jetzt oben links und wächst nach unten. ========================================================= */ @media (min-width:761px){ .bento-card--plain, .bento-card--content-calendar{ justify-content:flex-start; } .bento-card--plain .bento-card__body, .bento-card--content-calendar .bento-card__body{ gap:var(--sp-2); } /* Die Grafik sitzt oben rechts statt mittig - sie liegt damit nie mehr hinter der Überschrift. */ .bento-card--plain .bento-card__plain{ top:var(--sp-5); transform:none; right:var(--sp-5); width:min(38%, 150px); } .bento-card--plain.bento-card--fill1 .bento-card__plain{ width:min(44%, 130px); } /* Der Textblock hält Abstand zur Grafik, solange er oben steht. */ .bento-card--plain .bento-card__body{ padding-right:0; } .bento-card--plain .bento-card__title{ max-width:calc(100% - 90px); } } /* Aufgeklappt gilt wieder die volle Breite. */ .bento-card--plain.is-expanded .bento-card__title{ max-width:none; } .bento-card--plain.is-expanded .bento-card__plain{ opacity:.1; } /* ---------- Kalender-Download ---------- */ .ics-btn{ display:inline-flex; align-items:center; gap:var(--sp-2); } .ics-btn svg{ width:18px; height:18px; flex:none; } .kontakt-hours__actions, .kalender__ics-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-5) 0 0; } .kalender__ics-actions{ margin:0 0 var(--sp-5); } @media (max-width:600px){ .kontakt-hours__actions .btn, .kalender__ics-actions .btn{ flex:1 1 100%; justify-content:center; } } /* ---------- Kalenderdateien (.ics) ---------- */ /* Der Knopf stammt aus inc/termine-system.php und traegt die Klasse .ics-btn - hier nur die gemeinsame Optik. */ .ics-btn{ display:inline-flex; align-items:center; gap:var(--sp-2); } .ics-btn svg{ width:18px; height:18px; flex:none; } .kalender__tools{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-5); } .asec-imgtext__ics{ margin-top:var(--sp-4); } /* Knopf am einzelnen Termin in der Liste: dezent, erscheint beim Überfahren bzw. bleibt auf Touch-Geräten sichtbar. */ .kalender__ics{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:6px var(--sp-3); border:1px solid var(--c-border); border-radius:var(--radius-xs); background:var(--c-surface); color:var(--c-text-muted); font-size:.75rem; font-weight:600; text-decoration:none; opacity:0; transition:opacity .18s ease, color .18s ease, border-color .18s ease; } .kalender__ics svg{ width:15px; height:15px; } .kalender__item:hover .kalender__ics, .kalender__item:focus-within .kalender__ics{ opacity:1; } .kalender__ics:hover{ color:var(--c-red); border-color:var(--c-red); } @media (pointer:coarse){ .kalender__ics{ opacity:1; } } @media (max-width:600px){ .kalender__ics span{ display:none; } .kalender__ics{ padding:6px; } } /* ========================================================= v3.8.0 - Schmales Fenster: Raster schrumpft proportional Bisher wechselte das Raster unter 960px auf zwei Spalten. Die Breiten sind aber auf vier Spalten gerechnet, deshalb gingen die Zeilen nicht mehr auf und einzelne Kacheln standen allein. Jetzt bleiben es vier Spalten, das Raster wird stattdessen proportional kleiner - Schrift und Abstände skalieren mit, bleiben aber lesbar. ========================================================= */ @media (min-width:761px) and (max-width:1100px){ .bento{ grid-template-columns:repeat(4, minmax(0, 1fr)); /* Zeilenhöhe folgt der Fensterbreite statt einem festen Wert. */ --bento-row-h:clamp(150px, 19vw, 230px); grid-auto-rows:minmax(var(--bento-row-h), auto); gap:clamp(10px, 1.2vw, 16px); } /* Gezogene Zeilenhöhen dürfen hier nicht die Kachel sprengen. */ .bento{ grid-template-rows:unset !important; } .bento-card{ padding:clamp(14px, 1.6vw, 22px); } .bento-card--fill1{ grid-column:span 1; } .bento-card--fill2{ grid-column:span 2; } .bento-card--fill3{ grid-column:span 3; } .bento-card--fill4{ grid-column:span 4; } /* Schrift wird kleiner, aber nicht kleiner als gut lesbar. */ .bento-card__title{ font-size:clamp(.9375rem, .55rem + 1.1vw, 1.25rem); } .bento-card__excerpt{ font-size:clamp(.8125rem, .72rem + .3vw, .9375rem); line-height:1.45; } .bento-card__glyph{ width:clamp(36px, 4vw, 48px); height:clamp(36px, 4vw, 48px); } .bento-card__glyph svg{ width:clamp(16px, 1.8vw, 21px); height:clamp(16px, 1.8vw, 21px); } .bento-card[data-click-mode="expand"] .bento-card__arrow, .bento-card__arrow{ width:32px; height:32px; bottom:12px; right:12px; } .bento-card__body{ padding-right:44px; } .bento-card--content-calendar .bento-cal__item:nth-child(n+3){ display:none; } .bento-card--plain .bento-card__plain{ width:min(34%, 104px); } } /* Sehr schmal, aber noch nicht gestapelt: zwei Spalten, dafür passen die Ausgleichsbreiten ebenfalls zusammen (2 statt 4 Einheiten). */ @media (min-width:761px) and (max-width:860px){ .bento{ --bento-row-h:clamp(140px, 21vw, 190px); } .bento-card__body{ padding-right:40px; } } /* ========================================================= v3.9.0 - Beitrags-Galerie: kleinere Vorschaukacheln Kompaktes Raster mit einheitlichen, kleineren Kacheln (kein übergroßes Feature-Bild mehr). Kategorie, Autor und Datum sind über den Customizer schaltbar. ========================================================= */ .agallery-grid--compact{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows:auto; gap:var(--sp-4); } .agallery-grid--compact .agallery-card{ position:relative; grid-column:auto !important; grid-row:auto !important; display:flex; flex-direction:column; border-radius:var(--radius-md); overflow:hidden; background:var(--c-surface); border:1px solid var(--c-border); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft); } .agallery-grid--compact .agallery-card:hover{ box-shadow:var(--shadow-md); } /* Bild als ruhiges 4:3, nicht mehr bildschirmfüllend. */ .agallery-grid--compact .agallery-card__media{ position:relative; inset:auto; aspect-ratio:4 / 3; width:100%; } .agallery-grid--compact .agallery-card__body{ position:relative; inset:auto; display:flex; flex-direction:column; gap:4px; padding:var(--sp-3) var(--sp-4) var(--sp-4); background:none; } .agallery-grid--compact .agallery-card__title{ font-size:1rem; line-height:1.35; color:var(--c-text); font-weight:700; } .agallery-grid--compact .agallery-card__meta{ display:flex; flex-wrap:wrap; gap:var(--sp-2); font-size:.75rem; color:var(--c-text-muted); } .agallery-grid--compact .agallery-card__date, .agallery-grid--compact .agallery-card__author{ color:var(--c-text-muted); } .agallery-grid--compact .agallery-card__author::before{ content:'· '; } .agallery-grid--compact .agallery-card__badge{ position:absolute; top:var(--sp-2); left:var(--sp-2); z-index:2; background:var(--c-red); color:#fff; font-size:.6875rem; font-weight:700; padding:3px var(--sp-2); border-radius:var(--radius-xs); } @media (max-width:520px){ .agallery-grid--compact{ grid-template-columns:repeat(2, 1fr); gap:var(--sp-3); } .agallery-grid--compact .agallery-card__title{ font-size:.9375rem; } } /* ========================================================= v3.9.0 - Bento: Farbschema frei umkehrbar 'red' = roter Grund, weißes Symbol und weiße Schrift. 'white' = heller Grund, rotes Symbol und dunkle Schrift. Damit lässt sich jede Kachel invertieren - nicht nur Weiß auf Rot, sondern auch Rot auf Weiß. ========================================================= */ .bento-card--scheme-red{ background:var(--c-red) !important; color:#fff; } .bento-card--scheme-red .bento-card__title, .bento-card--scheme-red .bento-card__excerpt, .bento-card--scheme-red .bento-cal__title, .bento-card--scheme-red .bento-cal__meta{ color:#fff !important; } .bento-card--scheme-red .bento-card__plain{ color:#fff; opacity:.22; } .bento-card--scheme-red .bento-card__glyph{ background:rgba(255,255,255,.18); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); } .bento-card--scheme-red .bento-card__arrow{ background:rgba(255,255,255,.22); color:#fff; } .bento-card--scheme-white{ background:var(--c-surface) !important; color:var(--c-text); border:1px solid var(--c-border); } .bento-card--scheme-white .bento-card__title, .bento-card--scheme-white .bento-cal__title{ color:var(--c-text) !important; } .bento-card--scheme-white .bento-card__excerpt, .bento-card--scheme-white .bento-cal__meta{ color:var(--c-text-muted) !important; } .bento-card--scheme-white .bento-card__plain{ color:var(--c-red); opacity:.18; } .bento-card--scheme-white .bento-card__glyph{ background:var(--c-red-tint); color:var(--c-red); box-shadow:inset 0 0 0 1px var(--c-border); } .bento-card--scheme-white .bento-card__arrow{ background:var(--c-red-tint); color:var(--c-red); } /* Auf Foto-Kacheln bleibt der Text hell, sonst wäre er unlesbar. */ .bento-card--scheme-white.bento-card--has-photo .bento-card__title, .bento-card--scheme-white .bento-card__media ~ .bento-card__body .bento-card__title{ color:#fff !important; } /* Footer: Link unter "Heute: …" */ .site-footer__hours-link{ margin-top:2px; } .site-footer__hours-link a{ font-size:.8125rem; color:var(--c-red); font-weight:600; text-decoration:underline; text-underline-offset:3px; } /* ========================================================= v3.9.1 - Kachel-Titel, Textfarbe, Karten-Lesbarkeit ========================================================= */ /* Kurze Titel wie "Basiskurs" oder "Über uns" nicht mehr umbrechen - sie standen zuletzt zweizeilig, weil die max-width sie gegen die Grafik gedrückt hat. Lieber die Grafik etwas kleiner. */ @media (min-width:761px){ .bento-card--plain .bento-card__title{ max-width:none; overflow-wrap:normal; word-break:keep-all; hyphens:none; text-wrap:balance; } .bento-card--plain.bento-card--fill1 .bento-card__plain{ width:min(38%, 108px); } /* Titel liegt über der Grafik (z-index), damit er die volle Breite nutzen kann, ohne dass sich beide überlagern. */ .bento-card--plain .bento-card__body{ position:relative; z-index:2; } .bento-card--plain .bento-card__plain{ z-index:1; } } /* Frei wählbare Textfarbe je Kachel (Inline-Menü). Wirkt auf Titel, Kurztext und die Kalender-Einträge. */ .bento-card[data-text="dark"] .bento-card__title, .bento-card[data-text="dark"] .bento-cal__title{ color:var(--c-text) !important; text-shadow:none !important; } .bento-card[data-text="dark"] .bento-card__excerpt, .bento-card[data-text="dark"] .bento-cal__meta, .bento-card[data-text="dark"] .bento-cal__date{ color:var(--c-text-muted) !important; text-shadow:none !important; } .bento-card[data-text="light"] .bento-card__title, .bento-card[data-text="light"] .bento-cal__title{ color:#fff !important; } .bento-card[data-text="light"] .bento-card__excerpt, .bento-card[data-text="light"] .bento-cal__meta, .bento-card[data-text="light"] .bento-cal__date{ color:rgba(255,255,255,.88) !important; } /* Die Karten-Kachel bekommt standardmäßig dunklen Text, damit er auf der hellen Karte lesbar ist. Ein heller Schleier hebt ihn zusätzlich ab. */ .bento-card--map:not([data-text]) .bento-card__title, .bento-card--map:not([data-text]) .bento-card__excerpt{ color:var(--c-text) !important; text-shadow:none !important; } .bento-card--map .bento-card__scrim{ background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.35) 55%, rgba(255,255,255,.68)); } .bento-card--map[data-text="light"] .bento-card__title, .bento-card--map[data-text="light"] .bento-card__excerpt{ color:#fff !important; text-shadow:0 1px 10px rgba(18,24,31,.5) !important; } .bento-card--map[data-text="light"] .bento-card__scrim{ background:linear-gradient(180deg, rgba(18,24,31,.15), rgba(18,24,31,.45)); } /* ========================================================= v3.9.2 - Kein abgeschnittener Text, schwarze Fakten-Werte ========================================================= */ /* Farbflächen-Kacheln zeigen den vollen Kurztext, ohne "…". Die Kachel wächst mit dem Inhalt (Zeilenhöhe ist eine Mindesthöhe). */ @media (min-width:761px){ .bento-card--plain .bento-card__excerpt, .bento-card--content-calendar .bento-card__excerpt{ display:block !important; overflow:visible !important; } } /* Foto-Kacheln: großzügiger clampen, damit typische Kurztexte komplett sichtbar sind statt nach zwei Zeilen zu enden. */ /* Fakten-Kacheln: Wert immer in dunkler Schrift, auch auf Unterseiten. Die leeren Kacheln im Bearbeitungsmodus bekommen einen Platzhalter, damit die Symbolauswahl nicht ins Leere ragt. */ .asec-facts__value{ color:var(--c-text) !important; } .asec-facts__label{ color:var(--c-text-muted) !important; } body.asec-edit-mode .asec-facts__value:empty::before{ content:'Wert'; color:var(--c-text-muted); font-weight:400; } body.asec-edit-mode .asec-facts__label:empty::before{ content:'Beschriftung'; color:var(--c-text-muted); } /* Auf Unterseiten stehen Trust- und Fakten-Texte grundsätzlich dunkel. */ .artemis-section .asec-trust__title, .artemis-section .asec-facts__value{ color:var(--c-text) !important; } .artemis-section .asec-trust__text, .artemis-section .asec-facts__label{ color:var(--c-text-muted) !important; } /* ========================================================= v3.9.3 - Über uns: Text sichtbar, leere Eckdaten dezent Der eigentliche Absatz stand nicht mehr im Vordergrund, weil leere Fakten-Kacheln im Bearbeitungsmodus viel Platz belegten. Jetzt werden leere Eckdaten nur als schmaler, blasser Hinweis dargestellt und drängen den Text nicht mehr weg. ========================================================= */ .asec-imgtext__text .asec-prose p{ color:var(--sec-ink, var(--c-text)); font-size:clamp(1rem, .96rem + .2vw, 1.0625rem); line-height:1.7; } /* Leere Eckdaten (nur im Bearbeitungsmodus sichtbar) klein und blass. */ .asec-facts--empty{ grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); opacity:.5; } .asec-facts--empty .asec-facts__item{ padding:var(--sp-2) var(--sp-3); box-shadow:none; background:var(--c-bg-alt); } .asec-facts--empty .asec-facts__icon{ width:28px; height:28px; } .asec-facts--empty .asec-facts__icon svg{ width:15px; height:15px; } body.asec-edit-mode .asec-facts--empty::after{ content:'Optional: Eckdaten ausfüllen'; grid-column:1 / -1; order:-1; font-size:.6875rem; color:var(--c-text-muted); font-weight:600; letter-spacing:.03em; text-transform:uppercase; } /* Der Text-Block behält seine volle Breite, auch wenn keine Fakten da sind. */ .asec-imgtext__text > .asec-prose{ margin-bottom:var(--sp-4); } /* ========================================================= v3.10.0 - Hero: Verlauf/Schein und "keine Grafik" Der Verlauf liegt als eigene Ebene über Hintergrund und unter dem Text. Farbe, Richtung, Deckkraft und Ausdehnung kommen aus dem Customizer (--hero-gradient). Wirkt auch ohne Hintergrundbild und ohne die Grafik rechts. ========================================================= */ .hero{ position:relative; } .hero__gradient{ position:absolute; inset:0; z-index:1; background:var(--hero-gradient, none); pointer-events:none; } .hero__grid{ position:relative; z-index:2; } /* Ohne Grafik rechts nimmt der Text die volle Breite ein. */ .hero--no-visual .hero__inner{ max-width:min(64ch, 100%); flex-basis:auto; } .hero--no-visual .hero__visual{ display:none; } .hero-tools{ display:none; position:absolute; z-index:20; top:12px; right:12px; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:calc(100% - 24px); padding:8px; border-radius:12px; background:rgba(18,24,31,.88); } body.asec-edit-mode .hero{ position:relative; } body.asec-edit-mode .hero-tools{ display:flex; } .hero-tools__btn{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:0; border-radius:8px; cursor:pointer; background:var(--c-red); color:#fff; font:600 .75rem/1 var(--font-body); } .hero-tools__btn:hover{ background:var(--c-red-dark); } .hero-tools__btn--ghost{ background:rgba(255,255,255,.18); } .hero-tools__btn--ghost:hover{ background:rgba(255,255,255,.32); } body.asec-edit-mode .hero__visual--empty::after{ display:none; } body.asec-edit-mode .hero__visual--empty{ display:flex; align-items:center; justify-content:center; min-height:160px; aspect-ratio:4 / 3; border:2px dashed var(--c-border); border-radius:var(--radius-lg); background:var(--c-bg-alt); box-shadow:none; } body.asec-edit-mode .hero__visual--empty::before{ content:'Keine Grafik'; color:var(--c-text-muted); font:600 .8125rem/1 var(--font-body); } /* Im Frontend (nicht im Editor) nimmt eine leere Grafik keinen Platz weg, der Text bekommt die volle Breite. */ body:not(.asec-edit-mode) .hero__visual--empty{ display:none; } /* Ohne sichtbare Grafik füllt der Text-Block (Flex) automatisch die Breite; hier nur die Obergrenze anheben, damit die Zeilen nicht zu kurz werden. */ body:not(.asec-edit-mode) .hero__grid:has(.hero__visual--empty) .hero__inner{ max-width:min(64ch, 100%); } /* ========================================================= v3.10.3 - Hero-Überschrift (4 Zeilen) + eigener Hintergrund Die vierzeilige Standard-Überschrift soll auf jedem Gerät sauber umbrechen und über einem selbst gesetzten Hintergrund lesbar bleiben. ========================================================= */ /* Etwas engere Zeilen, damit vier Zeilen kompakt zusammenstehen. */ .hero h1{ line-height:1.08; } .hero h1 .hero-accent{ display:inline; } /* Über einem eigenen Hintergrundbild bekommt der Textblock einen dezenten, hellen Verlauf hinter sich - so bleibt dunkle Schrift lesbar, ohne das Bild zu verdecken. */ /* Kein heller Kasten/Verlauf hinter dem Hero-Text. Die Lesbarkeit über einem eigenen Hintergrund wird über den Hero-Verlauf (Customizer) und den Aufhellungs-Schleier des Bildes gesteuert, nicht über eine Fläche direkt hinter dem Text. */ /* ---------- Mobil: vier Zeilen ordentlich ---------- */ @media (max-width:720px){ .hero h1{ font-size:clamp(30px, 8.5vw, 44px); line-height:1.1; max-width:none; /* volle Breite nutzen, sauber umbrechen */ text-wrap:balance; /* gleichmäßige Zeilenlängen auf schmal */ hyphens:none; overflow-wrap:break-word; } .hero__inner{ max-width:none; } /* Lesbarer Fließtext über Hintergrund. */ .hero__lead{ font-size:1.0625rem; } } /* Sehr schmale Geräte: Überschrift nicht zu groß, damit 4 Zeilen passen. */ @media (max-width:400px){ .hero h1{ font-size:clamp(26px, 8vw, 34px); } } /* ========================================================= v3.13.0 - Hintergrund-Grafik: proportion- und ankerfest Problem: Die freistehende Hero-Grafik war in vw skaliert. Der Inhalt (Bento) ist aber auf die Content-Breite (--maxw) begrenzt. Beim Zoomen liefen beide auseinander - die Grafik (besonders das Bein) wanderte neben das Bento. Lösung: Die Grafik hängt an genau derselben Content-Box wie das Bento und wird nur relativ zu dieser skaliert und verankert. Ihre Unterkante bleibt an einem festen Punkt im Hero, unabhängig vom Zoom. ========================================================= */ /* Wird die Grafik als durchscheinende Hintergrund-Grafik genutzt (Overflow aktiv), bekommt sie diese Verankerung. */ .hero--overflow{ position:relative; } .hero--overflow .hero__grid{ /* Bezugsbox: identisch zum Bento (zentriert, auf --maxw begrenzt). Dadurch teilt sich die Grafik dasselbe Koordinatensystem. */ position:relative; } .hero--overflow .hero__visual{ /* Anker: rechte Kante an der rechten Kante der Content-Box. Breite als Anteil der Content-Box (nicht des Viewports), daher bleibt die Proportion zum Bento beim Zoomen konstant. */ position:absolute; right:var(--hero-gfx-x, -4%); bottom:calc(var(--hero-overflow, 0px) * -1); top:auto; width:clamp(320px, var(--hero-gfx-w, 46%), 760px); margin:0; z-index:0; transform:none; pointer-events:none; } .hero--overflow .hero__visual img{ width:100%; height:auto; display:block; /* Die Grafik behält ihr Seitenverhältnis (kein cover/crop), damit sich das Bein nie relativ zum Rest verschiebt. */ object-fit:contain; } /* Der Textblock liegt über der Grafik. */ .hero--overflow .hero__inner{ position:relative; z-index:2; } /* Sehr breite Fenster: die Content-Box wächst nicht über --maxw hinaus, also bleibt auch die Grafik proportional stehen - sie klebt an der rechten Kante der 1240px-Box, nicht am Bildschirmrand. */ @media (min-width:1360px){ .hero--overflow .hero__visual{ /* Halte die Grafik an der Content-Box, auch wenn außen mehr Platz ist: rechte Kante relativ zur zentrierten Box. */ right:max(var(--hero-gfx-x, -4%), calc((100% - var(--maxw)) / -2 - 40px)); } } /* Beim Zoomen (Browser-Zoom ändert die effektive Pixeldichte, nicht die CSS-Verhältnisse): da alle Maße hier in % der Content-Box bzw. in px der --hero-overflow-Variable stehen, skaliert die Grafik synchron mit dem Bento. Kein vw mehr im Overflow-Modus. */ /* ========================================================= v3.15.0 - Dokumente / Downloads (Satzung & Ordnungen) Moderne, responsive Download-Liste statt reiner PDF-Links. ========================================================= */ .asec-docs{ padding:var(--sp-7) 0; } .asec-docs__head{ max-width:60ch; margin-bottom:var(--sp-5); } .asec-docs__intro{ color:var(--c-text-muted); margin-top:var(--sp-2); } .asec-docs__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--sp-3); } .asec-doc{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4); background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); text-decoration:none; color:var(--c-text); transition:transform .2s var(--ease-soft), border-color .2s ease, box-shadow .2s ease; } .asec-doc:hover{ border-color:var(--c-red); box-shadow:var(--shadow-md); } .asec-doc__icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:12px; background:var(--c-red-tint); color:var(--c-red); } .asec-doc__icon svg{ width:22px; height:22px; } .asec-doc__body{ display:flex; flex-direction:column; min-width:0; flex:1; } .asec-doc__title{ font-weight:700; line-height:1.3; overflow-wrap:anywhere; } .asec-doc__meta{ font-size:.8125rem; color:var(--c-text-muted); } .asec-doc__dl{ color:var(--c-text-muted); flex:none; transition:color .2s ease, transform .2s ease; } .asec-doc__dl svg{ width:20px; height:20px; } .asec-doc:hover .asec-doc__dl{ color:var(--c-red); transform:translateY(2px); } .asec-doc--nolink{ cursor:default; } .asec-doc--nolink:hover{ transform:none; border-color:var(--c-border); box-shadow:var(--shadow-sm); } body.asec-edit-mode .asec-doc__title:empty::before{ content:'Titel'; color:var(--c-text-muted); font-weight:400; } body.asec-edit-mode .asec-doc__meta:empty::before{ content:'z. B. PDF, 420 kB'; color:var(--c-text-muted); } /* ========================================================= v3.17.0 - Team-Sektion (Personen): Slider / Karten / Tabelle ========================================================= */ .asec-team{ padding:var(--sp-7) 0; position:relative; } .asec-team__head{ max-width:62ch; margin-bottom:var(--sp-5); } .asec-team__intro{ color:var(--c-text-muted); margin-top:var(--sp-2); } .asec-team__viewpick{ display:inline-block; margin-top:var(--sp-3); font-size:.8125rem; } .asec-team__viewpick select{ margin-left:6px; padding:4px 8px; border:1px solid var(--c-border); border-radius:var(--radius-xs); background:var(--c-surface); } /* Personenkarte (für Slider und Raster gleich) */ .asec-person{ margin:0; display:flex; flex-direction:column; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft); } .asec-person:hover{ box-shadow:var(--shadow-md); } .asec-person__photo{ position:relative; aspect-ratio:3 / 4; background:var(--c-bg-alt); display:block; } .asec-person__photo img{ width:100%; height:100%; object-fit:cover; display:block; } .asec-person__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--c-red); background:linear-gradient(150deg, var(--c-red-tint), var(--c-bg-alt)); font-size:clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); font-weight:800; letter-spacing:.02em; } .asec-person__ph svg{ width:96px; height:96px; opacity:.55; } .asec-person__btn{ position:absolute; left:10px; top:10px; z-index:3; display:none; padding:4px 10px; font-size:12px; font-weight:600; border:0; border-radius:8px; background:var(--c-red); color:#fff; cursor:pointer; } body.asec-edit-mode .asec-person__photo:hover .asec-person__btn{ display:inline-flex; } .asec-person__body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:2px; } .asec-person__name{ font-weight:700; font-size:1.0625rem; color:var(--c-text); } .asec-person__role{ font-size:.875rem; color:var(--c-text-muted); } .asec-person__mail{ font-size:.8125rem; color:var(--c-red); text-decoration:none; margin-top:4px; overflow-wrap:anywhere; } .asec-person__mail:hover{ text-decoration:underline; } /* Ansicht: Karten-Raster */ .asec-team--cards .asec-team__track{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--sp-4); } /* Ansicht: gleitende Karten (Slider) - Standard */ .asec-team--slider .asec-team__track{ display:flex; gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:var(--sp-2); } .asec-team--slider .asec-team__track::-webkit-scrollbar{ display:none; } .asec-team--slider .asec-person{ flex:0 0 clamp(220px, 24vw, 280px); scroll-snap-align:start; } .asec-team__nav{ display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-3); } .asec-team__arrow{ width:44px; height:44px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-text); font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease, border-color .15s ease; } .asec-team__arrow:hover{ background:var(--c-red); color:#fff; border-color:var(--c-red); } @media (max-width:760px){ .asec-team__nav{ display:none; } } /* Ansicht: Tabelle */ .asec-team__table{ width:100%; border-collapse:collapse; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); overflow:hidden; } .asec-team__table th, .asec-team__table td{ text-align:left; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--c-border); font-size:.9375rem; } .asec-team__table th{ background:var(--c-bg-alt); font-weight:700; color:var(--c-text); } .asec-team__table td a{ color:var(--c-red); text-decoration:none; } .asec-team__table tr:last-child td{ border-bottom:0; } @media (max-width:620px){ .asec-team__table thead{ display:none; } .asec-team__table tr{ display:block; border-bottom:1px solid var(--c-border); padding:var(--sp-2) 0; } .asec-team__table td{ display:block; border:0; padding:3px var(--sp-4); } .asec-team__table td:first-child{ font-weight:700; } } /* ========================================================= v3.17.0 - Individuelle Seitenlayouts Hero-Varianten, Wochenplan, nummerierte Regeln. ========================================================= */ /* ---------- Hero-Varianten ---------- */ .asec-hero--compact{ display:block; padding:var(--sp-6) 0 var(--sp-4); } .asec-hero--compact .asec-hero__media{ display:none; } .asec-hero--compact h1{ font-size:clamp(1.75rem, 1.3rem + 2vw, 2.5rem); margin-bottom:var(--sp-3); } .asec-hero--compact .asec-hero__lead{ max-width:62ch; } .asec-hero--band{ display:block; text-align:center; padding:var(--sp-8) var(--sp-5); background:linear-gradient(135deg, var(--c-red-tint), var(--c-bg-alt)); border:1px solid var(--c-border); border-radius:var(--radius-lg); } .asec-hero--band .asec-hero__media{ display:none; } .asec-hero--band .asec-hero__lead{ margin-inline:auto; max-width:58ch; } .asec-hero--band .asec-cta-row{ justify-content:center; } .asec-hero--center{ display:block; text-align:center; padding:var(--sp-8) 0 var(--sp-5); } .asec-hero--center .asec-hero__media{ display:none; } .asec-hero--center .asec-hero__lead{ margin-inline:auto; max-width:58ch; } .asec-hero--center .asec-cta-row{ justify-content:center; } /* ---------- Wochenplan ---------- */ .asec-schedule{ padding:var(--sp-7) 0; } .asec-schedule__head{ max-width:62ch; margin-bottom:var(--sp-5); } .asec-schedule__intro{ color:var(--c-text-muted); margin-top:var(--sp-2); } .asec-legend{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:var(--sp-3); font-size:.8125rem; color:var(--c-text-muted); } .asec-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; } .asec-legend i.is-aussen{ background:var(--c-red); } .asec-legend i.is-halle{ background:var(--c-text); margin-left:10px; } .asec-schedule__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); } .asec-slot{ display:grid; grid-template-columns:130px 170px 1fr; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); background:var(--c-surface); border:1px solid var(--c-border); border-left:4px solid var(--c-red); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); } .asec-slot.is-halle{ border-left-color:var(--c-text); } .asec-slot__day{ font-weight:800; } .asec-slot__time{ font-weight:700; color:var(--c-red); font-variant-numeric:tabular-nums; } .asec-slot.is-halle .asec-slot__time{ color:var(--c-text); } .asec-slot__what{ color:var(--c-text-muted); } .asec-slot__place{ font-size:.75rem; padding:3px 6px; border:1px solid var(--c-border); border-radius:6px; } @media (max-width:700px){ .asec-slot{ grid-template-columns:1fr; gap:2px; } } /* ---------- Nummerierte Regeln ---------- */ .asec-rules{ padding:var(--sp-7) 0; } .asec-rules__head{ max-width:62ch; margin-bottom:var(--sp-5); } .asec-rules__intro{ color:var(--c-text-muted); margin-top:var(--sp-2); } .asec-rules__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--sp-3); } .asec-rule{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-4); background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); } .asec-rule__no{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--c-red); color:#fff; font-weight:800; font-size:.9375rem; } .asec-rule__txt{ line-height:1.5; padding-top:5px; } /* Stil-Auswahl des Kopfbereichs (nur im Bearbeitungsmodus). */ .asec-hero__stylepick{ display:none; } body.asec-edit-mode .asec-hero__stylepick{ display:inline-block; margin-bottom:var(--sp-3); padding:4px 8px; font-size:.75rem; border:1px solid var(--c-border); border-radius:var(--radius-xs); background:var(--c-surface); } .site-main:focus{ outline:none; } .site-main{ display:block; } .nav-list li.is-open > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity .16s ease, transform .16s ease, visibility 0s; } .nav-list .menu-item-has-children.is-open > a::after{ transform:rotate(-135deg) translateY(2px); } .nav-list > li.current-menu-ancestor > a, .nav-list > li.current-menu-parent > a{ color:var(--c-text); } .nav-list .sub-menu li.current-menu-item > a{ background:var(--c-red-tint); color:var(--c-red); } .mobile-nav__list .menu-item-has-children > a{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .mobile-nav__list .menu-item-has-children > a::after{ content:''; flex:none; width:8px; height:8px; margin-right:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease-soft); } .js .mobile-nav__list .sub-menu{ display:none; } .js .mobile-nav__list .is-open > .sub-menu{ display:block; animation:artemisDrop .22s var(--ease-soft); } .mobile-nav__list .is-open > a::after{ transform:rotate(-135deg) translateY(-2px); } .mobile-nav__list .current-menu-item > a{ color:var(--c-red); } html:not(.js) .nav-toggle{ display:none; } @media (max-width:1080px){ html:not(.js) .mobile-nav{ max-height:none; } } @keyframes artemisDrop{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } } .page-hero--compact{ padding:clamp(36px, 5vw, 64px) 0 clamp(20px, 3vw, 32px); } .page-hero--compact h1{ margin-bottom:.35em; } .page-hero--center{ text-align:center; padding:clamp(56px, 9vw, 120px) 0; } .page-hero--center .page-hero__inner{ margin:0 auto; } .page-hero--center .page-hero__lead{ margin-left:auto; margin-right:auto; } .page-hero--center .page-hero__cta-row{ justify-content:center; } .page-hero--center .search-form{ margin-left:auto; margin-right:auto; } .page-hero__lead{ max-width:68ch; margin:var(--sp-3) 0 0; font-size:clamp(1rem, .95rem + .3vw, 1.125rem); line-height:1.65; color:var(--c-text-muted); } .page-hero__lead > :first-child{ margin-top:0; } .page-hero__lead > :last-child{ margin-bottom:0; } .page-hero__lead p{ margin:0 0 .7em; } .page-hero__lead a{ color:var(--c-red); text-decoration:underline; text-underline-offset:3px; } .page-hero__inner > .artemis-muted{ margin:var(--sp-3) 0 0; } .artemis-adminlink{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-3); font-size:.8125rem; font-weight:700; color:var(--c-red); text-decoration:underline; text-underline-offset:3px; } .search-form{ display:flex; gap:var(--sp-2); width:100%; max-width:560px; margin-top:var(--sp-5); } .search-field{ flex:1; min-width:0; min-height:46px; padding:10px 16px; font:inherit; font-size:16px; color:var(--c-text); background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-sm); -webkit-appearance:none; appearance:none; } .search-field:focus{ outline:none; border-color:var(--c-red); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-red) 18%, transparent); } .search-submit{ flex:none; } .search-results{ padding-bottom:var(--section-y); } .search-results__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); max-width:860px; } .search-results__item a{ display:flex; flex-direction:column; gap:4px; padding:var(--sp-4) var(--sp-5); background:var(--c-surface); border:1px solid var(--c-border); border-left:3px solid transparent; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); transition:transform .2s var(--ease-soft), box-shadow .2s ease, border-left-color .2s ease; } .search-results__item a:hover{ box-shadow:var(--shadow-soft-2); border-left-color:var(--c-red); } .search-results__type{ font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--c-red); } .search-results__item strong{ font-size:1.0625rem; line-height:1.35; } .search-results__excerpt{ font-size:.9375rem; color:var(--c-text-muted); } .news-section{ padding-bottom:var(--section-y); } .news-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2vw, 24px); } .news-card{ display:flex; min-width:0; } .news-card__link{ display:flex; flex-direction:column; width:100%; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft-1); transition:transform .25s var(--ease-soft), box-shadow .25s ease, border-color .25s ease; } .news-card__link:hover{ box-shadow:var(--shadow-soft-2); border-color:transparent; } .news-card__media{ position:relative; display:block; aspect-ratio:3 / 2; overflow:hidden; background:var(--c-bg-alt); } .news-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-soft); } .news-card__link:hover .news-card__media img{ transform:scale(1.04); } .news-card__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--c-red); background:linear-gradient(150deg, var(--c-red-tint), var(--c-bg-alt)); } .news-card__ph svg{ width:56px; height:56px; opacity:.55; } .news-card__body{ display:flex; flex-direction:column; gap:var(--sp-2); flex:1; padding:var(--sp-5); } .news-card__date{ font-size:.8125rem; font-weight:700; color:var(--c-red); } .news-card__title{ font-size:1.125rem; font-weight:800; line-height:1.3; color:var(--c-text); text-wrap:balance; } .news-card__excerpt{ font-size:.9375rem; line-height:1.55; color:var(--c-text-muted); } .news-card__more{ margin-top:auto; padding-top:var(--sp-2); font-size:.875rem; font-weight:700; color:var(--c-red); } .news-card__link:hover .news-card__more{ text-decoration:underline; text-underline-offset:3px; } @media (max-width:1000px){ .news-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width:600px){ .news-grid{ grid-template-columns:1fr; } .news-card__body{ padding:var(--sp-4); } } .single-post__head{ padding-top:clamp(36px, 5vw, 64px); padding-bottom:var(--sp-5); } .single-post__head .eyebrow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .single-post__head .eyebrow a{ color:var(--c-red); } .single-post__head .eyebrow a:hover{ text-decoration:underline; text-underline-offset:3px; } .single-post__head h1{ max-width:24ch; font-size:clamp(1.875rem, 1.3rem + 2.6vw, 2.875rem); letter-spacing:-0.02em; margin:0; } .single-post__media{ margin-top:0; margin-bottom:0; } .single-post__media img{ width:100%; max-height:min(68vh, 680px); object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft-1); } .single-post__media figcaption{ margin-top:var(--sp-2); font-size:.8125rem; color:var(--c-text-muted); } .single-post__body{ padding-top:var(--section-y-tight); padding-bottom:var(--section-y-tight); } .single-post__foot{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-5); padding-bottom:var(--section-y); } .single-post__nav{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); width:100%; max-width:860px; } .single-post__navlink{ display:flex; flex-direction:column; gap:4px; padding:var(--sp-4) var(--sp-5); background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); transition:transform .2s var(--ease-soft), box-shadow .2s ease, border-color .2s ease; } .single-post__navlink:hover{ box-shadow:var(--shadow-soft-2); border-color:var(--c-red); } .single-post__navlink span{ font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--c-red); } .single-post__navlink strong{ font-size:.9375rem; line-height:1.4; } .single-post__navlink--prev{ grid-column:2; text-align:right; } .single-post__comments{ padding-bottom:var(--section-y); } @media (max-width:600px){ .single-post__nav{ grid-template-columns:1fr; } .single-post__navlink--prev{ grid-column:auto; text-align:left; } } .page-links{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-6); font-weight:700; } .page-links a{ text-decoration:none; } .content-prose > :first-child{ margin-top:0; } .content-prose figure{ margin-left:0; margin-right:0; } .content-prose figcaption, .content-prose .wp-element-caption{ margin-top:var(--sp-2); font-size:.8125rem; color:var(--c-text-muted); text-align:center; } .content-prose .wp-block-gallery{ margin-top:var(--sp-7); } .content-prose .wp-block-gallery img, .content-prose .wp-block-image img{ box-shadow:none; } .content-prose .wp-block-gallery.has-nested-images figure.wp-block-image img{ border-radius:var(--radius-sm); } .content-prose .wp-block-gallery.has-nested-images figure.wp-block-image{ border-radius:var(--radius-sm); overflow:hidden; } .content-prose .wp-block-image .lightbox-trigger{ border-radius:var(--radius-xs); } .content-prose .wp-block-table{ margin-left:0; margin-right:0; overflow-x:auto; -webkit-overflow-scrolling:touch; } .content-prose .wp-block-table table{ min-width:560px; } .content-prose .wp-block-table td, .content-prose .wp-block-table th{ border:0; border-bottom:1px solid var(--c-border); vertical-align:top; } .content-prose .wp-block-table thead{ border-bottom:2px solid var(--c-red); } .content-prose .wp-block-table.is-style-stripes{ border-bottom:0; } .content-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background:var(--c-bg-alt); } .content-prose .wp-block-table.is-style-stripes td, .content-prose .wp-block-table.is-style-stripes th{ border-color:transparent; } .content-prose .wp-block-table td a{ white-space:nowrap; } .content-prose .wp-block-separator{ border:0; border-top:1px solid var(--c-border); margin:var(--sp-7) 0; } .content-prose .wp-block-file{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); } .content-prose .wp-block-file__button{ background:var(--c-red); color:#fff; border-radius:var(--radius-sm); padding:8px 14px; text-decoration:none; } .content-prose .wp-block-buttons{ display:flex; flex-wrap:wrap; gap:var(--sp-3); } .content-prose .wp-block-button__link{ display:inline-flex; align-items:center; min-height:44px; padding:var(--sp-3) var(--sp-5); background:var(--c-red); color:#fff; border-radius:var(--radius-sm); text-decoration:none; font-weight:700; } .content-prose .wp-block-button__link:hover{ background:var(--c-red-dark); color:#fff; } .content-prose address{ font-style:normal; } .content-prose strong{ color:var(--c-text); } .content-prose h2:first-child, .content-prose h3:first-child{ margin-top:0; } .alignwide{ max-width:none; } .aligncenter{ margin-left:auto; margin-right:auto; } .alignleft{ float:left; margin:0 var(--sp-5) var(--sp-4) 0; max-width:50%; } .alignright{ float:right; margin:0 0 var(--sp-4) var(--sp-5); max-width:50%; } .has-text-align-center{ text-align:center; } .has-text-align-right{ text-align:right; } @media (max-width:600px){ .alignleft, .alignright{ float:none; margin:0 0 var(--sp-4); max-width:100%; } .content-prose .wp-block-table table{ min-width:520px; font-size:.875rem; } } .sidebar-card__title{ font-size:15px; margin:0 0 16px; } .sidebar-card__list li > span:last-child{ min-width:0; } .artemis-password{ padding-top:var(--section-y); padding-bottom:var(--section-y); } .post-password-form{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:460px; } .post-password-form label{ display:flex; flex-direction:column; gap:6px; font-weight:700; } .post-password-form input[type="password"]{ min-height:46px; padding:10px 14px; font:inherit; border:1px solid var(--c-border); border-radius:var(--radius-sm); background:var(--c-surface); } .post-password-form input[type="submit"]{ align-self:flex-start; min-height:44px; padding:10px 22px; border:0; border-radius:var(--radius-sm); background:var(--c-red); color:#fff; font:inherit; font-weight:700; cursor:pointer; } .asec-prose p{ margin:0 0 .9em; } .asec-prose p:last-child{ margin-bottom:0; } .asec-prose a{ color:var(--c-red); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; } .asec-prose a:hover{ color:var(--c-red-dark); } .asec-text .asec-prose{ font-size:clamp(1rem, .96rem + .2vw, 1.0625rem); line-height:1.7; } .asec-faq__item .asec-prose{ padding-bottom:18px; font-size:14.5px; line-height:1.65; } .asec-faq__item .asec-prose p{ padding:0; margin:0 0 .7em; font-size:inherit; } .asec-faq__item .asec-prose p:last-child{ margin-bottom:0; } .asec-al-center .asec-prose{ margin-left:auto; margin-right:auto; } .asec-content{ padding:var(--section-y-tight) 0; } .asec-content > h2{ margin-bottom:var(--sp-5); } .asec-content .content-prose{ max-width:860px; } .asec-content__hint{ margin:var(--sp-5) 0 0; padding:var(--sp-3) var(--sp-4); font-size:.8125rem; color:var(--c-text-muted); background:var(--c-bg-alt); border:1px dashed var(--c-border); border-radius:var(--radius-sm); } .asec-content__hint a{ color:var(--c-red); font-weight:700; text-decoration:underline; } .asec-spacer{ display:block; } .asec-team__tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .asec-links{ padding:var(--section-y-tight) 0; } .asec-links__head{ max-width:62ch; margin-bottom:var(--sp-5); } .asec-links__intro{ color:var(--c-text-muted); margin:var(--sp-2) 0 0; } .asec-links__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); } .asec-links__list > li{ display:flex; min-width:0; } .asec-link{ position:relative; display:flex; align-items:center; gap:var(--sp-4); width:100%; padding:var(--sp-4) var(--sp-5); background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); color:var(--c-text); transition:transform .2s var(--ease-soft), box-shadow .2s ease, border-color .2s ease; } .asec-link:hover{ box-shadow:var(--shadow-soft-2); border-color:var(--c-red); } .asec-link__body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; } .asec-link__label{ font-weight:700; line-height:1.35; overflow-wrap:anywhere; } .asec-link__meta{ font-size:.875rem; line-height:1.45; color:var(--c-text-muted); } .asec-link__meta:empty{ display:none; } .asec-link__host{ flex:none; max-width:38%; padding:4px 8px; font-size:.75rem; font-weight:600; color:var(--c-text-muted); background:var(--c-bg-alt); border-radius:var(--radius-xs); overflow-wrap:anywhere; } .asec-link__arrow{ flex:none; width:20px; height:20px; color:var(--c-red); transition:transform .2s ease; } .asec-link:hover .asec-link__arrow{ transform:translate(2px, -2px); } @media (max-width:760px){ .asec-links__list{ grid-template-columns:1fr; } .asec-link{ padding:var(--sp-4); } .asec-link__host{ display:none; } } .asec-gallery__link{ display:block; width:100%; height:100%; cursor:zoom-in; } .asec-gallery__link img{ transition:transform .6s var(--ease-soft); } .asec-gallery__link:hover img{ transform:scale(1.05); } .asec-gallery__link:focus-visible{ outline:3px solid var(--c-red); outline-offset:-3px; } body.asec-edit-mode .asec-gallery__link{ cursor:default; } body.asec-edit-mode .asec-gallery__link:hover img{ transform:none; } .alb{ position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center; padding:64px 72px; background:rgba(9,12,16,.94); animation:albFade .2s ease; } .alb[hidden]{ display:none; } .alb__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); max-width:100%; max-height:100%; } .alb__img{ display:block; width:auto; height:auto; max-width:min(1400px, 100%); max-height:calc(100vh - 150px); object-fit:contain; border-radius:var(--radius-sm); box-shadow:0 24px 70px rgba(0,0,0,.45); background:#111; } .alb__cap{ max-width:720px; color:rgba(255,255,255,.86); font-size:.875rem; line-height:1.5; text-align:center; } .alb__btn{ position:absolute; display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-sm); background:rgba(255,255,255,.08); color:#fff; font-size:26px; line-height:1; cursor:pointer; transition:background .15s ease, border-color .15s ease; } .alb__btn:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); } .alb__close{ top:16px; right:16px; font-size:18px; } .alb__prev{ left:14px; top:50%; transform:translateY(-50%); } .alb__next{ right:14px; top:50%; transform:translateY(-50%); } .alb__count{ position:absolute; top:28px; left:22px; color:rgba(255,255,255,.72); font-size:.8125rem; font-weight:700; letter-spacing:.04em; } .alb--single .alb__prev, .alb--single .alb__next, .alb--single .alb__count{ display:none; } body.alb-open{ overflow:hidden; } @keyframes albFade{ from{ opacity:0; } to{ opacity:1; } } @media (max-width:760px){ .alb{ padding:64px 10px 84px; } .alb__img{ max-height:calc(100vh - 190px); } .alb__prev, .alb__next{ top:auto; bottom:16px; transform:none; } .alb__prev{ left:calc(50% - 58px); } .alb__next{ right:calc(50% - 58px); } } .map-consent{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3); width:100%; height:100%; min-height:220px; padding:var(--sp-5); text-align:center; background:linear-gradient(150deg, var(--c-bg-alt), var(--c-surface)); pointer-events:auto; } .map-consent p{ margin:0; max-width:36ch; font-size:.875rem; color:var(--c-text-muted); } .bento-card--map .map-consent, .bento-card--map .js-map-consent{ pointer-events:auto; } .bento-card--map .map-consent{ position:absolute; inset:0; min-height:0; padding:var(--sp-4) var(--sp-4) 72px; } .bento-card--map .map-consent p{ font-size:.75rem; } .kontakt-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .kontakt-card{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); } .kontakt-card p{ margin:0; } .kontakt-card .btn{ margin-top:auto; } .kontakt-card > p + .btn, .kontakt-card > .artemis-muted + .btn{ margin-top:var(--sp-3); } .kontakt-card__title{ font-size:1.125rem; margin:0 0 var(--sp-1); } .kontakt-card--red .kontakt-card__title{ color:#fff; } .kontakt-card__mails{ list-style:none; margin:var(--sp-1) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); width:100%; } .kontakt-card__mails li{ display:flex; flex-direction:column; gap:1px; } .kontakt-card__mails a{ font-weight:700; color:#fff; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; } .kontakt-card__mails span{ font-size:.8125rem; color:rgba(255,255,255,.86); } .kontakt-hours{ padding-bottom:var(--section-y); } .kontakt-hours .opening-hours{ max-width:640px; } .kontakt-hours__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-5) 0 0; } @media (max-width:960px){ .kontakt-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .kontakt-grid .kontakt-card--red{ grid-column:1 / -1; } } @media (max-width:640px){ .kontakt-grid{ grid-template-columns:1fr; } .kontakt-hours__actions .btn{ flex:1 1 100%; justify-content:center; } } .bento-card__excerpt{ display:block; overflow:visible; } .bento-cal__title{ white-space:normal; overflow-wrap:anywhere; } .bento-card:not(.is-expanded) .bento-card__cal--full{ display:none !important; } @media (max-width:760px){ .bento-card:not(.is-expanded){ overflow:clip; } } @media (max-width:760px) and (orientation:portrait){ .bento-card:not(.is-expanded){ min-height:auto; } } @supports not (overflow:clip){ @media (max-width:760px){ .bento-card:not(.is-expanded){ aspect-ratio:auto; min-height:min(92vw, 360px); } } } .asec-steps__fill{ width:var(--steps-p, 0%); } @media (max-width:760px){ .asec-steps__grid--animated{ padding-left:34px; } .asec-steps__track{ left:12px; right:auto; top:30px; bottom:30px; width:2px; height:auto; } .asec-steps__fill{ width:100% !important; height:var(--steps-p, 0%); transition:height 1.2s cubic-bezier(.22,.8,.28,1); } .asec-steps__grid--animated .asec-steps__card{ opacity:1; } .asec-steps__grid--animated .asec-steps__card:not(.is-done):not(.is-active) h3, .asec-steps__grid--animated .asec-steps__card:not(.is-done):not(.is-active) p{ color:var(--c-text-muted); } .asec-steps__grid--animated .asec-steps__card::before{ content:''; position:absolute; left:-28px; top:24px; width:12px; height:12px; border-radius:4px; background:var(--c-surface); border:2px solid var(--c-border); transition:background .6s ease, border-color .6s ease; } .asec-steps__grid--animated .asec-steps__card.is-done::before, .asec-steps__grid--animated .asec-steps__card.is-active::before{ background:var(--c-red); border-color:var(--c-red); } } .asec-linkbtn{ position:absolute; top:-10px; right:-10px; z-index:40; display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 7px; border-radius:7px; background:var(--c-text); color:#fff; font-size:11px; font-weight:700; line-height:1; letter-spacing:.02em; box-shadow:var(--shadow-soft-1); cursor:pointer; user-select:none; } .asec-linkbtn:hover, .asec-linkbtn:focus-visible{ background:var(--c-red); } body.asec-edit-mode a[data-field-url]{ position:relative; } body.asec-edit-mode .asec-cta::after{ display:none; } body.asec-edit-mode .asec-link__meta:empty{ display:block; min-height:1.3em; } body.asec-edit-mode .asec-link__meta:empty::before{ content:'Kurzbeschreibung'; color:var(--c-text-muted); opacity:.6; } body.asec-edit-mode .asec-link__label:empty::before{ content:'Linktext'; color:var(--c-text-muted); } body.asec-edit-mode .asec-prose:empty::before{ content:'Text eingeben'; color:var(--c-text-muted); } body.asec-edit-mode .asec-prose[contenteditable="true"]{ min-height:1.6em; } .asec-icspick{ display:flex; align-items:center; gap:8px; margin-top:var(--sp-3); font-size:.75rem; font-weight:700; color:var(--c-text-muted); } .asec-icspick select{ font:inherit; font-weight:400; padding:4px 8px; border:1px solid var(--c-border); border-radius:var(--radius-xs); background:var(--c-surface); } @media print{ .site-header, .site-footer, .mobile-nav, .asec-editbar, .bento-overlay-backdrop, .next-steps, .single-post__nav, .alb{ display:none !important; } body{ padding-top:0 !important; background:#fff; } .reveal, .reveal--hidden{ opacity:1 !important; transform:none !important; } a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:.8em; color:#555; } } .bento-card{ isolation:isolate; } .bento-card__media img{ will-change:auto; transform:none; transition:none; image-rendering:auto; } .bento-card__media svg{ transition:none; transform:none; } .bento-card:hover .bento-card__media img, .bento-card:hover .bento-card__media svg{ transform:none; } .bento-card::after{ border-radius:inherit; } .bento .reveal.reveal--hidden, .bento.reveal.reveal--hidden{ transform:none; } .single-post__head, .single-post__media, .single-post__body, .single-post__foot, .single-post__comments{ max-width:880px; margin-left:auto; margin-right:auto; width:100%; } .single-post__head h1{ max-width:none; } .single-post .entry-content{ max-width:none; } .single-post__nav{ max-width:none; } .single-post__foot{ align-items:flex-start; } .bento-card[data-surface="dark"]{ --bc-fg:#fff; --bc-fg2:rgba(255,255,255,.88); --bc-chip:rgba(255,255,255,.2); --bc-chip-fg:#fff; --bc-btn:#fff; --bc-btn-fg:var(--c-text); --bc-line:rgba(255,255,255,.28); --bc-date:rgba(255,255,255,.2); --bc-date-fg:#fff; } .bento-card[data-surface="light"]{ --bc-fg:var(--c-text); --bc-fg2:var(--c-text-muted); --bc-chip:rgba(18,24,31,.08); --bc-chip-fg:var(--c-text); --bc-btn:var(--c-red); --bc-btn-fg:#fff; --bc-line:var(--c-border); --bc-date:var(--c-red-tint); --bc-date-fg:var(--c-red); } .bento-card[data-surface][class] .bento-card__title, .bento-card[data-surface][class] .bento-cal__title{ color:var(--bc-fg) !important; } .bento-card[data-surface][class] .bento-card__excerpt, .bento-card[data-surface][class] .bento-card__expand-text, .bento-card[data-surface][class] .bento-cal__time, .bento-card[data-surface][class] .bento-cal__meta .bento-cal__time, .bento-card[data-surface][class] .bento-cal__empty{ color:var(--bc-fg2) !important; } .bento-card[data-surface][class] .bento-card__title, .bento-card[data-surface][class] .bento-card__excerpt{ text-shadow:none; } .bento-card[data-surface="dark"][class].bento-card--has-media:not(.bento-card--plain) .bento-card__title, .bento-card[data-surface="dark"][class].bento-card--has-media:not(.bento-card--plain) .bento-card__excerpt{ text-shadow:0 1px 12px rgba(18,24,31,.45); } .bento-card[data-surface][class] .bento-card__arrow, .bento-card[data-surface][class] .bento-card__close, .bento-card[data-surface][class] .bento-card__glyph{ background:var(--bc-chip); color:var(--bc-chip-fg); } .bento-card[data-surface][class] .bento-card__expand-btn{ background:var(--bc-btn); color:var(--bc-btn-fg); } .bento-card[data-surface][class] .bento-card__expand-panel{ border-top-color:var(--bc-line); } .bento-card[data-surface][class] .bento-cal__date{ background:var(--bc-date); color:var(--bc-date-fg); } .bento-card[data-surface][class] .bento-cal__date *{ color:var(--bc-date-fg); } .bento-card[data-surface="light"][class] .bento-card__plain{ color:var(--c-red); opacity:.16; } .bento-card[data-surface="dark"][class].bento-card--plain .bento-card__plain{ color:#fff; opacity:.22; } .bento-card[data-surface][class]::after{ box-shadow:inset 0 0 0 1px var(--bc-line); } .bento-card[data-surface="light"][class] .bento-card__media ~ .bento-card__scrim{ background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.9)); } .map-credit{ color:#fff; background:rgba(18,24,31,.62); } .bento-card--map .map-credit, .kontakt-map__frame .map-credit{ color:var(--c-text); background:rgba(255,255,255,.92); } .bento-card--map .bento-map__btn{ background:var(--c-red); color:#fff; } .agallery-grid{ grid-template-columns:repeat(var(--g-cols, 3), minmax(0, 1fr)); grid-auto-rows:auto; } .agallery-grid--compact{ grid-template-columns:repeat(var(--g-cols, 3), minmax(0, 1fr)); } .agallery-grid--compact .agallery-card::after{ display:none; } .agallery-grid--compact .agallery-card{ height:100%; } .agallery-grid--compact .agallery-card__media{ aspect-ratio:var(--g-ratio, 4 / 3); } .agallery-grid:not(.agallery-grid--compact) .agallery-card{ aspect-ratio:4 / 3; } .agallery-card::after{ background:linear-gradient(180deg, transparent 55%, rgba(18,24,31,.5) 100%); } .agallery__tools{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4); background:var(--c-bg-alt); border:1px dashed var(--c-border); border-radius:var(--radius-sm); font-size:.8125rem; } .agallery__tools label{ display:inline-flex; align-items:center; gap:var(--sp-2); font-weight:700; } .agallery__tools select{ font:inherit; padding:4px 8px; border:1px solid var(--c-border); border-radius:var(--radius-xs); background:#fff; color:var(--c-text); } .agallery__tools-hint{ color:var(--c-text-muted); } .agallery__empty{ color:var(--c-text-muted); } @media (max-width:520px){ .agallery-grid--compact{ grid-template-columns:repeat(var(--g-cols, 2), minmax(0, 1fr)); } } .bento-card.is-expanded.bento-card--content-calendar .bento-card__body{ flex:0 0 auto; } .bento-card.is-expanded .bento-card__cal--full{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin-top:var(--sp-4); } .bento-card.is-expanded .bento-card__cal--full .bento-cal{ flex:1 1 auto; min-height:0; align-content:stretch; } .bento-card.is-expanded .bento-card__cal--full .bento-cal--list{ display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:minmax(54px,1fr); gap:var(--sp-2); } .bento-card.is-expanded .bento-card__cal--full .bento-cal--list .bento-cal__row{ padding:0 var(--sp-3); border-radius:var(--radius-sm); background:var(--bc-chip); align-items:center; } .bento-card.is-expanded .bento-card__cal--full .bento-cal--details{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows:minmax(86px,1fr); gap:var(--sp-3); } .bento-card.is-expanded .bento-card__cal--full .bento-cal--details .bento-cal__row{ align-items:flex-start; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md); background:var(--bc-chip); gap:var(--sp-3); } .bento-card.is-expanded .bento-card__cal--full .bento-cal--details .bento-cal__date{ width:52px; height:52px; flex:0 0 auto; } .bento-card.is-expanded .bento-card__cal--full .bento-cal--details .bento-cal__day{ font-size:20px; } .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows:minmax(150px,1fr); gap:var(--sp-3); } .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid .bento-cal__row{ flex-direction:column; align-items:flex-start; justify-content:space-between; padding:var(--sp-4); border-radius:var(--radius-md); background:var(--bc-chip); gap:var(--sp-3); } .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid .bento-cal__date{ width:56px; height:56px; } .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid .bento-cal__day{ font-size:22px; } .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid .bento-cal__title{ font-size:15px; } .bento-cal__place{ font-size:11.5px; color:var(--bc-fg2); overflow-wrap:anywhere; } .bento-cal__tag{ display:inline-flex; align-self:flex-start; margin-top:4px; padding:2px 8px; border-radius:var(--radius-xs); background:var(--bc-btn); color:var(--bc-btn-fg); font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } .bento-cal__row{ min-width:0; } .bento-cal__meta{ min-width:0; } .bento-card[data-surface][class] .bento-cal__place{ color:var(--bc-fg2) !important; } .bento-inline{ max-height:calc(100% - 24px); overflow:auto; } .bento-inline__btn--danger{ background:rgba(195,0,74,.85); } .bento-add{ display:none; position:absolute; left:var(--gutter); bottom:calc(var(--section-y) / 2 - 18px); z-index:6; padding:10px 18px; border:2px dashed var(--c-red); border-radius:12px; background:var(--c-surface, #fff); color:var(--c-red); font:700 .8125rem/1 var(--font-body); cursor:pointer; } .bento-add:hover{ background:var(--c-red); color:#fff; } body.bento-inline-edit .bento-add{ display:inline-flex; } @media (min-width:901px){ .bento-card.is-expanded .bento-card__cal--full .bento-cal--details, .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid{ grid-template-columns:repeat(var(--cal-cols, 3), minmax(0, 1fr)); } } @media (max-width:900px){ .bento-card.is-expanded .bento-card__cal--full .bento-cal--details{ grid-template-columns:minmax(0,1fr); } .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:minmax(130px,auto); } } .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid .bento-cal__row{ justify-content:flex-start; } .bento-card.is-expanded .bento-card__cal--full .bento-cal--details .bento-cal__meta, .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid .bento-cal__meta{ gap:3px; } .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid{ grid-auto-rows:minmax(max-content, 1fr); } .bento-card.is-expanded .bento-card__cal--full .bento-cal--details{ grid-auto-rows:minmax(max-content, 1fr); } .bento-card.is-expanded .bento-card__cal--full .bento-cal--list{ grid-auto-rows:minmax(max-content, 1fr); } @media (max-width:900px){ .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid{ grid-auto-rows:minmax(max-content, auto); } } .bento-inline__row{ flex-wrap:wrap; } .bento-inline::-webkit-scrollbar{ width:6px; } .bento-inline::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.4); border-radius:3px; } .bento-card__facts{ display:none; } .bento-card.is-expanded .bento-card__facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows:1fr; gap:var(--sp-3); flex:1 1 auto; margin-top:var(--sp-3); } .bento-card.is-expanded .bento-card__fact{ display:flex; flex-direction:column; justify-content:center; gap:6px; padding:var(--sp-4); border-radius:var(--radius-md); background:var(--bc-chip); text-align:left; } .bento-card.is-expanded .bento-card__fact-title{ font-weight:800; font-size:1.0625rem; color:var(--bc-fg); } .bento-card.is-expanded .bento-card__fact-text{ font-size:.9375rem; line-height:1.5; color:var(--bc-fg2); } .bento-card[data-click-mode="expand"].is-expanded .bento-card__expand-panel{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } @media (max-width:900px){ .bento-card.is-expanded .bento-card__facts{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; } } .bento-card[data-surface="dark"].is-expanded .bento-card__fact{ background:rgba(18,24,31,.5); } @media (max-width:900px){ .bento-card[data-click-mode="expand"].is-expanded{ display:block; overflow-y:auto; -webkit-overflow-scrolling:touch; background-color:var(--c-surface, #fff); max-height:84vh; } .bento-card.is-expanded .bento-card__cal--full, .bento-card[data-click-mode="expand"].is-expanded .bento-card__expand-panel{ display:block; flex:none; min-height:0; } .bento-card.is-expanded .bento-card__cal--full .bento-cal, .bento-card.is-expanded .bento-card__cal--full .bento-cal--list, .bento-card.is-expanded .bento-card__cal--full .bento-cal--details, .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid{ display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:8px; } .bento-card.is-expanded .bento-card__cal--full .bento-cal .bento-cal__row, .bento-card.is-expanded .bento-card__cal--full .bento-cal--list .bento-cal__row, .bento-card.is-expanded .bento-card__cal--full .bento-cal--details .bento-cal__row, .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid .bento-cal__row{ flex-direction:row; align-items:center; justify-content:flex-start; padding:10px 12px; border-radius:var(--radius-sm); background:var(--bc-chip); gap:10px; } .bento-card.is-expanded .bento-card__cal--full .bento-cal .bento-cal__date, .bento-card.is-expanded .bento-card__cal--full .bento-cal--grid .bento-cal__date, .bento-card.is-expanded .bento-card__cal--full .bento-cal--details .bento-cal__date{ width:40px; height:40px; flex:0 0 auto; } .bento-card.is-expanded .bento-card__cal--full .bento-cal .bento-cal__day{ font-size:15px; } .bento-card.is-expanded .bento-card__cal--full .bento-cal .bento-cal__title{ font-size:13.5px; } .bento-card.is-expanded .bento-card__cal--full .bento-cal__row:nth-child(n+6){ display:none; } .bento-card.is-expanded .bento-card__facts{ display:grid; flex:none; } .bento-card.is-expanded .bento-card__expand-actions{ margin-top:12px; padding-top:0; } } body.bento-overlay-open .bento{ z-index:auto; } @media (max-width:900px){ .bento-card.is-expanded .bento-swipe-hint{ position:static; display:block; margin-top:12px; } } @keyframes bentoPopM{ from{ opacity:0; transform:translateY(-47%) scale(.97); } to{ opacity:1; transform:translateY(-50%) scale(1); } } .bento-card-holder{ display:none; } @media (max-width:760px){ .bento-card-holder{ display:block; pointer-events:none; visibility:hidden; flex:0 0 auto; margin-bottom:18px; } body.bento-mobile-carousel .bento-card.reveal{ opacity:1; transform:none; } body.bento-mobile-carousel .bento-card-holder{ margin-bottom:0; } body.bento-mobile-carousel .bento{ align-items:stretch; padding-bottom:var(--sp-3); } body.bento-mobile-carousel .bento-card, body.bento-mobile-carousel .bento-card--1x1, body.bento-mobile-carousel .bento-card--2x1, body.bento-mobile-carousel .bento-card--1x2, body.bento-mobile-carousel .bento-card--2x2{ aspect-ratio:auto; min-height:clamp(300px, 92vw, 380px); flex:0 0 84%; scroll-snap-stop:always; } body.bento-mobile-carousel .bento-card.bento-card--content-calendar{ min-height:clamp(300px, 92vw, 380px); } body.bento-mobile-carousel .bento-card.is-expanded{ flex:none; } body.bento-mobile-carousel .bento{ scroll-padding:0 var(--gutter); } body.bento-mobile-carousel .bento-dots{ display:flex; } } body.bento-overlay-open .bento{ scroll-snap-type:none; } .bento-card-holder{ scroll-snap-align:center; } .bento-card__close:focus-visible, .alb__close:focus-visible, .asec-panel__close:focus-visible{ box-shadow:none !important; outline:2px solid rgba(255,255,255,.9) !important; outline-offset:-4px; border-color:transparent !important; } .asec-gallery{ --g-cols:4; --g-gap:14px; --g-ratio:1/1; } .asec-gallery--cols-2{ --g-cols:2; } .asec-gallery--cols-3{ --g-cols:3; } .asec-gallery--cols-5{ --g-cols:5; } .asec-gallery--cols-6{ --g-cols:6; } .asec-gallery--gap-none{ --g-gap:0px; } .asec-gallery--gap-small{ --g-gap:6px; } .asec-gallery--gap-large{ --g-gap:24px; } .asec-gallery--ratio-landscape{ --g-ratio:4/3; } .asec-gallery--ratio-wide{ --g-ratio:16/9; } .asec-gallery--ratio-portrait{ --g-ratio:3/4; } .asec-gallery .asec-gallery__grid{ display:grid; grid-template-columns:repeat(var(--g-cols), minmax(0, 1fr)); gap:var(--g-gap); } .asec-gallery .asec-gallery__item{ position:relative; aspect-ratio:var(--g-ratio); border-radius:var(--radius-md); overflow:hidden; background:var(--c-bg-alt); margin:0; } .asec-gallery--gap-none .asec-gallery__item{ border-radius:0; } .asec-gallery .asec-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; } .asec-gallery--ratio-original .asec-gallery__item{ aspect-ratio:auto; } .asec-gallery--ratio-original .asec-gallery__item img{ height:auto; } .asec-gallery--masonry .asec-gallery__grid{ display:block; columns:var(--g-cols); column-gap:var(--g-gap); } .asec-gallery--masonry .asec-gallery__item{ aspect-ratio:auto; break-inside:avoid; margin-bottom:var(--g-gap); } .asec-gallery--masonry .asec-gallery__item img{ height:auto; } .asec-gallery--feature .asec-gallery__item:first-child{ grid-column:span 2; grid-row:span 2; } .asec-gallery--slider .asec-gallery__grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:8px; } .asec-gallery--slider .asec-gallery__item{ flex:0 0 calc((100% - (var(--g-cols) - 1) * var(--g-gap)) / var(--g-cols)); scroll-snap-align:start; } .asec-gallery__cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; color:#fff; font-size:.8125rem; line-height:1.35; background:linear-gradient(transparent, rgba(18,24,31,.72)); pointer-events:none; } .asec-gallery--cap-hover .asec-gallery__cap{ opacity:0; transition:opacity .25s ease; } .asec-gallery--cap-hover .asec-gallery__item:hover .asec-gallery__cap, .asec-gallery--cap-hover .asec-gallery__item:focus-within .asec-gallery__cap{ opacity:1; } @media (hover:none){ .asec-gallery--cap-hover .asec-gallery__cap{ opacity:1; } } .asec-gallery--cap-below .asec-gallery__item{ aspect-ratio:auto; overflow:visible; background:none; } .asec-gallery--cap-below .asec-gallery__link{ aspect-ratio:var(--g-ratio); border-radius:var(--radius-md); overflow:hidden; } .asec-gallery--cap-below.asec-gallery--ratio-original .asec-gallery__link, .asec-gallery--cap-below.asec-gallery--masonry .asec-gallery__link{ aspect-ratio:auto; } .asec-gallery--cap-below .asec-gallery__cap{ position:static; background:none; color:var(--c-text-muted); padding:6px 2px 0; } body:not(.asec-edit-mode) .asec-gallery__item.is-more{ display:none; } body.asec-edit-mode .asec-gallery__more{ display:none; } .asec-gallery.is-all .asec-gallery__item.is-more{ display:block; } .asec-gallery__more{ margin-top:var(--sp-4); } .asec-gallery.is-all .asec-gallery__more{ display:none; } .asec-gallery__opts{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:0 0 14px; padding:10px 12px; border:1px dashed var(--c-border); border-radius:var(--radius-sm); font-size:.8125rem; } .asec-gallery__opts label{ display:inline-flex; align-items:center; gap:6px; font-weight:600; } .asec-gallery__opts select{ padding:4px 8px; border:1px solid var(--c-border); border-radius:var(--radius-xs); background:var(--c-surface); font-size:.8125rem; } .asec-gallery__hint{ color:var(--c-text-muted); flex-basis:100%; } body.asec-edit-mode .asec-gallery__item[draggable="true"]{ cursor:grab; } .asec-gallery__item.is-dragging{ opacity:.4; } @media (max-width:760px){ .asec-gallery{ --g-cols:2 !important; } .asec-gallery--slider{ --g-cols:1.3 !important; } .asec-gallery--feature .asec-gallery__item:first-child{ grid-column:1 / -1; grid-row:auto; } } body:not(.asec-edit-mode) .asec-gallery__opts, body:not(.asec-edit-mode) .asec-gallery__add{ display:none; } .asec-gallery--cap-below .asec-gallery__link{ height:auto; } .asec-gallery--cap-below .asec-gallery__link img{ height:100%; } .asec-gallery--cap-below.asec-gallery--feature .asec-gallery__item:first-child .asec-gallery__link{ aspect-ratio:auto; height:calc(100% - 28px); } .asec-gallery--cap-below .asec-gallery__cap{ line-height:1.35; } .asec-steps__grid--animated .asec-steps__card, .asec-steps__grid--animated .asec-steps__card.is-done{ opacity:1 !important; } .asec-steps__grid--animated .asec-steps__card > *{ opacity:.5; transition:opacity .9s ease; } .asec-steps__grid--animated .asec-steps__card.is-done > *{ opacity:.75; } .asec-steps__grid--animated .asec-steps__card.is-active > *, .asec-steps__grid--animated .asec-steps__card.is-final > *{ opacity:1; } @media (min-width:761px){ .asec-steps__grid--animated .asec-steps__track{ top:49px; z-index:0; } .asec-steps__grid--animated .asec-steps__card, .asec-steps__grid--animated .asec-steps__card.is-done, .asec-steps__grid--animated .asec-steps__card.is-active, .asec-steps__grid--animated .asec-steps__card.is-final{ transform:none !important; } .asec-steps__grid--animated .asec-steps__card{ z-index:1; } .asec-steps__grid--animated .asec-steps__card::before{ content:''; position:absolute; left:0; right:0; top:49px; height:2px; background:var(--c-border); transition:background .6s ease; z-index:0; } .asec-steps__grid--animated .asec-steps__card.is-done::before{ background:var(--c-red); } .asec-steps__grid--animated .asec-steps__card:first-child::before, .asec-steps__grid--animated .asec-steps__track + .asec-steps__card::before{ left:28px; } .asec-steps__grid--animated .asec-steps__card:last-child::before{ right:auto; width:28px; } .asec-steps__grid--animated .asec-steps__card.is-final::before{ display:none; } .asec-steps__grid--animated .asec-steps__num{ position:relative; z-index:1; opacity:1 !important; box-shadow:0 0 0 8px var(--c-surface); background:var(--c-surface); border:2px solid var(--c-border); } .asec-steps__grid--animated .asec-steps__card.is-done .asec-steps__num{ border-color:var(--c-red); color:var(--c-red); } .asec-steps__grid--animated .asec-steps__card.is-active .asec-steps__num{ background:var(--c-red); border-color:var(--c-red); color:#fff; transform:none; } .asec-steps__grid--animated .asec-steps__card.is-final .asec-steps__num{ background:#fff; color:var(--c-red); border-color:#fff; box-shadow:0 0 0 8px var(--c-red); } .asec-steps__grid--animated .asec-steps__card.is-active{ box-shadow:var(--shadow-lg); } }