/* * kiel.css — Komponenten-Designsystem „Dunkel & kinematisch" * anwalt-für-strafrecht-kiel.de (JHB.LEGAL) · GeneratePress-Child, Elementor-Exit. * * Verbindliche Quelle: _spezifikation/DESIGN-BRIEF.md (Farb-Tokens, Motion-Kontrakt, * Sektions-/Komponenten-Treatment) + ARCHITEKTUR.md (Funktionskontrakt: Klassen, * Anker, Formular-Felder bleiben unveraendert). Diese Datei aendert NUR Optik/Layout/ * Motion-Startzustaende — keine Inhalte, keine Texte, keine Feldnamen. * * Kein @import von fonts.css: die Schriften werden im Frontend als eigenes * Stylesheet 'kiel-fonts' enqueued (inc/enqueue.php) und im Block-Editor via * add_editor_style() geladen (inc/setup.php) — so kein render-blockierender @import. * * MOTION-KONTRAKT (bediente Hooks; kiel.js liefert das Verhalten): * - Failsafe-Gate: kiel.js setzt beim Init. Solange diese * Klasse fehlt, sind ALLE data-reveal-Elemente voll sichtbar (opacity 1) — kein * „unsichtbarer" Inhalt, falls JS scheitert. Reduced-Motion wird zusaetzlich vom * @media (prefers-reduced-motion: reduce)-Block unten neutralisiert. * - [data-reveal] Startzustand opacity 0 + translateY(28px); Reveal via .is-revealed. * Richtungen: data-reveal="left|right|scale". data-reveal-delay * (ms) setzt kiel.js als transition-delay inline. * - [data-reveal-group] Container; kiel.js staffelt die Kinder (.is-revealed nacheinander). * - [data-hero] Zeilen-Reveal: .kiel-line > span Startzustand translateY(112%); * Reveal via .kiel-line.is-revealed. Hero-BG leichter Load-Zoom. * - [data-line] Akzentlinie „zeichnet" sich: scaleX(0)→1 via .is-revealed. * - [data-parallax] kiel.js setzt inline transform:translate3d(0,Y,0); CSS ruehrt * die transform NICHT an (nur will-change). * - .kiel-header--scrolled kiel.js ab scrollY>40 → dunkel/blur/schrumpft. * - #kiel-progress kiel.js setzt inline width in % (Lesefortschritt). * - .kiel-magnetic kiel.js setzt inline transform (Cursor-Folgen, nur Feinzeiger). * - #kiel-nav.kiel-nav--open Mobil-Overlay offen. .kiel-burger[aria-expanded]. * - .kiel-stickybar.is-closed { display:none } — Schliessen-Logik unveraendert. * - prefers-reduced-motion: reduce → alles sichtbar, keine Transitions/Animationen. * * @package kiel-gp-child */ /* ========================================================================= 0. Farb-Tokens & Motion-Variablen (:root) — DESIGN-BRIEF §Farb-Tokens ========================================================================= */ :root { /* --- Marke / Signale (CI bleibt) --- */ --kiel-primary: #932077; /* CI: Signale, Leuchten, Akzentlinien */ --kiel-accent: #761D61; /* CI dunkler: Verlaeufe, Tiefen */ --kiel-magenta-glow: #c23a9e; /* helleres Lila fuer Glow/Hover */ --kiel-lav: #d9a8ce; /* zarte Lavendel-Textakzente auf dunkel */ /* --- Dunkle Buehne --- */ --bg-0: #0c0910; /* tiefster Grund */ --bg-1: #140f1b; /* Standard-Sektionsgrund */ --bg-2: #1c1526; /* erhoehte Flaeche / Karten */ --bg-3: #241a30; /* Hover / oberste Ebene */ --line: rgba(217, 168, 206, .14); /* feine Trennlinien */ /* --- Text --- */ --ink: #ece7f0; /* Fliesstext (off-white) */ --ink-strong: #ffffff; /* Headlines */ --ink-mut: #a99fb4; /* gedaempft / Meta */ /* --- Verlaeufe & Leuchten (abgeleitet) --- */ --grad-primary: linear-gradient(135deg, var(--kiel-primary) 0%, var(--kiel-accent) 100%); --glow-soft: 0 0 0 1px var(--line), 0 22px 60px -24px rgba(0, 0, 0, .8); --glow-lila: 0 0 40px -6px rgba(146, 32, 119, .55); /* --- Typografie (self-hosted Familien; siehe assets/css/fonts.css) --- */ --ff-display: "Roboto Slab", Georgia, "Times New Roman", serif; --ff-body: "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --ff-ui: "Poppins", "Roboto", -apple-system, "Segoe UI", sans-serif; /* --- Rhythmus / Form --- */ --header-h: 66px; --radius: 16px; --radius-sm: 10px; --maxw: 1180px; --maxw-read: 720px; --section-py: clamp(3.5rem, 9vw, 8rem); --ease: cubic-bezier(.2, .7, .2, 1); --reveal-dur: .9s; } @media (max-width: 767px) { :root { --header-h: 56px; } } /* ========================================================================= 1. Reset-Ergaenzung & GeneratePress-Wrapper neutralisieren Das Child ersetzt das gesamte Layout — GP-Container werden transparent und voll-breit, unsere .kiel-section steuern Grund/Abstand selbst. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--ff-body); font-weight: 400; font-size: clamp(1rem, .55vw + .9rem, 1.125rem); line-height: 1.7; color: var(--ink); background-color: var(--bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Dunkler Grund: radialer Lila-Schimmer ueber tiefem Verlauf, fixiert. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(1200px 800px at 78% -6%, rgba(146, 32, 119, .18), transparent 60%), radial-gradient(900px 700px at 8% 12%, rgba(118, 29, 97, .16), transparent 55%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-0) 100%); pointer-events: none; } /* Sehr subtiles Filmkorn (fixiert, dekorativ). */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .04; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* GP-Struktur transparent + voll-breit; unsere Sektionen steuern Layout. */ .site, #page, .site-content, #content, #primary, .content-area, #main, .site-main, .inside-article, .entry-header { background: transparent; } .site-content, #primary, .content-area, #main, .site-main { max-width: none; width: 100%; margin: 0; padding: 0; float: none; } .grid-container { max-width: none; } img { max-width: 100%; height: auto; display: block; } a { color: var(--kiel-lav); text-decoration: none; } a:hover, a:focus { color: var(--kiel-primary); } ::selection { background: var(--kiel-primary); color: #fff; } /* Sichtbarer Fokus-Ring (A11y) fuer Tastatur. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--kiel-magenta-glow); outline-offset: 3px; border-radius: 4px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================= 2. Typografie ========================================================================= */ h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); font-weight: 600; color: var(--ink-strong); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } strong, b { color: var(--ink-strong); font-weight: 600; } /* Kleiner Lila-Akzent-Kicker (kurze Linie) vor Sektionstiteln. */ .kiel-section__title, .kiel-footer__heading { position: relative; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 600; padding-top: 1.35rem; } .kiel-section__title::before, .kiel-footer__heading::before { content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--grad-primary); box-shadow: var(--glow-lila); } /* ========================================================================= 3. Motion — Startzustaende (gated hinter html.kiel-js = Failsafe) ========================================================================= */ [data-reveal], .kiel-line > span, [data-line] { /* Standard: sichtbar. Nur mit aktiver Motion werden Startzustaende gesetzt. */ will-change: opacity, transform; } .kiel-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); } .kiel-js [data-reveal="left"] { transform: translateX(-34px); } .kiel-js [data-reveal="right"] { transform: translateX(34px); } .kiel-js [data-reveal="scale"] { transform: scale(.9); } .kiel-js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Hero-Headline: zeilenweiser Reveal (Zeilen in .kiel-line, Text im inneren span). */ .kiel-line { display: block; overflow: hidden; padding-bottom: .06em; /* Unterlaengen der Serifen nicht abschneiden */ } .kiel-line > span { display: block; } .kiel-js [data-hero] .kiel-line > span { transform: translateY(112%); transition: transform 1s var(--ease); } .kiel-js [data-hero] .kiel-line.is-revealed > span { transform: translateY(0); } /* Akzentlinie „zeichnet" sich. */ [data-line] { transform-origin: left center; } .kiel-js [data-line] { transform: scaleX(0); transition: transform 1s var(--ease); } .kiel-js [data-line].is-revealed { transform: scaleX(1); } /* Parallax: kiel.js besitzt die transform. */ [data-parallax] { will-change: transform; } /* Reduced-Motion: absolute Prioritaet — alles sichtbar, nichts bewegt sich. */ @media (prefers-reduced-motion: reduce) { .kiel-js [data-reveal], .kiel-js [data-reveal].is-revealed, .kiel-js [data-hero] .kiel-line > span, .kiel-js [data-line] { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ========================================================================= 4. Scroll-Fortschritt (#kiel-progress) — kiel.js setzt inline width % ========================================================================= */ .kiel-progress { position: fixed; top: 0; left: 0; z-index: 1000; width: 0; height: 3px; background: var(--grad-primary); box-shadow: 0 0 12px -1px rgba(194, 58, 158, .8); pointer-events: none; transition: width .12s linear; } @media (prefers-reduced-motion: reduce) { .kiel-progress { transition: none; } } /* ========================================================================= 5. Header (fixed, transparent → .kiel-header--scrolled dunkel/blur/schrumpft) ========================================================================= */ .kiel-header { position: fixed; top: 0; left: 0; z-index: 900; width: 100%; background: transparent; transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease), padding .35s var(--ease); } .kiel-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; max-width: 100%; /* Logo bündig am linken Rand (kein zentrierter Container) */ margin: 0; padding: clamp(.85rem, 1.6vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.8rem); transition: padding .35s var(--ease); } .kiel-header--scrolled { background: rgba(12, 9, 16, .72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .9); } .kiel-header--scrolled .kiel-header__inner { padding-top: .55rem; padding-bottom: .55rem; } .kiel-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .kiel-header__logo img { width: auto; height: clamp(28px, 3.4vw, 40px); transition: height .35s var(--ease), filter .35s var(--ease); filter: drop-shadow(0 2px 10px rgba(146, 32, 119, .35)); } .kiel-header--scrolled .kiel-header__logo img { height: clamp(24px, 3vw, 34px); } /* --- Desktop-Nav --- */ .kiel-nav { display: flex; } .kiel-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); list-style: none; margin: 0; padding: 0; } .kiel-nav__list li { margin: 0; } .kiel-nav__list a { position: relative; display: inline-block; font-family: var(--ff-ui); font-weight: 500; font-size: .95rem; letter-spacing: .01em; color: var(--ink); padding: .35rem .1rem; transition: color .3s var(--ease); } .kiel-nav__list a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--grad-primary); transform: scaleX(0); transform-origin: right center; transition: transform .4s var(--ease); } .kiel-nav__list a:hover, .kiel-nav__list a:focus, .kiel-nav__list .current-menu-item > a, .kiel-nav__list .current-menu-parent > a, .kiel-nav__list .current_page_parent > a { color: var(--kiel-lav); } .kiel-nav__list a:hover::after, .kiel-nav__list a:focus::after, .kiel-nav__list .current-menu-item > a::after, .kiel-nav__list .current-menu-parent > a::after, .kiel-nav__list .current_page_parent > a::after { transform: scaleX(1); transform-origin: left center; } /* --- Burger (nur Mobil) --- */ .kiel-burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; color: var(--ink); background: rgba(28, 21, 38, .55); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .kiel-burger:hover { color: var(--kiel-lav); border-color: rgba(217, 168, 206, .35); } .kiel-burger__box { position: relative; display: inline-flex; width: 22px; height: 22px; } .kiel-burger__icon { position: absolute; inset: 0; width: 22px; height: 22px; transition: opacity .3s var(--ease), transform .3s var(--ease); } .kiel-burger__icon--close { opacity: 0; transform: rotate(-90deg) scale(.7); } .kiel-burger[aria-expanded="true"] .kiel-burger__icon--open { opacity: 0; transform: rotate(90deg) scale(.7); } .kiel-burger[aria-expanded="true"] .kiel-burger__icon--close { opacity: 1; transform: none; } @media (max-width: 767px) { .kiel-burger { display: inline-flex; position: relative; z-index: 990; } /* WICHTIG: backdrop-filter am Header erzeugt einen Containing-Block, an dem das position:fixed-Overlay hängen bleibt (auf Headerhöhe eingeklemmt → unlesbar). Auf Mobil daher entfernen und stattdessen deckenden Hintergrund nutzen. */ .kiel-header--scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 9, 16, .94); } /* Mobil-Overlay: vollflaechig, VOLL DECKEND, gestaffelter Link-Reveal. */ .kiel-nav { position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center; background: #0b0810; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s var(--ease); } .kiel-nav--open { opacity: 1; visibility: visible; } .kiel-nav__list { flex-direction: column; gap: clamp(1.4rem, 5vw, 2.4rem); text-align: center; } .kiel-nav__list a { font-family: var(--ff-display); font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 400; color: var(--ink-strong); } .kiel-nav__list a::after { height: 3px; } /* Gestaffelter Reveal der Menuepunkte beim Oeffnen. */ .kiel-nav__list li { opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .kiel-nav--open .kiel-nav__list li { opacity: 1; transform: none; } .kiel-nav--open .kiel-nav__list li:nth-child(1) { transition-delay: .08s; } .kiel-nav--open .kiel-nav__list li:nth-child(2) { transition-delay: .14s; } .kiel-nav--open .kiel-nav__list li:nth-child(3) { transition-delay: .20s; } .kiel-nav--open .kiel-nav__list li:nth-child(4) { transition-delay: .26s; } .kiel-nav--open .kiel-nav__list li:nth-child(5) { transition-delay: .32s; } .kiel-nav--open .kiel-nav__list li:nth-child(6) { transition-delay: .38s; } } @media (prefers-reduced-motion: reduce) { .kiel-nav__list li { transition: none; } } /* ========================================================================= 6. Buttons (.kiel-btn Lila-Gradient · --ghost) ========================================================================= */ .kiel-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: var(--ff-ui); font-weight: 600; font-size: 1rem; line-height: 1; color: #fff; text-align: center; padding: .95em 1.7em; border: 1px solid transparent; border-radius: 999px; background: var(--grad-primary); box-shadow: 0 10px 30px -12px rgba(146, 32, 119, .8); cursor: pointer; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease); } .kiel-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--kiel-magenta-glow), var(--kiel-primary)); opacity: 0; transition: opacity .3s var(--ease); } .kiel-btn > * { position: relative; z-index: 1; } .kiel-btn:hover, .kiel-btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(194, 58, 158, .9), var(--glow-lila); } .kiel-btn:hover::before, .kiel-btn:focus-visible::before { opacity: 1; } .kiel-btn:active { transform: translateY(0); } .kiel-btn--ghost { color: var(--ink); background: transparent; border-color: var(--line); box-shadow: none; } .kiel-btn--ghost::before { display: none; } .kiel-btn--ghost:hover, .kiel-btn--ghost:focus-visible { color: var(--ink-strong); border-color: var(--kiel-magenta-glow); box-shadow: 0 0 0 1px rgba(194, 58, 158, .4), var(--glow-lila); transform: translateY(-2px); } .kiel-btn__arrow { transition: transform .3s var(--ease); } .kiel-btn:hover .kiel-btn__arrow { transform: translateX(4px); } .kiel-magnetic { will-change: transform; } @media (prefers-reduced-motion: reduce) { .kiel-btn, .kiel-btn__arrow { transition: none; } } /* ========================================================================= 7. Sektions-Grundgeruest ========================================================================= */ .kiel-home { position: relative; } .kiel-section { position: relative; padding-left: clamp(1.1rem, 4vw, 2.5rem); padding-right: clamp(1.1rem, 4vw, 2.5rem); padding-top: var(--section-py); padding-bottom: var(--section-py); } .kiel-section--start { padding-top: 0; } .kiel-section__head { max-width: var(--maxw); margin: 0 auto clamp(2rem, 4vw, 3.5rem); } .kiel-anchor { display: block; height: 0; } /* Nicht-Front-Templates: Inhalt unter den fixierten Header schieben. */ .single .kiel-single, .error404 .err404, .blog .site-main, .archive .site-main, .search .site-main { padding-top: var(--header-h); } /* ========================================================================= 8. Hero (#start-Kopf) — filmische Buehne ========================================================================= */ .kiel-hero { position: relative; min-height: 90vh; display: flex; flex-direction: column; justify-content: flex-start; /* Inhalt weiter oben (statt zentriert) */ padding: calc(var(--header-h) + clamp(1.4rem, 4vw, 2.6rem)) clamp(1.1rem, 4vw, 2.5rem) clamp(4rem, 8vw, 7rem); overflow: hidden; isolation: isolate; } .kiel-hero__inner { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; } /* Altes Büro-Hintergrundbild (Kiel) — filmisch, mit dunklem Overlay für Lesbarkeit. */ .kiel-hero__bg { position: absolute; inset: -8% -4%; z-index: 0; background-size: cover; background-position: center 28%; background-repeat: no-repeat; will-change: transform; opacity: .5; filter: saturate(.85) contrast(1.02); } .kiel-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(12,9,16,.72) 0%, rgba(12,9,16,.58) 42%, rgba(12,9,16,.86) 100%), radial-gradient(120% 90% at 78% 8%, rgba(146,32,119,.30), transparent 60%); } /* Weiche Lila-Glow-Blobs (data-parallax; kiel.js bewegt sie). */ .kiel-hero__glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; animation: kielGlowPulse 11s ease-in-out infinite alternate; } .kiel-hero__glow--1 { top: -8%; right: -6%; width: min(46vw, 560px); height: min(46vw, 560px); background: radial-gradient(circle, rgba(146, 32, 119, .7), transparent 68%); } .kiel-hero__glow--2 { bottom: -12%; left: -8%; width: min(40vw, 480px); height: min(40vw, 480px); background: radial-gradient(circle, rgba(118, 29, 97, .6), transparent 68%); animation-delay: -4s; } @keyframes kielGlowPulse { from { transform: translate3d(0, 0, 0) scale(1); opacity: .42; } to { transform: translate3d(0, -14px, 0) scale(1.08); opacity: .62; } } /* Feines Korn nur im Hero (zusaetzlich zum globalen), sehr dezent. */ .kiel-hero__grain { position: absolute; inset: 0; z-index: 1; opacity: .05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23h)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .kiel-hero__title { font-family: var(--ff-display); font-weight: 600; color: var(--ink-strong); font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 1.05; letter-spacing: -.02em; margin: 0; text-wrap: balance; text-shadow: 0 18px 60px rgba(0, 0, 0, .55); } .kiel-hero__line { display: block; width: clamp(88px, 16vw, 180px); height: 3px; margin: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1.8rem, 3.5vw, 2.6rem); background: var(--grad-primary); border-radius: 3px; box-shadow: var(--glow-lila); } .kiel-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; } /* Scroll-Cue unten. */ .kiel-hero__cue { position: absolute; z-index: 2; left: 50%; bottom: clamp(1.2rem, 3vw, 2.2rem); transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--ink-mut); transition: color .3s var(--ease); animation: kielCueBob 2.4s ease-in-out infinite; } .kiel-hero__cue:hover { color: var(--kiel-lav); } .kiel-hero__cue-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kiel-primary); box-shadow: var(--glow-lila); } @keyframes kielCueBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } @media (prefers-reduced-motion: reduce) { .kiel-hero__cue { animation: none; } .kiel-hero__glow { animation: none; } } /* ========================================================================= 9. Karten (.kiel-card / .kiel-cards) — Start-Textreihen ========================================================================= */ .kiel-cards { max-width: var(--maxw); margin: clamp(3rem, 7vw, 6rem) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 2.2vw, 1.8rem); } .kiel-cards--split { grid-template-columns: 1.35fr 1fr; align-items: start; } .kiel-card { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--glow-soft); transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); } .kiel-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(194, 58, 158, .5), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; } .kiel-card:hover { transform: translateY(-6px); background: var(--bg-3); border-color: rgba(217, 168, 206, .28); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), var(--glow-lila); } .kiel-card:hover::before { opacity: 1; } .kiel-card__title { position: relative; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--ink-strong); padding-left: 1rem; margin-bottom: .8rem; } .kiel-card__title::before { content: ""; position: absolute; left: 0; top: .18em; width: 4px; height: 1.1em; border-radius: 4px; background: var(--grad-primary); box-shadow: var(--glow-lila); } .kiel-card p { color: var(--ink); } .kiel-card a { color: var(--kiel-lav); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(217, 168, 206, .4); } .kiel-card a:hover { color: var(--kiel-primary); text-decoration-color: currentColor; } /* Google-Maps in dunklem Rahmen. */ .kiel-map { margin-top: 1.2rem; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--glow-soft); } .kiel-map iframe { display: block; width: 100%; filter: grayscale(.35) contrast(1.05) brightness(.92); transition: filter .4s var(--ease); } .kiel-map:hover iframe { filter: grayscale(0) contrast(1) brightness(1); } @media (prefers-reduced-motion: reduce) { .kiel-card, .kiel-map iframe { transition: none; } } /* ========================================================================= 10. Ueber uns — Portrait-Karten ========================================================================= */ .kiel-portraits { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); } .kiel-portrait { display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--glow-soft); transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .kiel-portrait:hover { transform: translateY(-4px); border-color: rgba(217, 168, 206, .24); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), var(--glow-lila); } /* Kopf: kleines, dezentes Foto oben + Name daneben. */ .kiel-portrait__head { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.4rem); margin-bottom: clamp(1.1rem, 2vw, 1.5rem); } .kiel-portrait__media { flex: 0 0 auto; width: clamp(82px, 15vw, 104px); aspect-ratio: 245 / 300; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(146, 32, 119, .5); box-shadow: 0 0 0 1px rgba(217, 168, 206, .18), var(--glow-lila); } .kiel-portrait__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(146, 32, 119, .28)); pointer-events: none; } .kiel-lawyer-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .kiel-portrait__body { min-width: 0; } /* Text über volle Kachelbreite */ .kiel-lawyer-name { font-size: clamp(1.35rem, 2.3vw, 1.85rem); color: var(--ink-strong); margin: 0; line-height: 1.15; } .kiel-text p { color: var(--ink); } .kiel-text strong { color: var(--ink-strong); } /* Telefon als Lila-Chip. */ .kiel-phone-chip { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.2rem; font-family: var(--ff-ui); font-weight: 600; font-size: .95rem; color: #fff; padding: .6rem 1.1rem; border-radius: 999px; background: rgba(146, 32, 119, .18); border: 1px solid rgba(194, 58, 158, .45); transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .kiel-phone-chip:hover { color: #fff; background: var(--grad-primary); border-color: transparent; transform: translateY(-2px); box-shadow: var(--glow-lila); } .kiel-phone-chip svg { flex: 0 0 auto; } @media (max-width: 420px) { .kiel-portrait__head { gap: .9rem; } .kiel-portrait__media { width: 76px; } } @media (prefers-reduced-motion: reduce) { .kiel-portrait, .kiel-phone-chip { transition: none; } } /* ========================================================================= 11. Leistungen — Service-Grid ========================================================================= */ .kiel-services { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); } .kiel-service { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.1rem); overflow: hidden; transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .kiel-service::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--grad-primary); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease); } .kiel-service:hover { transform: translateY(-6px); background: var(--bg-3); border-color: rgba(194, 58, 158, .4); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), var(--glow-lila); } .kiel-service:hover::after { transform: scaleX(1); } .kiel-service__title { font-size: clamp(1.2rem, 2vw, 1.55rem); color: var(--ink-strong); margin-bottom: .85rem; } .kiel-service p { color: var(--ink); line-height: 1.72; } .kiel-service a { color: var(--kiel-lav); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(217, 168, 206, .45); } .kiel-service a:hover { color: var(--kiel-primary); text-decoration-color: currentColor; } @media (prefers-reduced-motion: reduce) { .kiel-service, .kiel-service::after { transition: none; } } /* ========================================================================= 12. Eil-Hinweis-Bar (.kiel-stickybar) — dunkel, Lila-Puls ========================================================================= */ .kiel-stickybar { position: fixed; z-index: 700; background: rgba(20, 15, 27, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(194, 58, 158, .35); border-left: 4px solid var(--kiel-primary); border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85), var(--glow-lila); color: var(--ink); animation: kielBarPulse 3.2s ease-in-out infinite; } @keyframes kielBarPulse { 0%, 100% { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85), 0 0 24px -8px rgba(146, 32, 119, .5); } 50% { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85), 0 0 40px -4px rgba(194, 58, 158, .85); } } @media (prefers-reduced-motion: reduce) { .kiel-stickybar { animation: none; } } .kiel-stickybar.is-closed { display: none !important; } .kiel-stickybar__inner { padding: 1rem 1.15rem; } .kiel-stickybar__inner h3 { font-family: var(--ff-ui); font-size: 1rem; font-weight: 600; color: var(--ink-strong); margin: 0 0 .5rem; line-height: 1.3; } .kiel-stickybar__inner p { font-size: .9rem; margin: 0 0 .4rem; color: var(--ink); } .kiel-stickybar__inner p:last-child { margin-bottom: 0; } .kiel-stickybar__inner strong { color: var(--ink-strong); } .kiel-stickybar__inner a { color: var(--kiel-lav); text-decoration: underline; } .kiel-stickybar__inner a:hover { color: var(--kiel-primary); } .kiel-stickybar__close { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #fff; background: linear-gradient(135deg, var(--kiel-primary), var(--kiel-accent)); border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; box-shadow: 0 4px 14px -4px rgba(146, 32, 119, .8); cursor: pointer; transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); } /* X garantiert sichtbar per CSS zeichnen (statt dünnem Inline-SVG). */ .kiel-stickybar__close svg { display: none; } .kiel-stickybar__close::before, .kiel-stickybar__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: #fff; } .kiel-stickybar__close::before { transform: translate(-50%, -50%) rotate(45deg); } .kiel-stickybar__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .kiel-stickybar__close:hover { background: var(--kiel-accent); transform: rotate(90deg); } /* Desktop-Variante: kompakte Karte unten links; Mobil-Variante versteckt. */ .kiel-stickybar--desktop { left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); width: min(360px, calc(100vw - 2rem)); } .kiel-stickybar--mobile { display: none; } @media (max-width: 767px) { .kiel-stickybar--desktop { display: none; } .kiel-stickybar--mobile { display: block; left: .6rem; right: .6rem; bottom: .6rem; width: auto; } .kiel-stickybar--mobile.is-closed { display: none !important; } } @media (prefers-reduced-motion: reduce) { .kiel-stickybar__close { transition: none; } } /* ========================================================================= 13. Kontakt-Footer (footer-kontakt.php) ========================================================================= */ .kiel-footer { position: relative; background: var(--bg-1); border-top: 1px solid var(--line); overflow: hidden; padding-top: var(--section-py); padding-bottom: var(--section-py); } .kiel-footer__glow { position: absolute; z-index: 0; top: -20%; right: -10%; width: min(50vw, 620px); height: min(50vw, 620px); border-radius: 50%; background: radial-gradient(circle, rgba(146, 32, 119, .3), transparent 66%); filter: blur(80px); pointer-events: none; } .kiel-footer__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); } .kiel-footer__head { position: relative; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .kiel-menu-anchor { position: absolute; top: calc(-1 * var(--header-h)); } .kiel-accent-line { display: block; width: 54px; height: 3px; border-radius: 3px; margin-bottom: 1rem; background: var(--grad-primary); box-shadow: var(--glow-lila); } /* Kicker-Linie am Titel im Footer nicht doppelt zeigen (eigene Linie vorhanden). */ .kiel-footer__heading { padding-top: 0; } .kiel-footer__heading::before { display: none; } .kiel-footer__intro { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); } .kiel-footer__intro-inner p { color: var(--ink); font-size: 1.05rem; } .kiel-footer__body { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3.5vw, 2.6rem); max-width: 760px; } /* ========================================================================= 14. Formular (contact-form.php) — dunkel, Lila-Focus-Ring ========================================================================= */ .kiel-form-wrap { width: 100%; } .kiel-form { display: grid; gap: 1.1rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.4rem); box-shadow: var(--glow-soft); } .kiel-form__group { display: grid; gap: .45rem; } .kiel-form__label { font-family: var(--ff-ui); font-size: .9rem; font-weight: 500; color: var(--ink-mut); letter-spacing: .01em; } .kiel-form__field { width: 100%; font-family: var(--ff-body); font-size: 1rem; color: var(--ink); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .95rem; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .kiel-form__field::placeholder { color: var(--ink-mut); } .kiel-form__field:hover { border-color: rgba(217, 168, 206, .3); } .kiel-form__field:focus { outline: none; background: var(--bg-3); border-color: var(--kiel-magenta-glow); box-shadow: 0 0 0 3px rgba(194, 58, 158, .3); } .kiel-form__field--textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .kiel-form__field--error, .kiel-form__field[aria-invalid="true"] { border-color: #e05a5a; box-shadow: 0 0 0 3px rgba(224, 90, 90, .25); } /* GeneratePress stylt input[type=...]/textarea (Spezifität 0,1,1) und würde die .kiel-form__field-Klasse (0,1,0) mit hellem Grund übersteuern → hier element- qualifiziert (0,2,1) zurückholen, damit die Felder dunkel bleiben. */ .kiel-form input.kiel-form__field, .kiel-form textarea.kiel-form__field { background: var(--bg-1); color: var(--ink); border: 1px solid var(--line); -webkit-text-fill-color: var(--ink); } .kiel-form input.kiel-form__field::placeholder, .kiel-form textarea.kiel-form__field::placeholder { color: var(--ink-mut); opacity: 1; } .kiel-form input.kiel-form__field:hover, .kiel-form textarea.kiel-form__field:hover { border-color: rgba(217, 168, 206, .3); } .kiel-form input.kiel-form__field:focus, .kiel-form textarea.kiel-form__field:focus { background: var(--bg-3); border-color: var(--kiel-magenta-glow); box-shadow: 0 0 0 3px rgba(194, 58, 158, .3); } /* Autofill (Chrome/Safari) nicht weiß werden lassen */ .kiel-form input.kiel-form__field:-webkit-autofill, .kiel-form input.kiel-form__field:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset; caret-color: var(--ink); } .kiel-form__group--submit { margin-top: .4rem; } .kiel-form__submit { width: 100%; } .kiel-form--submitting .kiel-form__submit { opacity: .7; cursor: progress; } .kiel-form__notice { border-radius: var(--radius-sm); padding: .85rem 1.1rem; font-size: .95rem; font-weight: 500; border: 1px solid var(--line); } .kiel-form__notice--ok { color: #b8f0cf; background: rgba(38, 92, 62, .35); border-color: rgba(88, 200, 140, .45); } .kiel-form__notice--error { color: #f6c6c6; background: rgba(120, 40, 40, .35); border-color: rgba(224, 90, 90, .5); } /* Honeypot bleibt versteckt (Inline-Style im Markup); doppelt abgesichert. */ .kiel-form__hp { position: absolute !important; left: -9999px !important; } /* ========================================================================= 15. Social-Icons — dunkle Kreise, Lila-Hover ========================================================================= */ .kiel-social { display: flex; gap: .9rem; } .kiel-social__link { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 50%; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .kiel-social__link:hover, .kiel-social__link:focus-visible { color: #fff; background: var(--grad-primary); border-color: transparent; transform: translateY(-3px); box-shadow: var(--glow-lila); } .kiel-social__icon { width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .kiel-social__link { transition: none; } } /* ========================================================================= 16. Impressum-Accordion (faq-accordion.php) — dunkel, animiertes Auf/Zu ========================================================================= */ .kiel-footer__impressum { margin-top: .4rem; } .kiel-accordion { border-top: 1px solid var(--line); } .kiel-accordion__item { border-bottom: 1px solid var(--line); background: transparent; } .kiel-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem .25rem; cursor: pointer; list-style: none; color: var(--ink-strong); transition: color .3s var(--ease); } .kiel-accordion__summary::-webkit-details-marker { display: none; } .kiel-accordion__summary:hover { color: var(--kiel-lav); } .kiel-accordion__title { font-family: var(--ff-display); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; } .kiel-accordion__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; color: #fff; background: rgba(146, 32, 119, .2); border: 1px solid rgba(194, 58, 158, .4); border-radius: 50%; transition: background .3s var(--ease), border-color .3s var(--ease); } .kiel-accordion__item[open] .kiel-accordion__icon { background: var(--grad-primary); border-color: transparent; } .kiel-accordion__icon-plus, .kiel-accordion__icon-minus { display: block; } .kiel-accordion__icon-minus { display: none; } .kiel-accordion__item[open] .kiel-accordion__icon-plus { display: none; } .kiel-accordion__item[open] .kiel-accordion__icon-minus { display: block; } /* Auf/Zu weich animiert via Grid-Rows (0fr->1fr am nativen [open]; kein JS noetig). */ .kiel-accordion__content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .kiel-accordion__item[open] .kiel-accordion__content { grid-template-rows: 1fr; } .kiel-accordion__content-inner { overflow: hidden; color: var(--ink); font-size: .95rem; line-height: 1.7; } .kiel-accordion__item[open] .kiel-accordion__content-inner { padding-bottom: 1.4rem; } .kiel-accordion__content-inner p { color: var(--ink); } .kiel-accordion__content-inner strong { color: var(--ink-strong); } .kiel-accordion__content-inner a { color: var(--kiel-lav); text-decoration: underline; } .kiel-accordion__content-inner a:hover { color: var(--kiel-primary); } @media (prefers-reduced-motion: reduce) { .kiel-accordion__content, .kiel-accordion__icon { transition: none; } } /* ========================================================================= 17. Blog-Grid (archive-loop.php) — dunkle Kacheln, Zoom-Hover, Pagination ========================================================================= */ /* Blog-/Archiv-Kopf (home.php, archive.php) — dunkle Buehne, Serif-Titel, weicher Lila-Glow, gezeichnete Akzentlinie. Spiegelt .kiel-single__hero. */ .kiel-blog { position: relative; } .kiel-blog__head { position: relative; overflow: hidden; isolation: isolate; /* .blog/.archive .site-main traegt bereits padding-top: var(--header-h) — hier nicht doppeln. */ padding: clamp(2rem, 6vw, 4.5rem) clamp(1.1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem); } .kiel-blog__glow { position: absolute; z-index: 0; top: -30%; right: -8%; width: min(52vw, 580px); height: min(52vw, 580px); border-radius: 50%; background: radial-gradient(circle, rgba(146, 32, 119, .34), transparent 66%); filter: blur(80px); pointer-events: none; } .kiel-blog__head-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; } .kiel-blog__title { font-family: var(--ff-display); font-weight: 600; color: var(--ink-strong); font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; margin: 0; } .kiel-blog__rule { display: block; width: clamp(64px, 9vw, 120px); height: 3px; margin-top: clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 3px; background: linear-gradient(90deg, var(--kiel-primary), var(--kiel-accent)); transform-origin: left center; } .kiel-blog__desc { color: var(--ink-mut); font-family: var(--ff-ui); max-width: var(--maxw-read); margin-top: clamp(1rem, 2vw, 1.4rem); line-height: 1.6; } .kiel-blog__desc p { margin: 0; } .kiel-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); } .kiel-grid.grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .kiel-grid.grid-tablet-2 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .kiel-grid.grid-mobile-1 { grid-template-columns: 1fr; } } .kiel-grid .kiel-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .kiel-grid .kiel-card:hover { transform: translateY(-6px); } .card-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-3); } .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .kiel-grid .kiel-card:hover .card-thumb img { transform: scale(1.06); } .card-text { display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.3rem, 2.4vw, 1.7rem); flex: 1; } .card-title { font-family: var(--ff-display); font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.25; margin: 0; } .card-title a { color: var(--ink-strong); transition: color .3s var(--ease); } .card-title a:hover { color: var(--kiel-lav); } .card-meta { color: var(--ink-mut); } .card-date { font-family: var(--ff-ui); font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; } .card-excerpt { color: var(--ink); flex: 1; } .card-excerpt p { margin: 0; } .read-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-family: var(--ff-ui); font-weight: 600; font-size: .92rem; color: var(--kiel-lav); transition: color .3s var(--ease), gap .3s var(--ease); } .read-more:hover { color: var(--kiel-primary); gap: .7rem; } .read-more__chevron { transition: transform .3s var(--ease); } .read-more:hover .read-more__chevron { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .card-thumb img, .card-title a, .read-more { transition: none; } } /* Pagination dunkel/Lila. */ .kiel-pagination { max-width: var(--maxw); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0 clamp(1.1rem, 4vw, 2.5rem); } .kiel-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } .kiel-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .7rem; font-family: var(--ff-ui); font-weight: 500; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .kiel-pagination a.page-numbers:hover { color: #fff; background: var(--bg-3); border-color: rgba(194, 58, 158, .45); transform: translateY(-2px); } .kiel-pagination .page-numbers.current { color: #fff; background: var(--grad-primary); border-color: transparent; box-shadow: var(--glow-lila); } .kiel-empty { max-width: var(--maxw); margin: 3rem auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); color: var(--ink-mut); font-size: 1.1rem; text-align: center; } /* ========================================================================= 18. Single-Post (single.php) — Titel-Hero + Lesefläche + Gutenberg-Styles ========================================================================= */ .kiel-single { position: relative; } .kiel-single__hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.1rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); isolation: isolate; } .kiel-single__glow { position: absolute; z-index: 0; top: -30%; right: -10%; width: min(50vw, 560px); height: min(50vw, 560px); border-radius: 50%; background: radial-gradient(circle, rgba(146, 32, 119, .34), transparent 66%); filter: blur(80px); pointer-events: none; } .kiel-single__hero-inner { position: relative; z-index: 1; max-width: var(--maxw-read); margin: 0 auto; } .kiel-single .entry-title { display: block; font-family: var(--ff-display); font-weight: 600; color: var(--ink-strong); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; margin: 0 0 1.2rem; } .kiel-single__meta-block { color: var(--ink-mut); } .post-info { display: flex; align-items: center; gap: .5rem; font-family: var(--ff-ui); font-size: .92rem; margin: 0; } .post-info__item { display: inline-flex; align-items: center; gap: .45rem; } .post-info svg { width: 15px; height: 15px; color: var(--kiel-lav); } .post-info__prefix { color: var(--ink-mut); } .post-info a { color: var(--kiel-lav); } .post-info a:hover { color: var(--kiel-primary); } .kiel-single__content-block { padding: 0 clamp(1.1rem, 4vw, 2.5rem); } /* Lesefläche: max 720px, --ink, 1.75 lh, hoher Kontrast. */ .kiel-single .entry-content { max-width: var(--maxw-read); margin: 0 auto; color: var(--ink); font-size: 1.12rem; line-height: 1.75; } /* ---- Gutenberg-Block-Styles (.entry-content) ---- */ .kiel-single .entry-content > * { margin-top: 0; margin-bottom: 1.4rem; } .kiel-single .entry-content > *:last-child { margin-bottom: 0; } .kiel-single .entry-content h1, .kiel-single .entry-content h2, .kiel-single .entry-content h3, .kiel-single .entry-content h4, .kiel-single .entry-content h5, .kiel-single .entry-content h6 { font-family: var(--ff-display); color: var(--ink-strong); line-height: 1.2; margin-top: 2.2rem; margin-bottom: .8rem; } .kiel-single .entry-content h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); } .kiel-single .entry-content h3 { font-size: clamp(1.35rem, 2.4vw, 1.65rem); } .kiel-single .entry-content h4 { font-size: 1.2rem; } .kiel-single .entry-content p { color: var(--ink); } .kiel-single .entry-content strong { color: var(--ink-strong); } .kiel-single .entry-content a { color: var(--kiel-lav); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(217, 168, 206, .5); transition: color .3s var(--ease), text-decoration-color .3s var(--ease); } .kiel-single .entry-content a:hover { color: var(--kiel-primary); text-decoration-color: currentColor; } .kiel-single .entry-content ul, .kiel-single .entry-content ol { padding-left: 1.4rem; color: var(--ink); } .kiel-single .entry-content li { margin-bottom: .55rem; } .kiel-single .entry-content ul li::marker { color: var(--kiel-primary); } .kiel-single .entry-content ol li::marker { color: var(--kiel-lav); font-family: var(--ff-ui); } .kiel-single .entry-content blockquote, .kiel-single .entry-content .wp-block-quote { margin: 2rem 0; padding: 1rem 0 1rem 1.5rem; border-left: 4px solid var(--kiel-primary); background: linear-gradient(90deg, rgba(146, 32, 119, .1), transparent 60%); color: var(--ink-strong); font-family: var(--ff-display); font-size: 1.2rem; font-style: italic; } .kiel-single .entry-content blockquote cite, .kiel-single .entry-content .wp-block-quote cite { display: block; margin-top: .6rem; font-family: var(--ff-ui); font-size: .9rem; font-style: normal; color: var(--ink-mut); } .kiel-single .entry-content img, .kiel-single .entry-content .wp-block-image img { border-radius: var(--radius-sm); box-shadow: var(--glow-soft); } .kiel-single .entry-content figure { margin: 2rem 0; } .kiel-single .entry-content figcaption { margin-top: .6rem; font-size: .85rem; color: var(--ink-mut); text-align: center; } .kiel-single .entry-content .alignwide { max-width: min(1000px, 92vw); margin-left: 50%; transform: translateX(-50%); } .kiel-single .entry-content .alignfull { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); } .kiel-single .entry-content .alignleft { float: left; margin: .4rem 1.5rem 1rem 0; } .kiel-single .entry-content .alignright { float: right; margin: .4rem 0 1rem 1.5rem; } .kiel-single .entry-content .aligncenter { margin-left: auto; margin-right: auto; } .kiel-single .entry-content code, .kiel-single .entry-content kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; color: var(--kiel-lav); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: .1em .4em; } .kiel-single .entry-content pre, .kiel-single .entry-content .wp-block-code { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; overflow-x: auto; color: var(--ink); } .kiel-single .entry-content pre code { background: none; border: 0; padding: 0; color: inherit; } .kiel-single .entry-content hr, .kiel-single .entry-content .wp-block-separator { border: 0; height: 1px; background: var(--line); margin: 2.4rem 0; } .kiel-single .entry-content .wp-block-separator:not(.is-style-wide) { max-width: 120px; } .kiel-single .entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; } .kiel-single .entry-content th, .kiel-single .entry-content td { padding: .7rem .9rem; border: 1px solid var(--line); text-align: left; } .kiel-single .entry-content th { background: var(--bg-2); color: var(--ink-strong); } /* Gutenberg-Button-Block → Lila-Gradient wie .kiel-btn. */ .kiel-single .entry-content .wp-block-button__link { display: inline-flex; align-items: center; gap: .5em; color: #fff !important; background: var(--grad-primary); border-radius: 999px; padding: .85em 1.6em; font-family: var(--ff-ui); font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px -12px rgba(146, 32, 119, .8); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .kiel-single .entry-content .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(194, 58, 158, .9), var(--glow-lila); } .kiel-link-pages { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: var(--ink-mut); font-family: var(--ff-ui); } .kiel-link-pages a, .kiel-link-pages > span { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0 .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--ink); } .kiel-link-pages a:hover { border-color: rgba(194, 58, 158, .45); color: #fff; } /* Single-CTA am Ende. */ .kiel-single__cta { max-width: var(--maxw-read); margin: clamp(3rem, 6vw, 5rem) auto 0; padding: 0 clamp(1.1rem, 4vw, 2.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; } .kiel-cta__rule { display: block; width: clamp(80px, 14vw, 160px); height: 3px; border-radius: 3px; background: var(--grad-primary); box-shadow: var(--glow-lila); } @media (prefers-reduced-motion: reduce) { .kiel-single .entry-content a, .kiel-single .entry-content .wp-block-button__link { transition: none; } } /* ========================================================================= 19. 404 (404.php) — dunkler Canvas, riesiges „404" ========================================================================= */ .err404 { position: relative; min-height: 72vh; display: flex; align-items: center; justify-content: center; padding: clamp(3rem, 8vw, 6rem) clamp(1.1rem, 4vw, 2.5rem); overflow: hidden; isolation: isolate; text-align: center; } .err404__glow { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(70vw, 640px); height: min(70vw, 640px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(146, 32, 119, .32), transparent 65%); filter: blur(90px); pointer-events: none; } .err404__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .err404__code { font-family: var(--ff-display); font-weight: 600; font-size: clamp(6rem, 22vw, 15rem); line-height: .9; color: var(--ink-strong); letter-spacing: -.03em; background: linear-gradient(180deg, #fff 0%, var(--kiel-lav) 60%, var(--kiel-primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 80px rgba(146, 32, 119, .5); } .err404__title { font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--ink-strong); } .err404__rule { display: block; width: clamp(80px, 14vw, 160px); height: 3px; border-radius: 3px; background: var(--grad-primary); box-shadow: var(--glow-lila); } .err404__btn { margin-top: .6rem; } /* ========================================================================= 20. Schmale Viewports: Split-Karten stapeln ========================================================================= */ @media (max-width: 767px) { .kiel-cards--split { grid-template-columns: 1fr; } } /* ========================================================================= 21. Klappbare Karten (Accordion-Grid) — symmetrisch, Klick öffnet ========================================================================= */ .kiel-accgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.6vw, 1.3rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); align-items: start; } .kiel-acc { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .kiel-acc[open] { background: var(--bg-3); border-color: rgba(217, 168, 206, .28); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9); } .kiel-acc__head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem); min-height: 4.6rem; } .kiel-acc__head::-webkit-details-marker { display: none; } .kiel-acc__head:focus-visible { outline: 2px solid var(--kiel-magenta-glow); outline-offset: -3px; border-radius: var(--radius); } .kiel-acc__title { flex: 1 1 auto; margin: 0; /* ist ein

— Default-Margins zurücksetzen */ font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.25; color: var(--ink-strong); } .kiel-acc__icon { position: relative; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(217, 168, 206, .35); transition: background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease); } .kiel-acc__icon::before, .kiel-acc__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; border-radius: 2px; background: var(--kiel-lav); transform: translate(-50%, -50%); transition: transform .35s var(--ease), background .3s var(--ease); } .kiel-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .kiel-acc[open] .kiel-acc__icon { background: var(--grad-primary); border-color: transparent; transform: rotate(180deg); } .kiel-acc[open] .kiel-acc__icon::before, .kiel-acc[open] .kiel-acc__icon::after { background: #fff; } .kiel-acc[open] .kiel-acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .kiel-acc__head:hover .kiel-acc__title { color: var(--kiel-lav); } /* Auf-/Zu-Animation: JS setzt data-acc-anim + max-height (Fallback: natives details). */ .kiel-acc__body { padding: 0 clamp(1.1rem, 2vw, 1.5rem); color: var(--ink); } .kiel-acc__body > *:first-child { margin-top: 0; padding-top: .2rem; } .kiel-acc__body > *:last-child { margin-bottom: clamp(1.1rem, 2vw, 1.5rem); } .kiel-acc__body a { color: var(--kiel-lav); text-decoration: underline; text-underline-offset: 3px; } .kiel-acc__body a:hover { color: #fff; } /* JS-gesteuerte Höhen-Animation */ .kiel-js .kiel-acc[data-acc-anim] .kiel-acc__body { overflow: hidden; transition: height .4s var(--ease); } @media (max-width: 1024px) { .kiel-accgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .kiel-accgrid { grid-template-columns: 1fr; } } /* ========================================================================= 22. Consent-Embed (Google Maps erst nach Zustimmung) ========================================================================= */ .kiel-consent-embed { position: relative; width: 100%; min-height: 214px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-1); border: 1px solid var(--line); } .kiel-consent-embed__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; padding: 1.2rem; color: var(--ink-mut); } .kiel-consent-embed__pin { color: var(--kiel-lav); } .kiel-consent-embed__ph p { margin: 0; font-size: .92rem; max-width: 34ch; } .kiel-consent-embed__ph p strong { color: var(--ink); } .kiel-consent-embed iframe { display: block; width: 100%; height: 214px; border: 0; } /* ========================================================================= 23. Cookie-Consent-Banner ========================================================================= */ .kiel-cc { position: fixed; left: 50%; bottom: clamp(.8rem, 2vw, 1.4rem); transform: translateX(-50%) translateY(0); z-index: 850; width: min(680px, calc(100vw - 1.6rem)); background: rgba(20, 15, 27, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(217, 168, 206, .22); border-radius: var(--radius); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95); padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.6rem); opacity: 1; transition: opacity .4s var(--ease), transform .4s var(--ease); } .kiel-cc[hidden] { display: none; } .kiel-cc.is-hiding { opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none; } .kiel-cc__inner { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; } .kiel-cc__text { flex: 1 1 260px; } .kiel-cc__text strong { display: block; font-family: var(--ff-display); color: var(--ink-strong); margin-bottom: .25rem; } .kiel-cc__text p { margin: 0; font-size: .88rem; color: var(--ink-mut); line-height: 1.55; } .kiel-cc__actions { display: flex; gap: .6rem; flex: 0 0 auto; } .kiel-cc__actions .kiel-btn { padding: .6rem 1.1rem; font-size: .9rem; } @media (max-width: 560px) { .kiel-cc__actions { width: 100%; } .kiel-cc__actions .kiel-btn { flex: 1 1 auto; } } /* ========================================================================= 24. Verwandte Beiträge (Single-Post, interne Verlinkung) ========================================================================= */ .kiel-related { max-width: 900px; margin: clamp(2.4rem, 5vw, 4rem) auto 0; padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); } .kiel-related__title { font-family: var(--ff-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--ink-strong); margin: 0 0 clamp(1.1rem, 2vw, 1.5rem); } .kiel-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.6vw, 1.2rem); } .kiel-related__item { padding: clamp(1rem, 2vw, 1.4rem); } .kiel-related__item-title { font-family: var(--ff-display); font-size: 1.04rem; line-height: 1.3; margin: 0 0 .5rem; } .kiel-related__item-title a { color: var(--ink-strong); text-decoration: none; } .kiel-related__item-title a:hover { color: var(--kiel-lav); } .kiel-related__date { font-size: .82rem; color: var(--ink-mut); letter-spacing: .02em; } .kiel-related__all { display: inline-block; margin-top: clamp(1.1rem, 2vw, 1.5rem); color: var(--kiel-lav); font-weight: 600; text-decoration: none; } .kiel-related__all:hover { color: #fff; } @media (max-width: 720px) { .kiel-related__grid { grid-template-columns: 1fr; } }