/* ========================================================================== Theme „Praxis“ – Gestaltung Design System: 04_design/brand-guide + 04_design/tokens.css (früheres Mockup: 99_archiv/10_html-mockup). Farben nur über theme.json-Palette: --wp--preset--color--{primary, primary-hover, primary-soft, mint, mint-soft, mint-bg, accent, accent-button, bg, text, text-muted, border} ========================================================================== */ /* Ersatzschriften mit den Maßen der Webfonts: solange Funnel/Brygada laden, steht der Text schon in derselben Breite und Zeilenhöhe – beim Tausch springt nichts. Werte aus den Fontdateien (fontTools, Breite eines deutschen Mustertexts gegen Arial/Georgia, 24.10.2026). */ @font-face { font-family: "Funnel Sans Ersatz"; src: local("Arial"), local("ArialMT"); size-adjust: 100.79%; ascent-override: 99.22%; descent-override: 24.8%; line-gap-override: 0%; } @font-face { font-family: "Funnel Display Ersatz"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 101.34%; ascent-override: 98.67%; descent-override: 24.67%; line-gap-override: 0%; } @font-face { font-family: "Brygada Ersatz"; src: local("Georgia"); font-style: normal; size-adjust: 106.72%; ascent-override: 86.21%; descent-override: 23.43%; line-gap-override: 0%; } @font-face { font-family: "Brygada Ersatz"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; size-adjust: 97.58%; ascent-override: 94.29%; descent-override: 25.62%; line-gap-override: 0%; } /* Android hat weder Arial noch Georgia: dort Roboto und Noto Serif, gleiche Methode. */ @font-face { font-family: "Funnel Sans Ersatz Android"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 101.46%; ascent-override: 98.56%; descent-override: 24.64%; line-gap-override: 0%; } @font-face { font-family: "Funnel Display Ersatz Android"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 700; size-adjust: 107.98%; ascent-override: 92.61%; descent-override: 23.15%; line-gap-override: 0%; } @font-face { font-family: "Brygada Ersatz Android"; src: local("Noto Serif"), local("NotoSerif-Regular"); font-style: normal; size-adjust: 98.17%; ascent-override: 93.71%; descent-override: 25.47%; line-gap-override: 0%; } @font-face { font-family: "Brygada Ersatz Android"; src: local("Noto Serif Italic"), local("NotoSerif-Italic"); font-style: italic; size-adjust: 94.18%; ascent-override: 97.69%; descent-override: 26.54%; line-gap-override: 0%; } :root { --p-blau: var(--wp--preset--color--primary); --p-blau-hover: var(--wp--preset--color--primary-hover); --p-blau-hell: var(--wp--preset--color--primary-soft); --p-mint-hell: var(--wp--preset--color--mint-soft); --p-mint-bg: var(--wp--preset--color--mint-bg); --p-rosewood: var(--wp--preset--color--rosewood); /* ruhige Fläche, nie Text, keine Schrift darauf */ --p-rosewood-hell: var(--wp--preset--color--rosewood-soft); /* Boxen im Wechsel mit --p-mint-hell; gedämpfter Text darauf: --p-text-leise */ --p-orange: var(--wp--preset--color--accent); --p-orange-button: var(--wp--preset--color--accent-button); /* Papaya kräftig, nur Button-Fläche */ --p-weiss: var(--wp--preset--color--bg); --p-text: var(--wp--preset--color--text); --p-text-leise: #3A4556; /* gedämpfter Fließtext auf hellen Flächen (≥ 8:1) */ --p-grau: var(--wp--preset--color--text-muted); --p-linie: var(--wp--preset--color--border); --p-pille: var(--wp--custom--radius--pill); --p-ecke: var(--wp--custom--radius--card); --p-schwebe: var(--wp--custom--radius--float); --p-schatten: 0 6px 24px rgba(0, 0, 0, .07); /* Einheitlicher, leichter Farblook für alle Fotos (Test 04.10.2026). Ausschalten: none */ --p-foto-filter: sepia(.1) saturate(.93) contrast(.98); --p-schrift-display: var(--wp--preset--font-family--ueberschrift); --p-schrift-karte: var(--wp--preset--font-family--postkarte); --p-breite: 80rem; --p-rand: clamp(1.25rem, 4vw, 2rem); --p-abschnitt: clamp(3rem, 9vw, 7rem); /* mobil 48 px statt 72 */ --p-kopf-hoehe: 84px; --p-ease: cubic-bezier(.2, .7, .2, 1); /* Design System (Quelle: 04_design/tokens.css, Brand Guide 04_design/brand-guide) */ --p-fs-xs: .875rem; /* 14 px – Hinweise, Labels (Minimum) */ --p-fs-sm: 1rem; /* 16 px – Navigation, Buttons */ --p-fs-base: 1.125rem; /* 18 px – Fließtext */ --p-fs-md: 1.25rem; /* 20 px – Teaser-Titel */ --p-fs-lg: clamp(1.125rem, 1.6vw, 1.25rem); /* Einleitung, kleine Überschriften */ --p-fs-xl: clamp(1.25rem, 1.9vw, 1.5rem); /* H3, Kartentitel */ --p-fs-2xl: clamp(1.5rem, 2.4vw, 2rem); /* Zitate groß */ --p-fs-3xl: clamp(1.875rem, 3vw, 2.5rem); /* H2, Seitentitel */ --p-fs-4xl: clamp(2.5rem, 4.6vw, 4rem); /* Display */ --p-fs-hero: clamp(2.5rem, 4.4vw, 4rem); /* Startseiten-Aussage */ --p-space-1: .25rem; --p-space-2: .5rem; --p-space-3: .75rem; --p-space-4: 1rem; --p-space-5: 1.5rem; --p-space-6: 2rem; --p-space-7: 3rem; --p-space-8: 4rem; --p-space-9: 6rem; --p-space-10: 8rem; --p-logo-h: 48px; --p-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10h12M11 5.5 15.5 10 11 14.5'/%3E%3C/svg%3E"); } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--p-kopf-hoehe) + var(--p-leiste, 0px) + 16px); } body { -webkit-font-smoothing: antialiased; } :focus-visible { outline: 3px solid var(--p-blau); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 3px #fff; } img { max-width: 100%; height: auto; } picture { display: contents; } /* praxis_foto(): nur für WebP/srcset, fürs Layout zählt das */ picture > source { display: none; } /* sonst wird in Grids zur leeren Zelle */ .praxis-menue-sprache { display: none; } /* Sprachwahl im Menü nur auf kleinen Handys */ /* Fotos: gleicher Farblook, weiche Ecken wie die Karten. Logos/Icons (SVG) bleiben unberührt. */ img:not([src$=".svg"]) { filter: var(--p-foto-filter); border-radius: var(--p-ecke); } .praxis-praxis__medien img { border-radius: 0; } /* Karte schneidet die Ecken schon zu */ /* Überbelichtete Fotos an die anderen angleichen */ img.praxis-foto--dunkler { filter: var(--p-foto-filter) brightness(.9) contrast(1.04); } img.praxis-foto--eingerechnet { filter: none; } /* Farblook schon in der Datei (Filter G) */ button, input, select, textarea { font-family: inherit; } /* Kein Standard-Blockabstand zwischen den großen Bereichen */ .wp-site-blocks > * + * { margin-block-start: 0; } .wp-site-blocks { padding-left: 0; padding-right: 0; } .praxis-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .5rem 1rem; background: var(--p-weiss); } .praxis-skip:focus { top: 1rem; } .praxis-breite { box-sizing: border-box; max-width: var(--p-breite); margin-left: auto; margin-right: auto; padding-left: var(--p-rand); padding-right: var(--p-rand); } /* ---------- Typo-Helfer ---------- */ .praxis-h2 { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-3xl); line-height: 1.05; letter-spacing: -.015em; color: var(--p-blau); margin: 0 0 1.75rem; } .praxis-h3 { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-xl); color: var(--p-blau); margin: 0 0 .75rem; } .praxis-display { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-4xl); line-height: .95; letter-spacing: -.03em; color: var(--p-blau); margin: 0; } /* Akzentpunkt: hüpft einmal kurz, wenn er ins Bild kommt (JS setzt .is-hops). */ .praxis-punkt { display: inline-block; color: var(--p-orange); } .praxis-punkt.is-hops { animation: praxis-hops .9s cubic-bezier(.3, 0, .3, 1) both; } @keyframes praxis-hops { 0%, 100% { transform: none; } 30% { transform: translateY(-.14em); } 55% { transform: none; } 72% { transform: translateY(-.05em); } } .praxis-leise { color: var(--p-text-leise); } .praxis-klein { font-size: var(--p-fs-sm); } .praxis-kleingedruckt { font-size: var(--p-fs-sm); color: var(--p-grau); margin-top: 1.25rem; max-width: 48em; } .praxis-einleitung { color: var(--p-text-leise); max-width: 40em; margin: -.75rem 0 3rem; } .praxis-abstand-gross { margin-bottom: 3rem; } /* Weiter-Links außerhalb des Fließtexts (Mehr über mich, Alle Ratgeber …) und „Mehr erfahren“ in Karten: überall gleich – halbfett, Pfeil, Unterstreichung nur bei Hover */ .praxis-link-stark, .praxis-mehr { font-weight: 600; color: var(--p-blau); text-decoration: none; } .praxis-link-stark::after, .praxis-mehr::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .2s var(--p-ease); } .praxis-link-stark:hover, .praxis-link-stark:focus-visible { text-decoration: underline; text-underline-offset: .15em; } .praxis-link-stark:hover::after, .praxis-angebot:hover .praxis-mehr::after { transform: translateX(4px); } .praxis-stapel { display: flex; flex-direction: column; gap: 1.5rem; } .praxis-stapel--gross { gap: 2rem; } .praxis-stapel > *, .praxis-hero__text > * { margin: 0; } /* ---------- Buttons ---------- */ .praxis-button, .praxis-cta, .wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: var(--p-pille); border: 0; cursor: pointer; background: var(--p-orange-button); color: #FFFFFF; font-weight: 600; font-size: var(--p-fs-sm); line-height: 1.3; text-decoration: none; transition: transform .2s var(--p-ease), background-color .2s var(--p-ease), box-shadow .2s var(--p-ease); } .praxis-button:hover, .praxis-cta:hover, .wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); background: #E25F22; color: #FFFFFF; box-shadow: 0 6px 18px rgba(240, 106, 44, .35); } .praxis-button--gross { padding: 1.05rem 1.9rem; font-size: var(--p-fs-base); } .praxis-button--klein { padding: .7rem 1.1rem; font-size: var(--p-fs-sm); } .praxis-button--hell { background: var(--p-blau-hell); color: var(--p-blau); } .praxis-button--hell:hover { background: #DCE1E9; color: var(--p-blau); box-shadow: none; } .praxis-button--blau { background: var(--p-blau); color: #FFFFFF; } .praxis-button--blau:hover { background: var(--p-blau-hover); color: #FFFFFF; box-shadow: none; } .praxis-buttons { display: flex; flex-wrap: wrap; gap: .75rem; } .praxis-inhalt .praxis-einstieg-buttons { margin-top: 1.5rem !important; } /* Orange Haupt-Buttons: weiße Schrift auf #F06A2C hat 3,1:1 – das reicht nur für große, fette Schrift (WCAG AA ab 18,66 px fett). Deshalb hier immer 19 px / 700, auch im Kopf. Nicht kleiner machen. */ :is(.praxis-button, .praxis-cta, .wp-element-button, .wp-block-button__link):not(.praxis-button--hell, .praxis-button--blau, .is-current) { font-size: 1.1875rem; font-weight: 700; } /* Feiner Pfeil in den orangen Haupt-Buttons (nicht in hellen/blauen), rückt beim Hover nach rechts */ :is(a.praxis-button, .praxis-cta, .wp-block-button__link):not(.praxis-button--hell, .praxis-button--blau, .is-current)::after { content: ""; width: 1.1em; height: 1.1em; flex: none; margin-right: -.2em; background: currentColor; -webkit-mask: var(--p-pfeil) center / contain no-repeat; mask: var(--p-pfeil) center / contain no-repeat; transition: transform .25s var(--p-ease); } :is(a.praxis-button, .praxis-cta, .wp-block-button__link):hover::after { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { :is(a.praxis-button, .praxis-cta, .wp-block-button__link):hover::after { transform: none; } } /* ========================================================================== Kopf ========================================================================== */ .praxis-kopf { position: sticky; top: 0; z-index: 50; } .admin-bar .praxis-kopf { top: 32px; } /* WP-Leiste (nur angemeldet): bis 782 px 46 px hoch, unter 600 px scrollt sie mit weg */ @media (max-width: 782px) { .admin-bar .praxis-kopf { top: 46px; } } @media (max-width: 600px) { .admin-bar .praxis-kopf { top: 0; } } /* Sprungziele (#kontaktformular …) rechnen die WP-Leiste mit ein, sonst verdeckt der Kopf oben 32 px */ html:has(body.admin-bar) { --p-leiste: 32px; } @media (max-width: 782px) { html:has(body.admin-bar) { --p-leiste: 46px; } } @media (max-width: 600px) { html:has(body.admin-bar) { --p-leiste: 0px; } } .praxis-header { background: rgba(255, 255, 255, .97); transition: box-shadow .25s var(--p-ease); } .praxis-header.is-scrolled { box-shadow: 0 1px 0 var(--p-blau-hell), 0 6px 24px rgba(0, 0, 0, .05); } .praxis-header__inner { box-sizing: border-box; max-width: var(--p-breite); margin: 0 auto; padding: 0 var(--p-rand); min-height: var(--p-kopf-hoehe); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Logo „Gemeinsam wachsen“ (04_design/logo/logo.md). Alle Maße hängen an der Zeichenhöhe --p-logo-h. */ .praxis-logo { display: inline-flex; flex: none; align-items: center; gap: calc(var(--p-logo-h) * .3); text-decoration: none; color: var(--p-blau); } .praxis-logo__zeichen { height: calc(var(--p-logo-h) * 1.04); width: auto; flex: none; margin: calc(var(--p-logo-h) * -.02) 0; } /* gleicht die Luft im Logo-Ausschnitt aus (07.10.2026) */ .praxis-logo__text { display: flex; flex-direction: column; } .praxis-logo__name { font-family: var(--p-schrift-karte); font-weight: 500; font-size: calc(var(--p-logo-h) * .46); line-height: 1.05; white-space: nowrap; } .praxis-logo__zusatz { font-family: var(--wp--preset--font-family--text); font-weight: 500; font-size: max(13px, calc(var(--p-logo-h) * .27)); margin-top: calc(var(--p-logo-h) * .1); white-space: nowrap; } /* Untertitel: Kurzform mit geraden Strichen in Blau, überall (Entscheidung 24.10.2026) */ .praxis-logo__strich { display: inline-block; width: 1px; height: .95em; margin: 0 .42em; background: currentColor; opacity: .5; vertical-align: -.1em; } /* Hauptmenü (Markup aus dem Plugin: .praxis-nav--haupt) */ .praxis-nav ul { list-style: none; margin: 0; padding: 0; } .praxis-nav--haupt > ul { display: flex; align-items: center; gap: .125rem; } .praxis-nav--haupt > ul > li > a, .praxis-nav__toggle { display: inline-flex; align-items: center; gap: .375rem; padding: .6rem .65rem; border-radius: var(--p-pille); background: none; border: 0; color: var(--p-text); font: inherit; font-size: var(--p-fs-sm); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s var(--p-ease), color .2s var(--p-ease); } .praxis-nav--haupt > ul > li > a:hover, .praxis-nav__toggle:hover, .praxis-nav__toggle[aria-expanded="true"], .praxis-nav--haupt a[aria-current="page"], .praxis-nav__gruppe.is-current > .praxis-nav__toggle { background: var(--p-blau-hell); color: var(--p-blau); } .praxis-nav__pfeil { transition: transform .25s var(--p-ease); } .praxis-nav__toggle[aria-expanded="true"] .praxis-nav__pfeil { transform: rotate(180deg); } .praxis-nav__gruppe { position: relative; } .praxis-nav__dropdown { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 17rem; padding: .875rem !important; background: var(--p-weiss); border-radius: var(--p-schwebe); box-shadow: var(--p-schatten), 0 0 0 1px rgba(14, 26, 46, .04); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s var(--p-ease), transform .2s var(--p-ease), visibility 0s linear .2s; } .praxis-nav__dropdown::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; background: var(--p-weiss); transform: translateX(-50%) rotate(45deg); border-radius: 3px; } .praxis-nav__dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .praxis-nav__gruppe.is-open .praxis-nav__dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s var(--p-ease), transform .2s var(--p-ease), visibility 0s; } .praxis-nav__dropdown a { display: block; padding: .55rem .875rem; border-radius: .5rem; color: var(--p-text); text-decoration: none; white-space: nowrap; } .praxis-nav__dropdown a:hover, .praxis-nav__dropdown a[aria-current="page"] { background: var(--p-blau-hell); color: var(--p-blau); } .praxis-nav__dropdown--spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.5rem; min-width: 32rem; padding: 1.25rem 1.25rem 1rem !important; } .praxis-nav__spaltentitel { display: block; padding: 0 .875rem .4rem; font-size: var(--p-fs-xs); color: var(--p-grau); } .praxis-nav__ebene, .praxis-nav__zurueck { display: none; } /* nur im Handy-Menü */ .praxis-sprache__name { display: none; } /* ausgeschrieben nur im Handy-Menü */ .praxis-header__aktionen { display: flex; align-items: center; gap: .875rem; } .praxis-menue-kontakt { display: none; } /* Sprachwahl */ .praxis-sprachwechsel { display: flex; gap: 2px; padding: 4px; background: var(--p-blau-hell); border-radius: var(--p-pille); font-size: var(--p-fs-xs); } .praxis-sprache { display: flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: var(--p-pille); color: var(--p-text-leise); text-decoration: none; } .praxis-sprache svg { border-radius: 2px; } .praxis-sprache:hover { color: var(--p-blau); } .praxis-sprache.is-active { background: var(--p-weiss); color: var(--p-blau); font-weight: 600; box-shadow: 0 1px 4px rgba(14, 26, 46, .08); } /* Im Kopf ohne Flaggen: Logo, Menü, Sprache und Kontakt passen sonst nicht mit Luft in die Inhaltsbreite (25.10.2026) */ .praxis-header__aktionen .praxis-sprache svg { display: none; } .praxis-header__aktionen .praxis-sprache { padding: .45rem .7rem; } /* Burger */ .praxis-burger { display: none; position: relative; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--p-blau-hell); cursor: pointer; } .praxis-burger span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--p-blau); transition: transform .25s var(--p-ease), opacity .2s; } .praxis-burger span:nth-child(1) { top: 17px; } .praxis-burger span:nth-child(2) { top: 23px; } .praxis-burger span:nth-child(3) { top: 29px; } .praxis-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .praxis-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .praxis-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Zwischen Burger-Grenze und breiten Bildschirmen: Kopf etwas kompakter, damit Logo + Menü in eine Zeile passen */ @media (min-width: 1241px) and (max-width: 1360px) { .praxis-logo { --p-logo-h: 44px; } .praxis-header__inner { gap: 1rem; } .praxis-nav--haupt > ul > li > a, .praxis-nav__toggle { padding: .6rem .55rem; } } /* Laptops und Tablets quer (1024–1240 px): Menü sichtbar statt Burger (07.11.2026). Dafür ohne „Start“ (das Logo führt zur Startseite), kleineres Logo, nur die andere Sprache, engere Abstände. Burger-Grenze steht auch in praxis.js. */ @media (min-width: 1024px) and (max-width: 1240px) { .praxis-logo { --p-logo-h: 40px; } .praxis-header__inner { gap: .75rem; padding-left: 1.5rem; padding-right: 1.5rem; } .praxis-header__aktionen { gap: .5rem; } .praxis-nav__start { display: none; } .praxis-nav--haupt > ul > li > a, .praxis-nav__toggle { padding: .55rem .5rem; } .praxis-header__aktionen .praxis-sprache.is-active { display: none; } .praxis-header__aktionen .praxis-sprachwechsel { padding: 0; background: none; } .praxis-header__aktionen .praxis-sprache { padding: .45rem .6rem; border: 1px solid var(--p-blau-hell); } } /* Knapp über der Burger-Grenze: EN „Fees & Process“ ist länger, bei 1024 px stand der Kontakt-Button 3 px über dem Rand (08.11.2026) */ @media (min-width: 1024px) and (max-width: 1100px) { .praxis-nav--haupt > ul > li > a, .praxis-nav__toggle { padding: .55rem .4rem; } } @media (max-width: 1023px) { .praxis-burger { display: inline-block; } .praxis-header__inner { flex-wrap: wrap; } .praxis-header__menue { order: 3; flex-basis: 100%; display: none; padding: .5rem 0 1.5rem; border-top: 1px solid var(--p-blau-hell); } /* Offenes Menü als eigene, scrollbare Fläche unter dem Kopf – sonst ragt es aus dem mitlaufenden Kopf über den Bildschirm hinaus und der untere Teil (Kontakt, Sprache) ist nicht erreichbar. */ body.praxis-menue-offen .praxis-header__menue { display: flex; flex-direction: column; position: fixed; top: var(--p-menue-oben, var(--p-kopf-hoehe)); left: 0; right: 0; bottom: 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--p-weiss); padding: .5rem var(--p-rand) calc(2rem + env(safe-area-inset-bottom, 0px)); } /* Seite dahinter steht still. Nur html sperren: mit overflow auch am body wird dieser zum Scroll-Container, der Sticky-Kopf (mit dem Schließen-Knopf) scrollt dann aus dem Bild, sobald man nicht ganz oben ist. */ html:has(body.praxis-menue-offen) { overflow: hidden; } /* Offenes Menü in zwei Ebenen (Mockup D, 25.10.2026): erste Ebene kurz, „Therapieformen“ und „Praxen“ öffnen je eine zweite Ebene mit Zurück-Knopf (praxis.js). */ .praxis-header__menue > * { width: 100%; max-width: 34rem; } .praxis-nav--haupt { margin-bottom: 1.5rem; } .praxis-nav--haupt > ul { flex-direction: column; align-items: stretch; gap: 0; } .praxis-nav__toggle, .praxis-nav__pfeil, .praxis-nav__spaltentitel { display: none !important; } .praxis-nav--haupt > ul > li > a, .praxis-nav__ebene, .praxis-nav__dropdown a { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--p-blau-hell); border-radius: 0; background: none !important; color: var(--p-text); font: inherit; font-size: var(--p-fs-md); text-align: left; text-decoration: none; white-space: normal; cursor: pointer; } .praxis-nav--haupt a[aria-current="page"] { color: var(--p-blau); font-weight: 600; } .praxis-nav__ebene svg { flex: none; color: var(--p-blau); } .praxis-nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; min-width: 0; padding: 0 !important; background: none; border-radius: 0; } .praxis-nav__dropdown::before, .praxis-nav__dropdown::after { display: none; } .praxis-nav__dropdown--spalten { display: block; min-width: 0; } .praxis-nav__spalte > ul { display: none; } /* Zweite Ebene offen: nur sie zeigen */ .praxis-nav--haupt.is-ebene > ul > li:not(.praxis-nav__gruppe), .praxis-nav--haupt.is-ebene .praxis-nav__spalte:not(.is-offen), .praxis-nav--haupt.is-ebene .praxis-nav__ebene { display: none; } .praxis-nav__spalte.is-offen > ul { display: block; animation: praxis-ebene .25s var(--p-ease); } .praxis-nav__zurueck { display: block; } .praxis-nav__zurueck button { display: inline-flex; align-items: center; gap: .4rem; margin-left: -.25rem; padding: .5rem .25rem .75rem; border: 0; background: none; color: var(--p-blau); font: inherit; font-size: var(--p-fs-sm); font-weight: 600; cursor: pointer; } body.praxis-menue-offen .praxis-sticky { display: none; } } @media (max-width: 720px) { :root { --p-kopf-hoehe: 68px; } .praxis-cta { display: none; } .praxis-menue-kontakt { display: flex; width: 100%; margin-top: auto; box-sizing: border-box; } /* sitzt unten im Daumenbereich */ .praxis-header__inner { gap: .75rem; } .praxis-logo { --p-logo-h: 40px; } } @media (max-width: 440px) { .praxis-logo { --p-logo-h: 36px; } .praxis-logo { gap: .55rem; } .praxis-sprache.is-active { display: none; } /* nur die andere Sprache zeigen */ .praxis-header__aktionen .praxis-sprachwechsel { display: none; } /* Platz für das Logo: Sprachwahl wandert ins Menü */ /* Sprachwahl als erste Zeile im Menü (Mockup S2, 25.10.2026), ausgeschriebene Namen ohne Flaggen; auf der zweiten Ebene ausgeblendet */ .praxis-menue-sprache { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem 0 .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--p-blau-hell); } .praxis-header__menue:has(.is-ebene) .praxis-menue-sprache { display: none; } .praxis-menue-sprache__titel { font-size: var(--p-fs-xs); color: var(--p-grau); } .praxis-menue-sprache .praxis-sprachwechsel { display: inline-flex; } .praxis-menue-sprache .praxis-sprache.is-active { display: inline-flex; } .praxis-menue-sprache .praxis-sprache svg { display: none; } .praxis-menue-sprache .praxis-sprache__name { display: inline; } .praxis-sprache__kurz { display: none; } .praxis-sprache { padding: .5rem .55rem; } .praxis-burger { width: 44px; height: 44px; } .praxis-burger span { left: 13px; right: 13px; } .praxis-burger span:nth-child(1) { top: 15px; } .praxis-burger span:nth-child(2) { top: 21px; } .praxis-burger span:nth-child(3) { top: 27px; } } @keyframes praxis-ebene { from { opacity: 0; transform: translateX(1.5rem); } } @media (prefers-reduced-motion: reduce) { .praxis-nav__spalte.is-offen > ul { animation: none; } } /* Kleine Handys (320–360 px): Logo und Burger müssen in eine Zeile passen, sonst rutscht der Burger darunter */ @media (max-width: 360px) { .praxis-header__inner { padding-left: 1rem; padding-right: 1rem; gap: .5rem; } .praxis-logo__zusatz { font-size: 12.5px; } .praxis-burger { width: 40px; height: 40px; } .praxis-burger span { left: 11px; right: 11px; } .praxis-burger span:nth-child(1) { top: 13px; } .praxis-burger span:nth-child(2) { top: 19px; } .praxis-burger span:nth-child(3) { top: 25px; } } /* ========================================================================== Startseite ========================================================================== */ .praxis-start { margin: 0; } .praxis-abschnitt { padding-top: var(--p-abschnitt); padding-bottom: var(--p-abschnitt); } .praxis-band { padding: var(--p-abschnitt) 0; } .praxis-band--mint { background: var(--p-mint-bg); } .praxis-band--blau { background: var(--p-blau-hell); } /* Hero */ .praxis-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding-top: 2.5rem; } .praxis-hero__text { display: flex; flex-direction: column; gap: 1.75rem; } .praxis-hero__hallo { font-family: var(--p-schrift-karte); font-style: italic; font-size: var(--p-fs-xl); line-height: 1.2; color: var(--p-blau); } .praxis-hero__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-hero); line-height: .92; letter-spacing: -.03em; color: var(--p-blau); } /* „Beziehung braucht Bewusstsein.“ – längstes Wort muss in die Spalte passen */ .praxis-hero__titel { font-size: var(--p-fs-hero); line-height: .92; hyphens: none; overflow-wrap: normal; } .praxis-hero__hallo { font-weight: 400; margin: 0; } .praxis-hero__lead { display: flex; flex-direction: column; gap: 1em; font-size: var(--p-fs-lg); max-width: 27em; } .praxis-hero__lead p { margin: 0; } .praxis-hero .praxis-button svg { flex: none; border-radius: 2px; } .praxis-hero__bild { position: relative; padding-bottom: 3.5rem; } .praxis-hero__bild img { display: block; width: 100%; height: clamp(460px, 50vw, 680px); object-fit: cover; object-position: center 25%; } @media (max-width: 900px) { .praxis-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1rem; } .praxis-hero__bild img { height: 520px; } } @media (max-width: 480px) { .praxis-hero__bild img { height: 440px; } .praxis-hero .praxis-buttons > * { flex: 1 1 100%; } /* alle Buttons gleich breit, leicht mit dem Daumen zu treffen */ .praxis-button--gross { padding-left: 1.25rem; padding-right: 1.25rem; } /* „Erstgespräch anfragen“ bleibt einzeilig */ .praxis-kontakt .wp-element-button { padding-left: .75rem; padding-right: .75rem; } /* auch im Formular, bis 320 px; Schrift bleibt 19 px (Kontrast) */ } /* Querformat-Variante: Bild ist schon passend zugeschnitten (6:5), nichts abschneiden */ .praxis-hero__bild--quer img { height: auto; aspect-ratio: 6 / 5; object-position: center; } /* Chips */ .praxis-chips { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 70rem; list-style: none; margin: 0; padding: 0; } .praxis-anliegen__hinweis { margin: 1.25rem 0 0; } .praxis-chip { display: inline-block; padding: .5rem 1rem; font-size: var(--p-fs-sm); border-radius: var(--p-pille); background: var(--p-blau-hell); color: var(--p-blau); text-decoration: none; transition: transform .2s var(--p-ease), box-shadow .2s var(--p-ease); } .praxis-chip--mint { background: var(--p-mint-hell); color: var(--p-text); } .praxis-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(14, 26, 46, .08); color: inherit; } .praxis-chip[aria-current] { background: var(--p-blau); color: #fff; } .praxis-seitenkopf .praxis-themen { margin-top: 2rem; } @media (max-width: 600px) { .praxis-chips { gap: .4rem; } /* mehrere Chips je Zeile statt einer Spalte */ .praxis-chip { padding: .45rem .7rem; font-size: var(--p-fs-xs); } .praxis-themen { gap: .5rem; } .praxis-themen .praxis-chip { padding: .5rem .875rem; font-size: var(--p-fs-sm); } } .praxis-startseite-text:empty, .praxis-startseite-text:not(:has(*)) { display: none; } .praxis-startseite-text { padding-bottom: var(--p-abschnitt); } /* Postkarten */ .praxis-postkarte { position: relative; box-sizing: border-box; aspect-ratio: 148 / 105; padding: 2.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem; text-align: center; box-shadow: 0 12px 28px rgba(14, 26, 46, .16); transition: transform .35s var(--p-ease), box-shadow .35s var(--p-ease); } .praxis-postkarte__text { font-family: var(--p-schrift-karte); font-size: var(--p-fs-xl); line-height: 1.25; } .praxis-postkarte--blau { background: var(--p-blau); color: #FFFFFF; } .praxis-postkarte--weiss { background: var(--p-weiss); color: var(--p-blau); } .praxis-postkarte--weiss .praxis-postkarte__text { font-size: var(--p-fs-lg); } .praxis-postkarte--mint { background: var(--p-mint-hell); color: var(--p-text); } .praxis-postkarte--links { transform: rotate(-1.2deg); } .praxis-postkarte--rechts { transform: rotate(.9deg); } .praxis-postkarte--leicht { transform: rotate(-.5deg); } .praxis-briefmarke { position: absolute; top: 16px; right: 16px; width: 34px; height: 42px; background: var(--p-orange); } .praxis-briefmarke::after { content: ""; position: absolute; inset: 4px; border: 1.5px dashed rgba(255, 255, 255, .7); } .praxis-postkarte--hero { position: absolute; left: -28px; bottom: 0; width: min(300px, 80%); padding: 1.5rem; align-items: flex-start; text-align: left; background: var(--p-mint-hell); color: var(--p-blau); transform: rotate(-2.5deg); } .praxis-postkarte--hero .praxis-postkarte__text { font-size: var(--p-fs-lg); } .praxis-postkarte__gruss { font-family: var(--p-schrift-karte); font-style: italic; font-size: var(--p-fs-sm); color: inherit; } /* gleiche Farbe wie der Kartentext */ @media (max-width: 900px) { .praxis-postkarte--hero { left: 12px; } } .praxis-angebote > .praxis-h2 { grid-column: 1 / -1; margin-bottom: 0; } .praxis-angebote { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; padding-top: .5rem; padding-bottom: var(--p-abschnitt); } .praxis-angebot { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: .75rem; align-content: start; color: var(--p-text); text-decoration: none; } /* Karte, Titel, Text, Link: über alle Angebote auf einer Linie */ .praxis-angebot > * { margin: 0; } .praxis-angebot .praxis-postkarte { margin-bottom: 1rem; align-self: stretch; aspect-ratio: auto; min-height: 12rem; } /* gleich hoch wie die längste Karte */ .praxis-angebot:hover { color: var(--p-text); } .praxis-angebot:hover .praxis-postkarte { transform: rotate(0) translateY(-6px); box-shadow: 0 20px 40px rgba(14, 26, 46, .2); } .praxis-angebot__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-xl); color: var(--p-blau); } .praxis-angebot p { color: var(--p-text-leise); } @media (max-width: 960px) { /* mobil als Liste: Mini-Postkarte, Titel, Text, Pfeil – der Spruch bleibt dem Desktop */ .praxis-angebote { grid-template-columns: 1fr; gap: 0; max-width: 34rem; margin-left: 0; } .praxis-angebote > .praxis-h2 { margin-bottom: 1.25rem; } .praxis-angebot { grid-row: auto; grid-template-rows: none; grid-template-columns: 44px minmax(0, 1fr) 20px; grid-template-areas: "karte titel pfeil" "karte text pfeil"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 1rem 0; border-top: 1px solid var(--p-blau-hell); } .praxis-angebot:last-child { border-bottom: 1px solid var(--p-blau-hell); } .praxis-angebot .praxis-postkarte { grid-area: karte; align-self: center; width: 44px; height: 54px; min-height: 0; margin: 0; padding: 0; box-shadow: 0 4px 10px rgba(14, 26, 46, .14); transform: rotate(-3deg); } .praxis-angebot .praxis-postkarte::after { content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 12px; background: var(--p-orange); } .praxis-angebot .praxis-postkarte--weiss { border: 1px solid var(--p-blau-hell); } .praxis-angebot .praxis-postkarte__text, .praxis-angebot .praxis-briefmarke { display: none; } .praxis-angebot:hover .praxis-postkarte { transform: rotate(-3deg); box-shadow: 0 4px 10px rgba(14, 26, 46, .14); } .praxis-angebot__titel { grid-area: titel; align-self: end; font-size: var(--p-fs-lg); } .praxis-angebot p { grid-area: text; align-self: start; font-size: var(--p-fs-sm); line-height: 1.45; } .praxis-angebot .praxis-mehr { grid-area: pfeil; font-size: 0; } /* „Mehr erfahren“ bleibt im Linknamen, sichtbar nur der Pfeil */ .praxis-angebot .praxis-mehr::after { font-size: 1.25rem; margin-left: 0; } } /* Über mich */ .praxis-ueber__foto { display: block; width: 100%; height: clamp(360px, 50vw, 700px); object-fit: cover; } .praxis-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } /* Zitat, Geschichte, Unterschrift zentriert wie ein kurzer Brief; Ausbildungen stehen ausführlich auf „Über mich“ */ .praxis-ueber__brief { box-sizing: border-box; max-width: calc(52rem + 2 * var(--p-rand)); margin: 0 auto; padding: 5rem var(--p-rand) 0; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .praxis-ueber__brief > * { margin: 0; } .praxis-ueber__brief .praxis-leise { max-width: 36em; } .praxis-ueber__weiter { margin: 2.5rem 0 0; padding: 0 var(--p-rand) var(--p-abschnitt); text-align: center; } .praxis-zitat-titel { font-family: var(--p-schrift-karte); font-weight: 500; font-size: var(--p-fs-3xl); line-height: 1.12; color: var(--p-blau); } .praxis-unterschrift { margin: 0; } .praxis-unterschrift img { display: block; width: 150px; max-width: 100%; height: auto; } .praxis-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; font-size: var(--p-fs-sm); } .praxis-tags li { background: var(--p-mint-bg); padding: .45rem .875rem; border-radius: var(--p-pille); } @media (max-width: 900px) { .praxis-zwei { grid-template-columns: minmax(0, 1fr); gap: 3rem; } .praxis-ueber__brief { padding-top: 3.5rem; } } /* Ablauf & Preise */ .praxis-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.75rem; } .praxis-schritte li { display: flex; gap: 1.25rem; } .praxis-schritte p { color: var(--p-text-leise); margin: .25rem 0 0; } .praxis-schritte strong { font-weight: 600; } .praxis-schritte__nr { flex: none; width: 2rem; font-family: var(--p-schrift-karte); font-size: var(--p-fs-2xl); line-height: 1; color: var(--p-blau); } .praxis-preise { background: var(--p-weiss); border-radius: var(--p-ecke); padding: 2.5rem; } /* Raster Format × Ort: Preis groß, Dauer klein darunter – so ist sichtbar, dass online Paar kürzer ist, nicht billiger */ .praxis-preise__raster { width: 100%; border-collapse: collapse; margin: 0 0 1rem; } .praxis-preise__raster thead th { font-size: var(--p-fs-sm); font-weight: 400; color: var(--p-text-leise); text-align: right; padding: 0 0 .5rem 1rem; } .praxis-preise__raster tbody th { text-align: left; font-weight: 400; padding: 1rem 1rem 1rem 0; vertical-align: top; } .praxis-preise__raster td { text-align: right; padding: 1rem 0 1rem 1rem; vertical-align: top; white-space: nowrap; } .praxis-preise__raster tbody tr { border-top: 1px solid var(--p-blau-hell); } .praxis-preise__raster td strong { display: block; font-weight: 600; font-size: 1.125em; } .praxis-preise__raster td span { display: block; font-size: var(--p-fs-sm); color: var(--p-text-leise); } .praxis-preise__info { margin: 0 0 .75rem; } .praxis-preise .praxis-kleingedruckt { color: var(--p-text-leise); margin-bottom: 1.25rem; } @media (max-width: 600px) { .praxis-preise { padding: 1.75rem; } } @media (max-width: 360px) { .praxis-preise { padding: 1.25rem; } } /* Fragen */ .praxis-fragen { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4.5rem; } .praxis-fragen h3 { font-family: var(--p-schrift-karte); font-weight: 500; font-size: var(--p-fs-xl); line-height: 1.25; color: var(--p-blau); margin: 0 0 .625rem; } .praxis-fragen p { color: var(--p-text-leise); margin: 0; } @media (max-width: 900px) { .praxis-fragen { grid-template-columns: 1fr; gap: 2.25rem; } } /* Praxen */ .praxis-praxen { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .praxis-praxis { background: var(--p-weiss); border-radius: var(--p-ecke); overflow: hidden; display: flex; flex-direction: column; } .praxis-praxis__medien { overflow: hidden; } .praxis-praxis__medien img { display: block; width: 100%; height: 300px; object-fit: cover; transition: transform .5s var(--p-ease); } .praxis-praxis:hover .praxis-praxis__medien img { transform: scale(1.03); } /* Google-Bewertung als Pille unter dem Praxisnamen (praxis_google_bewertung) – nur Werte, nichts lädt von Google */ .praxis-google { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; margin-top: -.375rem !important; padding: .45rem .875rem .45rem .625rem; border: 1px solid var(--p-linie); border-radius: var(--p-pille); font-size: var(--p-fs-sm); line-height: 1; color: var(--p-text); text-decoration: none; white-space: nowrap; transition: border-color .2s var(--p-ease), background-color .2s var(--p-ease); } .praxis-google:hover, .praxis-google:focus-visible { border-color: var(--p-blau); background: var(--p-blau-hell); } .praxis-google strong { font-weight: 700; } .praxis-google__anzahl { color: var(--p-text-leise); } .praxis-google__logo { width: 1rem; height: 1rem; flex: none; } .praxis-google__sterne { position: relative; display: inline-block; width: 4.9rem; height: .95rem; flex: none; } /* fünf Sterne, Gold anteilig auf den Schnitt (--praxis-sterne) beschnitten */ .praxis-google__sterne svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #E3E6EB; } .praxis-google__sterne svg + svg { fill: #F4B400; clip-path: inset(0 calc(100% - var(--praxis-sterne, 100%)) 0 0); } .praxis-google__punkt { color: var(--p-linie); } .praxis-google__pfeil { width: .8rem; height: .8rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Online-Karte: beide Praxis-Bewertungen untereinander, mit Ortsnamen */ .praxis-google-paar { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: -.375rem !important; } .praxis-google-paar .praxis-google { margin-top: 0 !important; } .praxis-google__ort { font-weight: 700; color: var(--p-blau); margin-right: .1rem; } @media (max-width: 520px) { .praxis-google { font-size: var(--p-fs-xs); } .praxis-google__sterne { width: 4.25rem; height: .825rem; } } @media (max-width: 400px) { .praxis-google__anzahl { display: none; } } /* 375 px: mit Anzahl 7 px zu breit für die Karte; Anzahl steht im aria-label und auf Google */ @media (max-width: 360px) { .praxis-google { gap: .25rem; padding-inline: .5rem .75rem; } .praxis-google__pfeil { display: none; } } /* 320 px: sonst zu breit, der Rand zeigt den Link */ .praxis-praxis__text { padding: 2rem; display: flex; flex-direction: column; gap: .875rem; } .praxis-praxis__text > * { margin: 0; } .praxis-praxis__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-xl); color: var(--p-blau); margin: 0; } .praxis-praxis__titel a { color: inherit; text-decoration: none; } .praxis-praxis__titel a:hover, .praxis-praxis__titel a:focus-visible { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 2px; } .praxis-angaben { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: var(--p-fs-sm); color: var(--p-text-leise); } .praxis-angaben li { display: flex; align-items: flex-start; gap: .625rem; line-height: 1.4; } .praxis-angaben svg { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--p-blau); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .praxis-angaben a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; } .praxis-online { margin-top: 2rem; background: var(--p-weiss); border-radius: var(--p-ecke); padding: 1.75rem 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .praxis-online .praxis-praxis__titel { font-size: var(--p-fs-lg); } .praxis-online p { color: var(--p-text-leise); margin: .25rem 0 0; } @media (max-width: 1000px) { .praxis-praxen { grid-template-columns: 1fr; } } @media (max-width: 520px) { .praxis-praxis__medien img { height: 220px; } .praxis-praxis__text { padding: 1.5rem; } } /* Kontaktbereich + Formular – überall gleich, aus [praxis_anfrage] (Formular-Markup aus dem Plugin: .praxis-kontakt) */ .praxis-kontaktbereich { box-sizing: border-box; font-size: var(--p-fs-md); /* fest, sonst erbt der Block die Größe des Seiteninhalts */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } /* In Seiten so breit wie auf der Startseite (dort innerhalb .praxis-breite) – sonst kippt die Auswahl auf zwei Spalten */ .praxis-inhalt > .alignwide, .praxis-inhalt .praxis-kontaktbereich { max-width: calc(var(--p-breite) - 2 * var(--p-rand)) !important; margin-left: auto !important; margin-right: auto !important; } /* breite Module bündig mit Logo und H1, nicht 80rem */ .praxis-kontaktbereich .praxis-kontaktbereich__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: clamp(2.25rem, 3.8vw, 3.25rem); line-height: .98; letter-spacing: -.03em; color: var(--p-blau); margin: 0; text-wrap: balance; } .praxis-kontaktbereich .praxis-leise { color: var(--p-text-leise) !important; } .praxis-kontaktbereich .praxis-formular-box .praxis-kontakt { margin: 0 !important; background: none; padding: 0; border-radius: 0; } .praxis-kontakt-foto { display: block; width: 100%; height: 340px; object-fit: cover; } .praxis-formular-box { background: var(--p-mint-bg); border-radius: var(--p-ecke); padding: 2.5rem; } .praxis-formular-box__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; color: var(--p-blau); margin: 0 0 1.375rem; padding-bottom: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--p-blau) 15%, transparent); } .praxis-formular-box:has(.praxis-kontakt__danke) .praxis-formular-box__titel { display: none; } /* nach dem Absenden nur die Danke-Meldung */ @media (max-width: 900px) { .praxis-kontaktbereich { grid-template-columns: 1fr; gap: 2rem; } .praxis-kontaktbereich > .praxis-stapel { display: contents; } .praxis-kontaktbereich .praxis-direkt { order: 1; margin-top: 0; } .praxis-formular-box { padding: 1.75rem 1.375rem; } } /* mobil: Formular vor „Lieber direkt?“ */ .praxis-kontakt form > p { margin: 0 0 .875rem; display: flex; flex-direction: column; gap: .375rem; } /* Kompakt: eine Zeile je Feld, Label links, Feld rechts; Erklärung als Tooltip am Label */ .praxis-kontakt form > .praxis-kontakt__zeile { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: .5rem 1rem; margin: 0 0 .625rem; position: relative; } .praxis-kontakt__zeile--oben { align-items: start !important; } .praxis-kontakt__zeile--oben .praxis-kontakt__label { padding-top: .55rem; } .praxis-kontakt__label { display: flex; align-items: center; gap: .375rem; font-size: var(--p-fs-sm); font-weight: 500; line-height: 1.25; } @media (max-width: 520px) { .praxis-kontakt form > .praxis-kontakt__zeile { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem .625rem; } .praxis-kontakt__label, .praxis-kontakt .praxis-kontakt__label label { font-size: var(--p-fs-xs); } } /* Handy: Label über dem Feld, Feld in voller Breite – nebeneinander blieben fürs Tippen nur ~170 px */ @media (max-width: 480px) { .praxis-kontakt form > .praxis-kontakt__zeile { grid-template-columns: minmax(0, 1fr); gap: .375rem; margin-bottom: 1rem; } .praxis-kontakt__zeile--oben .praxis-kontakt__label { padding-top: 0; } .praxis-kontakt__label, .praxis-kontakt .praxis-kontakt__label label { font-size: var(--p-fs-sm); } .praxis-kontakt__auswahl { min-height: 0; } } .praxis-tipp { display: inline-flex; } /* Tooltip richtet sich an der ganzen Zeile aus, nicht am Knopf – passt so auch aufs Handy */ .praxis-tipp__knopf { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; color: var(--p-text-leise); font: italic 600 .6875rem/1 Georgia, serif; cursor: help; position: relative; } .praxis-tipp__knopf::after { content: ""; position: absolute; inset: -13px; } /* Tippfläche 44 px, sichtbar bleibt der kleine Kreis */ .praxis-tipp__knopf:hover, .praxis-tipp__knopf[aria-expanded="true"] { color: var(--p-blau); } .praxis-tipp__knopf:focus-visible { outline: 2px solid var(--p-blau); outline-offset: 2px; } .praxis-tipp__text { position: absolute; z-index: 20; left: 0; bottom: calc(100% + .375rem); width: max-content; max-width: min(22rem, 100%); box-sizing: border-box; padding: .625rem .75rem; border-radius: var(--p-ecke); background: var(--p-blau); color: #FFFFFF; font-size: var(--p-fs-xs); font-weight: 400; line-height: 1.45; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; } .praxis-tipp:not(.is-zu):hover .praxis-tipp__text, .praxis-tipp:not(.is-zu) .praxis-tipp__knopf:focus-visible + .praxis-tipp__text, .praxis-tipp__knopf[aria-expanded="true"] + .praxis-tipp__text { opacity: 1; visibility: visible; } .praxis-kontakt [hidden], .praxis-kontakt__honig { display: none !important; } /* Spam-Schutzfeld bleibt unsichtbar */ .praxis-kontakt label { font-size: var(--p-fs-sm); font-weight: 500; } .praxis-kontakt input[type="text"], .praxis-kontakt input[type="email"], .praxis-kontakt input[type="tel"], .praxis-kontakt select, .praxis-kontakt textarea, .praxis-feld input { box-sizing: border-box; width: 100%; padding: .55rem .75rem; border: 1px solid var(--p-linie); border-radius: var(--p-ecke); background: var(--p-weiss); color: var(--p-text); font: inherit; font-size: var(--p-fs-sm); font-weight: 400; transition: border-color .2s, box-shadow .2s; /* 16 px wie Labels und Platzhalter, nicht kleiner (iOS zoomt sonst) */ } /* Safari zeichnet Auswahlfelder sonst nativ (niedriger, Doppelpfeil): eigener Pfeil, Höhe wie die Eingabefelder */ .praxis-kontakt select { -webkit-appearance: none; appearance: none; padding-right: 2.25rem; line-height: inherit; background: var(--p-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231E3A66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8 10 12.5 14.5 8'/%3E%3C/svg%3E") right .75rem center / 1.125rem no-repeat; } .praxis-kontakt input:focus, .praxis-kontakt select:focus, .praxis-kontakt textarea:focus, .praxis-feld input:focus { outline: none; border-color: var(--p-blau); box-shadow: 0 0 0 3px rgba(30, 58, 102, .15); } .praxis-kontakt [aria-invalid="true"] { border-color: #B42318; } .praxis-kontakt__feldfehler { grid-column: -2; font-size: var(--p-fs-xs); line-height: 1.4; color: #B42318; } /* unter dem Feld in der Feldspalte, auf dem Handy einspaltig */ .praxis-kontakt__feldfehler:empty { display: none; } .praxis-kontakt textarea::placeholder { color: var(--p-text-leise); opacity: .8; font-size: var(--p-fs-sm); } .praxis-kontakt__auswahl { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; min-height: 2.6rem; align-items: center; } .praxis-kontakt__auswahl--spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); padding: .4rem 0; } .praxis-kontakt__auswahl label { display: flex; gap: .625rem; align-items: center; font-weight: 400; } .praxis-kontakt input[type="checkbox"], .praxis-kontakt input[type="radio"] { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--p-blau); } .praxis-kontakt__krise { font-size: var(--p-fs-xs); color: var(--p-text-leise); text-wrap: pretty; } .praxis-kontakt__krise strong, .praxis-krise strong { font-weight: 600; } /* Frage fett, Text läuft in derselben Zeile weiter */ .praxis-krise { text-wrap: pretty; } .praxis-kontakt__vertraulich { flex-direction: row !important; align-items: flex-start; gap: .625rem !important; font-size: var(--p-fs-xs); color: var(--p-text-leise); } .praxis-kontakt__vertraulich svg { flex: none; color: var(--p-blau); margin-top: .1rem; } .praxis-kontakt__danke p { margin: 0 0 .75rem; } .praxis-kontakt__danke p:last-child { margin-bottom: 0; } .praxis-kontakt__danke-titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-lg); color: var(--p-blau); } .praxis-kontakt__danke, .praxis-kontakt__fehler { padding: 1rem 1.25rem; border-radius: var(--p-ecke); background: var(--p-weiss); } .praxis-kontakt__fehler { color: #B42318; } /* ========================================================================== Unterseiten & Ratgeber ========================================================================== */ .praxis-seite { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: var(--p-abschnitt); } .praxis-seitenkopf { margin-bottom: 2.5rem; } .praxis-seitenkopf:not(:has(*)) { display: none; } /* Titel ausgeblendet (Kontaktseite: H1 steht im Kontaktbereich) */ .praxis-seitenkopf:not(:has(*)) ~ .praxis-inhalt, .praxis-seitenkopf:not(:has(*)) ~ .praxis-inhalt > :first-child { margin-top: 0 !important; } /* sonst stapeln sich Blockabstand und Rand des Kontaktbereichs auf den Seitenabstand */ .praxis-seitenkopf .praxis-einleitung { margin: 1.25rem 0 0; font-size: var(--p-fs-md); } .praxis-seitenkopf__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-4xl) !important; line-height: .98; letter-spacing: -.03em; color: var(--p-blau); } /* Ratgeber-Kopf: H1 in Funnel Display wie auf den Unterseiten (Titel sind länger, daher kleiner), Teil nach dem „?“ als Unterzeile (Plugin). Darunter die Kapitel des Artikels als schlichtes Inhaltsverzeichnis ([praxis_sprunglinks … mindestens="3"] in templates/single.html, Gestaltung unten bei den Rechtstexten) */ .praxis-seitenkopf__titel--artikel { font-size: clamp(2.25rem, 3.6vw, 3.25rem) !important; line-height: 1.02; } .praxis-seitenkopf__titel--artikel .praxis-auftakt__unterzeile { font-size: max(.42em, var(--p-fs-lg)); } .praxis-artikel .praxis-seitenkopf > .praxis-kapitelliste { margin-top: 2rem; } .praxis-kategorie, .praxis-kategorie a { font-size: var(--p-fs-xs); color: var(--p-text-leise); text-decoration: none; } .praxis-pfad a:hover, .praxis-pfad a:focus-visible { color: var(--p-blau); text-decoration: underline; text-underline-offset: .15em; } .praxis-pfad__trenner { margin: 0 .45em; } /* Ratgeber-Illustrationen (bin/illustrationen, Plugin praxis_illustration): ohne Foto-Filter und Fotoecke, der Weißraum steckt im Bild. Weit im Kopf groß und mittig unter der H1 (Variante B, Valentin 27.10.2026). Nah im Text vor dem mittleren Kapitel. */ img.praxis-illustration { filter: none; border-radius: 0; } .praxis-illu { margin: 0; } .praxis-illu img { display: block; width: 100%; height: auto; } .praxis-illu--weit { width: min(100%, 40rem); margin-block: 2.5rem 1.5rem !important; } .praxis-illu--nah { width: min(100%, 26rem); margin-block: 2.5rem !important; } .praxis-inhalt { font-size: var(--p-fs-base); } .praxis-inhalt h2 { font-size: var(--p-fs-2xl); margin-top: clamp(3.5rem, 2rem + 3vw, 4.5rem); } /* neuer Abschnitt: mehr Luft als um Bilder, Zitate, Kästen (3rem) */ .praxis-inhalt h3 { font-family: var(--p-schrift-karte); font-weight: 500; font-size: var(--p-fs-xl); margin-top: 2rem; } /* [praxis_praxen] mit Überschrift: Kartentitel sind h3, sollen aber aussehen wie auf der Startseite. */ .praxis-inhalt h3.praxis-praxis__titel { font-family: var(--p-schrift-display); font-weight: 700; margin-top: 0; } .praxis-inhalt .praxis-online h3.praxis-praxis__titel { font-size: var(--p-fs-lg); } .praxis-inhalt ul li::marker { color: var(--p-orange); } .praxis-inhalt blockquote { margin: 2.5rem 0; padding: 0; border: 0; font-family: var(--p-schrift-karte); font-size: var(--p-fs-xl); line-height: 1.3; color: var(--p-blau); } /* Seitendaten (Plugin) */ .praxis-seitendaten { background: var(--p-blau-hell); border-radius: var(--p-ecke); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; } .praxis-seitendaten dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; } .praxis-seitendaten dt { color: var(--p-text-leise); } .praxis-seitendaten dd { margin: 0; } .praxis-seitendaten__fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; margin-top: 1.25rem; } /* Empfehlungen: Liste auf /empfehlungen/ */ .praxis-empfehlung__text { margin: .25rem 0 0; color: var(--p-text-leise); } .praxis-empfehlungen li + li { margin-top: .75rem; } .praxis-seitendaten__fotos img { width: 100%; height: 14rem; object-fit: cover; border-radius: var(--p-ecke); } /* Anfrage-Band unter Unterseiten */ .praxis-anfrage { background: var(--p-mint-bg); padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .praxis-anfrage:not(:has(*)) { display: none; } /* Band leer, wenn der Artikel schon mit eigenem Anfrage-Kasten endet */ .praxis-anfrage__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; } .praxis-anfrage__inner p { margin: 0; } .praxis-anfrage__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-3xl); line-height: 1; letter-spacing: -.02em; color: var(--p-blau); margin-bottom: .5rem !important; } /* Ratgeber-Übersicht */ .praxis-ratgeber__raster { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1.5rem; list-style: none; padding: 0; } .praxis-ratgeber__raster > li { margin: 0 !important; } .praxis-ratgeber__karte { height: 100%; box-sizing: border-box; background: var(--p-blau-hell); border-radius: var(--p-ecke); padding: 2rem; display: flex; flex-direction: column; gap: .75rem; transition: transform .2s var(--p-ease); } .praxis-ratgeber__raster > li:nth-child(even) .praxis-ratgeber__karte { background: var(--p-mint-hell); } .praxis-ratgeber__karte:hover { transform: translateY(-3px); } .praxis-ratgeber__karte > * { margin: 0 !important; } .praxis-artikel-titel { font-family: var(--p-schrift-karte); font-weight: 500; font-size: var(--p-fs-lg); line-height: 1.25; } .praxis-artikel-titel a { color: var(--p-blau); text-decoration: none; } .praxis-artikel-titel a:hover { text-decoration: underline; } .praxis-ratgeber__karte .wp-block-post-excerpt__excerpt { color: var(--p-text-leise); font-size: var(--p-fs-sm); margin: 0; } .praxis-seiten { margin-top: 3rem; } .praxis-seite.praxis-ratgeber > * { max-width: calc(var(--p-breite) - 2 * var(--p-rand)); } /* bündig mit Logo und Footer; contentSize 80rem allein lag 32 px weiter links */ .praxis-seite.praxis-ratgeber .praxis-seitenkopf { padding-bottom: 0; } /* Chips → Raster sonst 64 px, Einleitung → Chips nur 32 px */ @media (max-width: 600px) { .praxis-ratgeber__karte { padding: 1.5rem; } .praxis-ratgeber__raster { gap: 1rem; } } /* Ratgeber-Übersicht [praxis_ratgeber_uebersicht]: „für Sie allein / zu zweit“, darunter A–Z (Mockup spielwiese/unterseiten/ratgeber-3.html) */ .praxis-rg-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.5rem; margin-top: 2.5rem !important; } .praxis-rg-spalte { background: var(--p-blau-hell); border-radius: var(--p-ecke); padding: clamp(1.75rem, 4vw, 2.75rem); } .praxis-rg-spalte--paar { background: var(--p-mint-bg); } .praxis-rg-spalte__kopf { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; } .praxis-rg-spalte__kopf svg { width: 56px; height: 72px; flex: none; } .praxis-rg-spalte h2 { margin: 0; font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-3xl); line-height: 1.05; color: var(--p-blau); } .praxis-rg-spalte h2 span { display: block; margin-bottom: .4rem; font-family: var(--p-schrift-karte); font-style: italic; font-weight: 500; font-size: var(--p-fs-base); } .praxis-rg-spalte ul, .praxis-rg-register ul { list-style: none; margin: 0; padding: 0; } .praxis-rg-spalte li { border-top: 1px solid rgba(30, 58, 102, .18); margin: 0; } .praxis-rg-spalte li a { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; color: var(--p-blau); text-decoration: none; font-family: var(--p-schrift-display); font-weight: 600; font-size: var(--p-fs-md); line-height: 1.3; } .praxis-rg-spalte li a::after { content: "→"; font-weight: 400; } .praxis-rg-spalte li a:hover { text-decoration: underline; text-underline-offset: .2em; } .praxis-rg-az { margin-top: var(--p-abschnitt) !important; margin-bottom: 0 !important; } /* unten reicht das padding von main, sonst doppelter Abstand zum Fuß */ .praxis-rg-az__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 2rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--p-blau); } .praxis-rg-az__kopf .praxis-h2 { margin: 0; } .praxis-rg-alphabet { display: flex; flex-wrap: wrap; gap: .15rem; font-weight: 600; font-size: var(--p-fs-xs); } .praxis-rg-alphabet a, .praxis-rg-alphabet span { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: var(--p-pille); text-decoration: none; } .praxis-rg-alphabet a { color: var(--p-blau); background: var(--p-blau-hell); } .praxis-rg-alphabet a:hover { background: var(--p-blau); color: var(--p-weiss); } .praxis-rg-alphabet span { color: var(--p-linie); } .praxis-rg-themen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--p-linie); } .praxis-rg-themen p { margin: 0; font-weight: 600; color: var(--p-blau); } .praxis-rg-themen .praxis-themen { gap: .5rem; } .praxis-rg-themen .praxis-chip { padding: .5rem 1rem; font-size: var(--p-fs-sm); } .praxis-rg-register { columns: 3 15rem; column-gap: 3.5rem; margin-top: .5rem; } .praxis-rg-buchstabe { break-inside: avoid; display: grid; grid-template-columns: 2.5rem 1fr; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--p-linie); scroll-margin-top: calc(var(--p-kopf-hoehe) + 1rem); } .praxis-rg-buchstabe > h3 { margin: 0; font-family: var(--p-schrift-karte); font-style: italic; font-weight: 500; font-size: 1.9rem; line-height: 1; color: var(--p-blau); } .praxis-rg-buchstabe ul { display: flex; flex-direction: column; gap: .7rem; } .praxis-rg-buchstabe li { margin: 0; } .praxis-rg-buchstabe a { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; } .praxis-rg-buchstabe strong { font-family: var(--p-schrift-display); font-weight: 600; font-size: var(--p-fs-md); line-height: 1.3; color: var(--p-blau); } .praxis-rg-buchstabe small { font-size: var(--p-fs-xs); color: var(--p-grau); } .praxis-rg-buchstabe a:hover strong { text-decoration: underline; text-underline-offset: .2em; } .praxis-rg-spalte__kopf svg, .praxis-rg-uebungen svg { fill: none; stroke: var(--p-blau); stroke-width: 1.4; } /* Einleitung der Übersicht: Text der Seite „Ratgeber“ + Unterschrift */ .praxis-rg-einleitung { max-width: 40em; margin-top: 1.25rem; color: var(--p-text-leise); font-size: var(--p-fs-md); } .praxis-rg-einleitung p { margin: 0 0 1rem; } .praxis-rg-einleitung a { color: var(--p-blau); } .praxis-rg-einleitung .praxis-unterschrift img { width: 130px; } /* Übungen zum Ausprobieren: Karten mit Bogen-Zeichen (allein / zu zweit) */ .praxis-rg-uebungen { margin-top: var(--p-abschnitt) !important; } .praxis-rg-uebungen .praxis-h2 { margin-bottom: 1.5rem; } .praxis-rg-uebungen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1rem; } .praxis-rg-uebungen li { margin: 0; } .praxis-rg-uebungen a { height: 100%; box-sizing: border-box; display: grid; grid-template-columns: 2.25rem 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--p-ecke); background: var(--p-mint-bg); text-decoration: none; } .praxis-rg-uebungen svg { grid-row: 1 / 3; width: 2.25rem; height: 2.9rem; } .praxis-rg-uebungen strong { font-family: var(--p-schrift-display); font-weight: 600; font-size: var(--p-fs-md); line-height: 1.3; color: var(--p-blau); } .praxis-rg-uebungen small { font-size: var(--p-fs-xs); color: var(--p-grau); } .praxis-rg-uebungen a:hover strong { text-decoration: underline; text-underline-offset: .2em; } /* Themenseite: Liste mit Kurztitel und erstem Satz (statt Kartenraster) */ .praxis-rg-thema { list-style: none; margin: 2.5rem 0 var(--p-abschnitt) !important; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); column-gap: 3.5rem; border-top: 2px solid var(--p-blau); } .praxis-rg-thema li { margin: 0; border-bottom: 1px solid var(--p-linie); } .praxis-rg-thema a { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 0; text-decoration: none; } .praxis-rg-thema strong { font-family: var(--p-schrift-display); font-weight: 600; font-size: var(--p-fs-lg); line-height: 1.3; color: var(--p-blau); } .praxis-rg-thema strong::after { content: " →"; font-weight: 400; } .praxis-rg-thema span { color: var(--p-text-leise); font-size: var(--p-fs-sm); line-height: 1.5; } .praxis-rg-thema a:hover strong { text-decoration: underline; text-underline-offset: .2em; } .praxis-rg-thema .praxis-illu--karte { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; margin: 0 0 .75rem; } /* Szenen sind unterschiedlich hoch: einheitliche Fläche, Bild darin eingepasst */ .praxis-rg-thema .praxis-illu--karte picture { display: contents; } .praxis-rg-thema .praxis-illu--karte img { width: auto; max-width: 100%; max-height: 100%; } .praxis-rg-thema .praxis-illu--leer { aspect-ratio: 4 / 3; margin-bottom: .75rem; } /* Artikel ohne Bild (sexueller Missbrauch): leere Fläche, damit die Titel einer Reihe bündig stehen */ @media (max-width: 56rem) { .praxis-rg-thema .praxis-illu--leer { display: none; } } /* einspaltig: keine Lücke */ /* Abschluss unter dem Artikel: Autorin links, „Mehr zum Thema“ rechts, eine Linie über beidem */ .praxis-artikel-ende { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem 3rem; margin-top: 3.5rem; padding-top: 1.75rem; border-top: 2px solid var(--p-blau); } .praxis-artikel-ende:not(:has(.praxis-passt-dazu)) { grid-template-columns: minmax(0, 1fr); } .praxis-artikel-ende .praxis-vorstellung--autorin { grid-template-columns: 5rem 1fr; gap: 1.25rem; align-items: start; background: none; padding: 0; margin: 0 !important; } .praxis-vorstellung--autorin .praxis-vorstellung__foto { width: 5rem; height: 6.25rem; } .praxis-vorstellung--autorin .praxis-vorstellung__text { gap: .3rem; } .praxis-vorstellung--autorin .praxis-vorstellung__name { margin-bottom: .2rem; } .praxis-vorstellung--autorin .praxis-vorstellung__text p { color: var(--p-text) !important; line-height: 1.5; } .praxis-vorstellung--autorin .praxis-link-stark { font-size: var(--p-fs-sm); margin-top: .3rem; } .praxis-artikel-stand { font-size: var(--p-fs-xs); color: var(--p-grau); margin: .75rem 0 1.25rem; } .praxis-artikel-stand a { color: inherit; } .praxis-bereich--quellen { gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--p-linie); font-size: var(--p-fs-xs); color: var(--p-grau); } .praxis-bereich--quellen h3 { font-size: var(--p-fs-sm) !important; margin: 0 0 .5rem; } .praxis-bereich--quellen ul { margin: 0; padding-left: 1.1rem; } .praxis-bereich--quellen a { color: inherit; } .praxis-passt-dazu h2 { font-family: var(--wp--preset--font-family--text); font-weight: 400; letter-spacing: 0; font-size: var(--p-fs-xs) !important; line-height: 1.4; color: var(--p-text-leise); margin: 0 0 .25rem !important; } .praxis-passt-dazu ul { list-style: none; margin: 0; padding: 0 !important; } /* sonst rückt .praxis-inhalt ul die Liste ein */ .praxis-passt-dazu li { margin: 0; border-bottom: 1px solid var(--p-linie); } .praxis-passt-dazu li:last-child { border-bottom: 0; } .praxis-passt-dazu a { display: block; padding: .7rem 0; text-decoration: none; font-family: var(--p-schrift-display); font-weight: 600; font-size: var(--p-fs-md); line-height: 1.3; color: var(--p-blau); } .praxis-passt-dazu a::after { content: " →"; font-weight: 400; } .praxis-passt-dazu a:hover { text-decoration: underline; text-underline-offset: .2em; } @media (max-width: 760px) { .praxis-artikel-ende { grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; } .praxis-artikel-ende .praxis-vorstellung--autorin { grid-template-columns: 5rem 1fr; } .praxis-vorstellung--autorin .praxis-vorstellung__foto { width: 5rem; height: 6.25rem; } } /* ========================================================================== Mitlaufende Anfrage-Leiste ========================================================================== */ .praxis-sticky { position: fixed; left: 50%; bottom: 20px; z-index: 40; width: max-content; max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 1rem; padding: 8px 8px 8px 24px; background: var(--p-weiss); border-radius: var(--p-pille); box-shadow: 0 8px 28px rgba(14, 26, 46, .18); transform: translate(-50%, 140%); opacity: 0; transition: transform .4s var(--p-ease), opacity .3s var(--p-ease); } .praxis-sticky.is-visible { transform: translate(-50%, 0); opacity: 1; } .praxis-sticky__text { font-size: var(--p-fs-sm); font-weight: 700; white-space: nowrap; } .praxis-sticky .praxis-button { white-space: nowrap; } @media (max-width: 760px) { .praxis-sticky { left: 12px; right: 12px; width: auto; max-width: none; bottom: 12px; padding: 8px; transform: translateY(140%); justify-content: space-between; } .praxis-sticky.is-visible { transform: translateY(0); } .praxis-sticky__text { display: none; } .praxis-sticky .praxis-button { flex: 1; } } @media (max-width: 360px) { .praxis-sticky .praxis-button { padding-left: .75rem; padding-right: .75rem; } .praxis-sticky .praxis-button::after { display: none; } /* Pfeil weg, damit der Text in 19 px fett hineinpasst */ } /* ========================================================================== Fuß ========================================================================== */ .praxis-footer { background: var(--p-blau-hell); padding: 0; font-size: var(--p-fs-sm); margin: 0; } .praxis-footer :is(p, h2, h3, ul) { margin: 0; } .praxis-footer ul { list-style: none; padding: 0; } .praxis-footer__spalten, .praxis-footer__unten { box-sizing: border-box; max-width: var(--p-breite); margin: 0 auto; padding-left: var(--p-rand); padding-right: var(--p-rand); } .praxis-footer__titel { font-family: var(--p-schrift-display); font-weight: 600; font-size: var(--p-fs-xs) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--p-text-leise); } /* Oben: Newsletter als randloses Mintband, Text links, Formular rechts (Entscheidung 24.10.2026: ohne Logo und Satz) */ .praxis-footer__oben { box-sizing: border-box; background: var(--p-mint-bg); /* derselbe Ton wie Formular-Box und Anfrage-Band */ padding: 3.5rem max(var(--p-rand), calc((100% - var(--p-breite)) / 2 + var(--p-rand))); } .praxis-anfrage:has(*) + footer .praxis-footer__oben { background: var(--p-blau-hell); box-shadow: inset 0 -1px 0 var(--p-linie); } /* Artikel: grünes Anfrage-Band direkt darüber – kein zweites Grün, Band gehört zum Footer */ .praxis-newsletter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; } .praxis-newsletter__text, .praxis-newsletter__formular { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .praxis-newsletter__text > *, .praxis-newsletter__formular > * { margin: 0 !important; } .praxis-newsletter__zeile { display: flex; gap: .5rem; } .praxis-newsletter__zeile input { flex: 1; min-width: 0; border-radius: var(--p-pille); padding: .8rem 1.125rem; border: 1px solid var(--p-linie); background: var(--p-weiss); font: inherit; } .praxis-newsletter__zeile input:focus { outline: none; border-color: var(--p-blau); box-shadow: 0 0 0 3px rgba(30, 58, 102, .15); } .praxis-newsletter__zeile input[aria-invalid="true"] { border-color: #B42318; } /* wie .praxis-kontakt */ .praxis-newsletter__zeile button { flex: none; } .praxis-newsletter__feldfehler { padding-inline: 1.125rem; font-size: var(--p-fs-xs); line-height: 1.4; color: #B42318; } .praxis-newsletter__feldfehler:empty { display: none; } .praxis-newsletter__satz { font-family: var(--p-schrift-karte); font-size: var(--p-fs-xl); line-height: 1.3; color: var(--p-blau); max-width: 22em; text-wrap: pretty; } .praxis-newsletter__hinweis { font-size: var(--p-fs-xs); text-wrap: pretty; } .praxis-newsletter__hinweis a { white-space: nowrap; } /* Vier Spalten */ .praxis-footer__spalten { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr) minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, .6fr); gap: 2.5rem; padding-top: 4rem; padding-bottom: 3.5rem; } .praxis-footer__spalte { display: flex; flex-direction: column; gap: 1.125rem; align-items: flex-start; } .praxis-footer > * { margin-block: 0 !important; } .praxis-footer__spalten > *, .praxis-footer__spalte > * { margin: 0 !important; } /* Block-Layout setzt sonst Abstand über Geschwister */ .praxis-footer a:not(.praxis-button) { text-decoration: none; color: var(--p-blau); } /* Buttons behalten weiße Schrift */ .praxis-footer a:not(.praxis-button):hover { text-decoration: underline; } /* Kontaktliste (Fuß, „Lieber direkt?“): Icon im weißen Kreis vor Mail, Telefon, Instagram */ .praxis-kontaktliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; } .praxis-kontaktliste a { display: flex; align-items: center; gap: .75rem; overflow-wrap: anywhere; } .praxis-kontaktliste svg { flex: none; width: 2.125rem; height: 2.125rem; padding: .5rem; box-sizing: border-box; border-radius: 50%; background: var(--p-weiss); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .praxis-kontaktliste .praxis-kontaktliste__punkt { fill: currentColor; } .praxis-kontaktliste--gross { gap: .875rem; } .praxis-kontaktliste--gross a { gap: 1rem; font-family: var(--p-schrift-display); font-weight: 600; font-size: min(var(--p-fs-lg), (100cqi - 3.75rem) / 14); /* Mailadresse (≈ 13,8 em) bleibt bis 320 px in einer Zeile */ line-height: 1.2; color: var(--p-blau); text-decoration: none; } .praxis-kontaktliste--gross a:hover, .praxis-kontaktliste--gross a:focus-visible { text-decoration: underline; text-underline-offset: .15em; } .praxis-kontaktliste--gross svg { width: 2.75rem; height: 2.75rem; padding: .7rem; border: 1px solid var(--p-linie); } .praxis-kontaktliste__kurz { display: none; } .praxis-footer__praxen { display: flex; flex-direction: column; gap: .875rem; } .praxis-footer__praxen a { font-weight: 600; } .praxis-footer__praxen > li > span { display: block; color: var(--p-text-leise); line-height: 1.5; } /* Ratgeber: vier Titel als schlichte Links wie die Rechtslinks, ohne Kategorie und Linien, höchstens zwei Zeilen */ .praxis-footer__artikel { width: 100%; } .praxis-footer__artikel .wp-block-post-template { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; } .praxis-footer__artikel .wp-block-post { margin: 0 !important; } /* Flow-Layout setzt sonst 20 px darüber */ .praxis-footer__artikel .praxis-artikel-titel { font-family: inherit; font-weight: 400; font-size: var(--p-fs-sm) !important; line-height: 1.4; letter-spacing: 0; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: pretty; } .praxis-footer__recht .praxis-nav--fuss ul, .praxis-nav--angebote ul { display: flex; flex-direction: column; gap: .75rem; } /* Nur fürs Handy (siehe unten): Symbole und Komma in der Praxen-Liste, Ratgeber/Anlaufstellen-Zeilen, Rechtliches unten */ .praxis-footer__praxen svg, .praxis-footer__praxen .praxis-footer__komma, .praxis-footer__zeilen, .praxis-footer__unten .praxis-nav--recht { display: none; } .praxis-tel { white-space: nowrap; font-weight: 600; } /* Unten: Krisenhinweis und Berufsbezeichnung */ .praxis-footer__unten { display: flex; justify-content: space-between; gap: .75rem 2rem; flex-wrap: wrap; padding-top: 1.5rem; padding-bottom: 2.75rem; border-top: 1px solid var(--p-linie); font-size: var(--p-fs-xs); color: var(--p-text-leise); } .praxis-krise { color: var(--p-text); text-wrap: pretty; } @media (max-width: 1100px) { .praxis-footer__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .praxis-footer { padding-bottom: 4.5rem; } .praxis-newsletter { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .praxis-footer__spalten { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; } } /* Handy und Tablet hochkant bis 900 px (Mockup B4, 04_design/spielwiese/footer-mobil-3.html): Newsletter oben wie am Desktop, Kontakt als drei Kacheln, Praxen und Links als weiße Karten mit Zeilen (Symbol, Text, Pfeil), Krise mit Linie, Rechtliches mit großer Tippfläche. Kein Anfrage-Button: die Sticky-Leiste blendet sich am Footer aus, auf vielen Seiten steht das Anfrage-Band direkt darüber. */ @media (max-width: 900px) { .praxis-footer { padding-bottom: 0; } .praxis-footer__oben { padding-top: 2rem; padding-bottom: 2rem; } .praxis-newsletter, .praxis-newsletter__text, .praxis-newsletter__formular { gap: .75rem; } .praxis-newsletter__satz { font-size: var(--p-fs-base); line-height: 1.4; } .praxis-footer__spalten { gap: 1.5rem; padding-top: 1.75rem; padding-bottom: 1.5rem; } .praxis-footer__spalte { gap: .625rem; } .praxis-footer__ratgeber, .praxis-footer__recht, .praxis-footer__angebote { display: none; } /* Therapieformen stehen im Handy-Menü */ .praxis-footer .praxis-kontaktliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; } .praxis-footer .praxis-kontaktliste a { flex-direction: column; gap: .375rem; padding: .625rem .25rem; border-radius: var(--p-ecke); background: var(--p-weiss); font-weight: 600; font-size: var(--p-fs-xs); text-align: center; } .praxis-footer .praxis-kontaktliste svg { background: var(--p-blau-hell); } .praxis-footer .praxis-kontaktliste__lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .praxis-footer .praxis-kontaktliste__kurz { display: inline; } .praxis-footer__kontaktbutton { display: none !important; } /* Karten: weiß, Zeilen mit Trennlinie ab Textbeginn; die ganze Zeile ist der Link */ .praxis-footer__praxen, .praxis-footer__zeilen ul { gap: 0; width: 100%; background: var(--p-weiss); border-radius: var(--p-ecke); } .praxis-footer__praxen li + li, .praxis-footer__zeilen li + li { background: linear-gradient(var(--p-linie), var(--p-linie)) no-repeat 4rem 0 / calc(100% - 4rem) 1px; } .praxis-footer__praxen li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .875rem; min-height: 3.25rem; padding: .625rem 1rem; box-sizing: border-box; } .praxis-footer__praxen svg { display: block; grid-row: 1 / 3; width: 2.125rem; height: 2.125rem; padding: .5rem; box-sizing: border-box; border-radius: 50%; background: var(--p-blau-hell); fill: none; stroke: var(--p-blau); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .praxis-footer__praxen a { grid-column: 2; line-height: 1.3; } .praxis-footer__praxen a::before { content: ""; position: absolute; inset: 0; } /* Tippfläche über die ganze Zeile */ .praxis-footer__praxen > li > span { grid-column: 2; font-size: var(--p-fs-xs); line-height: 1.35; } .praxis-footer__praxen br { display: none; } .praxis-footer__praxen .praxis-footer__komma { display: inline; } .praxis-footer__teil { white-space: nowrap; } /* Umbruch nur am Komma: Straße und Ort bleiben ganz (320–360 px) */ .praxis-footer__praxen li::after, .praxis-footer__zeilen a::after { content: ""; flex: none; width: 1.125rem; height: 1.125rem; background: var(--p-blau); -webkit-mask: var(--p-pfeil) center / contain no-repeat; mask: var(--p-pfeil) center / contain no-repeat; } .praxis-footer__praxen li::after { grid-column: 3; grid-row: 1 / 3; } /* Ratgeber und Anlaufstellen: zweite Karte, Symbole per CSS (das Menü liefert keine) */ .praxis-footer__zeilen { display: flex; } .praxis-footer__zeilen nav { width: 100%; } .praxis-footer__zeilen a { display: flex; align-items: center; gap: .875rem; min-height: 3.25rem; padding: .625rem 1rem; box-sizing: border-box; font-weight: 600; line-height: 1.3; } .praxis-footer__zeilen a::before { content: ""; flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--p-blau-hell) center / 1.125rem no-repeat; } .praxis-footer__zeilen li:first-child a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h14v15H6.5A2.5 2.5 0 0 0 4 20.5 2.5 2.5 0 0 0 6.5 23H20'/%3E%3C/svg%3E"); } .praxis-footer__zeilen li:last-child a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m5.6 5.6 3.6 3.6M14.8 14.8l3.6 3.6M18.4 5.6l-3.6 3.6M9.2 14.8l-3.6 3.6'/%3E%3C/svg%3E"); } .praxis-footer__zeilen a::after { margin-left: auto; } /* Unten: Krise mit Linie statt Fläche, Rechtliches mit großer Tippfläche, kein Leerraum unter dem © */ .praxis-footer__unten { flex-direction: column; gap: .5rem; padding-top: 0; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); border-top: 0; } .praxis-footer__unten .praxis-krise { position: relative; margin-bottom: .5rem; padding: .875rem 1rem .875rem 3.625rem; border: 1px solid var(--p-linie); border-radius: var(--p-ecke); line-height: 1.5; } .praxis-footer__unten .praxis-krise::before { content: ""; position: absolute; left: 1rem; top: .875rem; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--p-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / 1rem no-repeat; } .praxis-footer__unten .praxis-nav--recht { display: block; } .praxis-nav--recht ul { display: flex; flex-wrap: wrap; } .praxis-nav--recht li + li::before { content: "·"; margin: 0 .625rem; color: var(--p-grau); } .praxis-nav--recht a { display: inline-block; padding: .5rem 0; } } /* ---------- Wenig Bewegung ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .praxis-punkt.is-hops { animation: none; } } /* ========================================================================== Unterseiten: Textgestaltung + Bausteine aus dem Plugin (includes/gestaltung.php) ========================================================================== */ .praxis-inhalt > p:first-child { font-size: var(--p-fs-lg); line-height: 1.5; color: var(--p-text); } .praxis-artikel .praxis-inhalt > p:first-child { font-size: inherit; line-height: inherit; } /* Ratgeber: kein größerer Einleitungsabsatz (Valentin, 27.10.2026) */ .praxis-inhalt p, .praxis-inhalt li { color: var(--p-text); } .praxis-inhalt ul:not(.praxis-chips):not(.praxis-tags):not(.praxis-kontaktliste) { padding-left: 1.25rem; } .praxis-inhalt ul:not(.praxis-chips):not(.praxis-tags):not(.praxis-kontaktliste) li { margin: .35rem 0; } .praxis-inhalt a:not(.praxis-button):not(.praxis-chip):not(.praxis-ratgeber__karte):not(.praxis-link-stark) { color: var(--p-blau); text-decoration-thickness: 1px; } /* Externe Links im Fließtext: kleines ↗ dahinter, festes Leerzeichen hält es am Wort; interne Links ohne Pfeil (Valentin, 29.10.2026) */ .praxis-inhalt :is(p, td, li:not(.praxis-kontaktliste > li)) a[href^="http"]:not([href*="paar-sexualtherapie.de"]):not(.praxis-button):not(.praxis-chip):not(.praxis-link-stark)::after { content: "\00a0↗"; content: "\00a0↗" / ""; font-size: .8em; text-decoration: none; display: inline; } /* Zitat aus Markdown (> …) = Postkarte */ .praxis-inhalt .wp-block-quote { box-sizing: border-box; max-width: 34rem; margin: 3.5rem auto !important; padding: 2.5rem 2.25rem; background: var(--p-weiss); box-shadow: 0 12px 28px rgba(14, 26, 46, .14); transform: rotate(-1deg); text-align: center; border: 0; } .praxis-inhalt .wp-block-quote p { font-family: var(--p-schrift-karte); font-size: var(--p-fs-xl); line-height: 1.3; color: var(--p-blau); margin: 0; } /* Startseite: zwei Kundenstimmen als Postkarten (templates/front-page.html) */ .praxis-stimmen__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; align-items: start; margin-bottom: 2.5rem; } .praxis-stimme { box-sizing: border-box; margin: 0; padding: 2.25rem 2rem; background: var(--p-weiss); box-shadow: 0 12px 28px rgba(14, 26, 46, .14); border: 0; } .praxis-stimme p { font-family: var(--p-schrift-karte); font-size: var(--p-fs-lg); line-height: 1.45; color: var(--p-blau); margin: 0; } .praxis-stimme--links { transform: rotate(-.8deg); } .praxis-stimme--rechts { transform: rotate(.8deg); margin-top: 2.5rem; } .praxis-stimmen__hinweis { max-width: 40rem; font-size: var(--p-fs-sm); margin: 0 0 1rem; } @media (max-width: 900px) { .praxis-stimmen__raster { grid-template-columns: minmax(0, 1fr); } .praxis-stimme--rechts { margin-top: 0; } .praxis-stimme { padding: 1.75rem 1.5rem; } } /* Abstand der Bausteine im Textfluss */ .praxis-b-bild, .praxis-b-postkarte, .praxis-b-chips, .praxis-hinweis, .praxis-b-schritte, .praxis-b-preise, .praxis-b-tags, .praxis-vorstellung, .praxis-b-praxis, .praxis-b-praxen, .praxis-galerie, .praxis-b-ratgeber, .praxis-b-anfrage, .praxis-kontakt, .praxis-inhalt .praxis-kontaktbereich { margin-top: 3rem !important; margin-bottom: 3rem !important; } .praxis-b-chips { margin-top: 1.5rem !important; margin-bottom: 2rem !important; } .praxis-b-bild { margin-left: auto; margin-right: auto; } .praxis-hinweis, .praxis-b-schritte, .praxis-preise, .praxis-vorstellung { box-sizing: border-box; } /* Kästen bündig mit der Textspalte: Polster nach innen, nicht 26–40 px links und rechts hinaus */ .praxis-b-bild img { display: block; width: 100%; object-fit: cover; } .praxis-b-bild--breit img { height: clamp(320px, 42vw, 580px); } .praxis-b-bild--hoch { max-width: 30rem; } .praxis-b-bild--hoch img { aspect-ratio: 4 / 5; } .praxis-b-bild--quer { max-width: 38rem; } .praxis-b-bild--quer img { aspect-ratio: 3 / 2; } .praxis-b-postkarte { display: flex; justify-content: center; } .praxis-b-postkarte .praxis-postkarte { width: min(30rem, 100%); } .praxis-hinweis { background: var(--p-mint-bg); border-radius: var(--p-ecke); padding: 1.375rem 1.625rem; } .praxis-hinweis--kasse, .praxis-hinweis--allein { background: var(--p-blau-hell); } .praxis-hinweis--krise { background: var(--p-weiss); box-shadow: inset 0 0 0 1.5px var(--p-blau-hell); } .praxis-hinweis__titel { display: block; font-weight: 600; color: var(--p-blau); margin-bottom: .35rem; } .praxis-hinweis p { margin: 0; font-size: var(--p-fs-sm); color: var(--p-text-leise) !important; } .praxis-b-schritte { background: var(--p-mint-bg); border-radius: var(--p-ecke); padding: 2rem 2.25rem; } .praxis-b-preise { box-shadow: inset 0 0 0 1.5px var(--p-blau-hell); } .praxis-b-preise .praxis-h3 { margin-bottom: .5rem; } .praxis-vorstellung { display: grid; grid-template-columns: 9rem 1fr; gap: 1.75rem; align-items: center; background: var(--p-blau-hell); border-radius: var(--p-ecke); padding: 1.5rem; } .praxis-vorstellung__foto { width: 9rem; height: 11rem; object-fit: cover; border-radius: 6px; } .praxis-vorstellung__text { display: flex; flex-direction: column; gap: .4rem; } .praxis-vorstellung__text p { margin: 0; font-size: var(--p-fs-sm); color: var(--p-text-leise) !important; } .praxis-vorstellung__label { font-size: var(--p-fs-xs); color: var(--p-text-leise); } .praxis-vorstellung__name { font-family: var(--p-schrift-display); font-size: var(--p-fs-lg); color: var(--p-blau); } @media (max-width: 560px) { .praxis-vorstellung { grid-template-columns: 1fr; } .praxis-vorstellung__foto { width: 100%; height: 16rem; } } .praxis-b-praxis .praxis-praxis { display: grid; grid-template-columns: 1.2fr 1fr; } .praxis-b-praxis .praxis-praxis__medien img { height: 100%; min-height: 300px; } @media (max-width: 860px) { .praxis-b-praxis .praxis-praxis { grid-template-columns: 1fr; } .praxis-b-praxis .praxis-praxis__medien img { min-height: 220px; height: 220px; } } .praxis-b-praxen .praxis-online { box-shadow: inset 0 0 0 1.5px var(--p-blau-hell); } .praxis-b-praxen .praxis-praxis { box-shadow: inset 0 0 0 1.5px var(--p-blau-hell); } /* Große Praxis-Karte auf der Standortseite ([praxis_praxis art="gross"]): links Angaben und Karte, rechts Fotos als Slideshow */ .praxis-seite:has(.praxis-standort) .praxis-seitendaten { display: none; } /* dieselben Angaben stehen in der Karte */ .praxis-inhalt > .praxis-standort { box-sizing: border-box; max-width: calc(var(--p-breite) - 2 * var(--p-rand)) !important; margin: 2.5rem auto 0 !important; } .praxis-standort { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; background: var(--p-weiss); border-radius: var(--p-ecke); box-shadow: inset 0 0 0 1.5px var(--p-blau-hell); overflow: hidden; } .praxis-standort__text { padding: 2rem; display: flex; flex-direction: column; gap: .875rem; } .praxis-standort__text > * { margin: 0 !important; } .praxis-standort .praxis-buttons { margin-top: .25rem !important; } .praxis-slides { min-width: 0; padding: 1rem 1rem 1rem 0; } .praxis-slides__buehne { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--p-blau-hell); } .praxis-slides__foto { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .4s var(--p-ease); } .praxis-slides__foto.ist-aktiv { opacity: 1; } .praxis-slides__foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .praxis-slides__pfeil { position: absolute; top: 50%; z-index: 1; width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92) var(--p-pfeil) center / 1.1rem no-repeat; cursor: pointer; } .praxis-slides__pfeil--zurueck { left: .5rem; transform: scaleX(-1); } .praxis-slides__pfeil--vor { right: .5rem; } .praxis-slides__pfeil:hover { background-color: #fff; } .praxis-slides__zaehler { position: absolute; left: .5rem; bottom: .5rem; z-index: 1; padding: .1rem .6rem; border-radius: var(--p-pille); background: rgba(255, 255, 255, .92); font-size: var(--p-fs-xs); font-weight: 600; color: var(--p-blau); } .praxis-slides__leiste { display: flex; gap: .4rem; padding-top: .5rem; overflow-x: auto; scrollbar-width: thin; } .praxis-slides__daumen { flex: none; width: 4.25rem; height: 3.25rem; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: none; cursor: pointer; opacity: .55; transition: opacity .2s; } .praxis-slides__daumen:hover, .praxis-slides__daumen.ist-aktiv { opacity: 1; } .praxis-slides__daumen.ist-aktiv { box-shadow: inset 0 0 0 2px var(--p-blau); } .praxis-slides__daumen img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .praxis-slides__daumen.ist-aktiv img { padding: 2px; box-sizing: border-box; border-radius: 4px; } @media (max-width: 900px) { .praxis-standort { grid-template-columns: minmax(0, 1fr); } .praxis-standort__text { padding: 1.5rem; } .praxis-slides { padding: 0 1.5rem 1.5rem; order: -1; padding-top: 1.5rem; } /* auf dem Handy erst die Fotos, dann die Angaben */ } /* Therapieformen ([praxis_angebote titel=""]) im Seitentext, in [praxis_bereich art="angebote"] */ .praxis-inhalt > .praxis-bereich--angebote { gap: 2.5rem; } .praxis-bereich--angebote .praxis-angebote { padding: 0; margin: 0; max-width: none; } .praxis-inhalt .praxis-angebot__titel { font-family: var(--p-schrift-display); font-weight: 700; margin: 0; } .praxis-galerie { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .75rem; } .praxis-galerie figure { margin: 0; overflow: hidden; border-radius: 6px; } .praxis-galerie img { display: block; width: 100%; height: 260px; object-fit: cover; transition: transform .5s var(--p-ease); } .praxis-galerie figure:hover img { transform: scale(1.04); } @media (max-width: 860px) { .praxis-galerie { grid-template-columns: 1fr 1fr; } .praxis-galerie img { height: 200px; } } .praxis-galerie--hoch { grid-template-columns: repeat(4, 1fr); } .praxis-galerie--hoch img { height: auto; aspect-ratio: 4 / 5; } @media (max-width: 860px) { .praxis-galerie--hoch { grid-template-columns: 1fr 1fr; } .praxis-galerie--hoch img { height: auto; } } /* Video-Schleifen: gleicher Farblook und gleiche Ecken wie Fotos, Pause-Knopf unten rechts */ .praxis-b-video, .praxis-b-videos { margin-top: 3rem !important; margin-bottom: 3rem !important; } .praxis-video { position: relative; margin: 0; } .praxis-video video { display: block; width: 100%; object-fit: cover; filter: var(--p-foto-filter); border-radius: var(--p-ecke); background: var(--p-blau-hell); } .praxis-b-video { margin-left: auto; margin-right: auto; } .praxis-b-video--breit video { aspect-ratio: 16 / 9; } .praxis-b-video--panorama video { aspect-ratio: 7 / 3; } .praxis-b-video--hoch { max-width: 30rem; } .praxis-b-video--hoch video, .praxis-b-videos video { aspect-ratio: 4 / 5; } .praxis-b-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .75rem; } @media (max-width: 860px) { .praxis-b-video--panorama video { aspect-ratio: 4 / 3; } } @media (max-width: 600px) { .praxis-b-bild--breit img { height: auto; aspect-ratio: 4 / 3; } } /* Querbild nicht fast quadratisch beschneiden */ .praxis-video__knopf { position: absolute; right: .75rem; bottom: .75rem; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--p-blau); cursor: pointer; display: grid; place-items: center; } .praxis-video__knopf::before { content: ""; width: .7rem; height: .8rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; } .praxis-video__knopf.is-pausiert::before { width: 0; height: 0; border: 0; border-left: .7rem solid currentColor; border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; margin-left: .2rem; } .praxis-video__knopf:focus-visible { outline: 2px solid var(--p-blau); outline-offset: 2px; } .praxis-b-ratgeber .praxis-h3 { margin-bottom: 1.25rem; } .praxis-b-ratgeber__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; } a.praxis-ratgeber__karte { text-decoration: none; min-height: 9rem; } .praxis-ratgeber__karte--mint { background: var(--p-mint-hell) !important; } /* Überschrift gehört zu dem, was folgt: darunter weniger Luft als zwischen Absätzen – auch vor Bildern und Kästen (z. B. Tags auf „Über mich“) */ .praxis-inhalt > :is(h2, h3) + :not(.wp-block-quote, .praxis-b-postkarte) { margin-top: .75rem !important; } /* Postkarten stehen frei, behalten ihren Abstand */ .praxis-b-anfrage { box-sizing: border-box; background: var(--p-mint-bg); border-radius: var(--p-ecke); padding: clamp(1.75rem, 4vw, 2.75rem); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .praxis-b-anfrage > div > p { margin: 0; } .praxis-b-anfrage > div > p:not(.praxis-b-anfrage__titel) { color: var(--p-text-leise) !important; } /* nicht ins Formular durchgreifen; Titel bleibt blau */ .praxis-b-anfrage__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-2xl); line-height: 1.05; color: var(--p-blau) !important; margin-bottom: .4rem !important; } .praxis-inhalt .praxis-kontakt { background: var(--p-mint-bg); border-radius: var(--p-ecke); padding: clamp(1.5rem, 4vw, 2.5rem); } /* Direktkontakt neben dem Formular: E-Mail und Telefon groß, je eine Zeile */ .praxis-direkt { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-top: .75rem; padding-top: 1.25rem; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, var(--p-blau) 18%, transparent); } .praxis-direkt .praxis-direkt__label { margin: 0 0 .25rem !important; font-size: var(--p-fs-sm); color: var(--p-text-leise) !important; } .praxis-direkt .praxis-direkt__zusatz { margin: .5rem 0 0 !important; font-size: var(--p-fs-sm); color: var(--p-text-leise) !important; max-width: 32em; } /* Aufruf mitten im Text */ .praxis-b-zwischenruf { box-sizing: border-box; margin: 2.5rem auto !important; padding: 1.25rem 1.5rem; border: 1px solid var(--p-linie); border-radius: var(--p-ecke); display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; } .praxis-b-zwischenruf p { flex: 1 1 18rem; margin: 0; } .praxis-fehlt { color: #B42318; font-size: var(--p-fs-xs); } /* Seitenkopf etwas großzügiger + feine Linie zum Inhalt */ .praxis-seite .praxis-seitenkopf { padding-bottom: 1.5rem; } /* Handy: lange deutsche Wörter in Überschriften trennen statt über den Rand laufen lassen („Verbraucherstreitbeilegung“ ragte bei 375 px hinaus). Die Startseiten-Aussage bleibt ungetrennt. */ @media (max-width: 600px) { :is(.praxis-inhalt, .praxis-seitenkopf, .praxis-anfrage, .praxis-abschnitt, .praxis-band) :is(h1, h2, h3, h4):not(.praxis-hero__titel) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 10 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; } /* nur an Wortfugen mit je 5 Buchstaben: „Sexual-therapie“, nicht „Sexu-altherapie“ */ } /* Kontaktformular während des Versands (praxis.js sperrt den Knopf) */ .praxis-kontakt .wp-element-button:disabled { opacity: .75; cursor: progress; } /* ========================================================================== Bereiche: gestaltete Abschnitte im Seitentext ([praxis_bereich art="…"], bin/sync-content) ========================================================================== */ .praxis-inhalt > .praxis-bereich { box-sizing: border-box; max-width: calc(var(--p-breite) - 2 * var(--p-rand)) !important; margin: var(--p-abschnitt) auto 0 !important; } .praxis-inhalt > .praxis-bereich:first-child { margin-top: 0 !important; } .praxis-bereich > *, .praxis-bereich__spalte > * { margin-top: 0 !important; margin-bottom: 0 !important; max-width: none; } .praxis-bereich, .praxis-bereich__spalte { display: flex; flex-direction: column; gap: 1.25rem; } .praxis-bereich:has(> .praxis-bereich__spalte) { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .praxis-bereich h2 { margin: 0; } /* Über mich (drei Kapitel), Ablauf & Kosten (Band) und Erfahrungen: H2 so groß wie .praxis-h2 der Startseite */ :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint, .praxis-bereich--anliegen, .praxis-bereich--anliegen-hell, .praxis-bereich--ablauf, .praxis-bereich--angebote, .praxis-bereich--gesehen, .praxis-bereich--rueckmeldungen) h2 { font-size: var(--p-fs-3xl) !important; line-height: 1.05; letter-spacing: -.015em; } .praxis-bereich .praxis-b-bild { width: 100%; max-width: none; } /* sonst schrumpft die Figur durch margin: auto im Flex-Stapel */ .praxis-dachzeile { font-size: var(--p-fs-xs) !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--p-grau) !important; } .praxis-dachzeile + h2 { margin-top: -.5rem !important; } /* Flächen über die ganze Breite, Inhalt bleibt in der Spalte */ .praxis-inhalt > .praxis-bereich--kapitel-mint, .praxis-inhalt > .praxis-bereich--anliegen, .praxis-inhalt > .praxis-bereich--ablauf, .praxis-inhalt > .praxis-bereich--gesehen, .praxis-inhalt > .praxis-bereich--stunde { --bereich-rand: var(--wp--style--root--padding-left, 0px); max-width: none !important; margin-left: calc(-1 * var(--bereich-rand)) !important; margin-right: calc(-1 * var(--bereich-rand)) !important; padding: var(--p-abschnitt) max(var(--p-rand), (100vw - var(--p-breite)) / 2 + var(--p-rand)); } @media (max-width: 900px) { .praxis-bereich:has(> .praxis-bereich__spalte) { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 901px) { .praxis-bereich.praxis-bereich--auftakt { grid-template-columns: 1.05fr .95fr; } .praxis-bereich.praxis-bereich--kapitel { grid-template-columns: 5fr 7fr; } .praxis-bereich.praxis-bereich--kapitel-mint { grid-template-columns: 7fr 5fr; } .praxis-bereich.praxis-bereich--gesehen { grid-template-columns: .9fr 1.1fr; } } /* Fragen auf Unterseiten wie „Häufige Fragen“ auf der Startseite (.praxis-fragen): je #### Frage + genau ein Absatz Antwort, paarweise in zwei Spalten – ungerade Fragen links, gerade rechts, „dense“ füllt die Zeilen nebeneinander auf */ .praxis-bereich.praxis-bereich--fragen { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; column-gap: 4.5rem; row-gap: 0; } .praxis-bereich--fragen > h2 { grid-column: 1 / -1; margin-bottom: 3rem !important; } .praxis-bereich--fragen > h3 { line-height: 1.25; color: var(--p-blau); margin: 3rem 0 .625rem !important; } .praxis-bereich--fragen > h3:nth-of-type(-n+2) { margin-top: 0 !important; } .praxis-bereich--fragen > h3:nth-of-type(odd), .praxis-bereich--fragen > p:nth-of-type(odd) { grid-column: 1; } .praxis-bereich--fragen > h3:nth-of-type(even), .praxis-bereich--fragen > p:nth-of-type(even) { grid-column: 2; } .praxis-bereich--fragen > p { color: var(--p-text-leise); } @media (max-width: 900px) { .praxis-bereich.praxis-bereich--fragen { grid-template-columns: minmax(0, 1fr); } .praxis-bereich--fragen > * { grid-column: 1 !important; } .praxis-bereich--fragen > h3:nth-of-type(2) { margin-top: 2.25rem !important; } } /* Auftakt: H1 mit Unterzeile, Einleitung, Sprunglinks, Zahlen; Porträt rechts */ .praxis-seite:has(.praxis-bereich--auftakt) .praxis-seitenkopf { display: none; } .praxis-bereich--auftakt { align-items: end !important; } .praxis-bereich--auftakt > .praxis-bereich__spalte:first-child { gap: 1.75rem; padding-bottom: 1rem; } .praxis-auftakt__titel { font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-4xl); line-height: 1; letter-spacing: -.03em; color: var(--p-blau); margin: 0; } .praxis-auftakt__unterzeile { display: block; margin-top: .9rem; font-family: var(--p-schrift-karte); font-weight: 500; font-size: .42em; line-height: 1.25; letter-spacing: 0; color: var(--p-text-leise); } .praxis-bereich--auftakt .praxis-auftakt__titel + p, .praxis-bereich--auftakt h1 ~ p:not(.praxis-dachzeile) { font-size: var(--p-fs-md); line-height: 1.6; color: var(--p-text-leise); max-width: 30em; } .praxis-sprunglinks { display: flex; flex-wrap: wrap; gap: .5rem; } .praxis-sprunglinks a { font-size: var(--p-fs-xs); color: var(--p-blau) !important; text-decoration: none !important; border: 1px solid var(--p-linie); border-radius: var(--p-pille); padding: .35rem .9rem; } .praxis-sprunglinks a:hover { background: var(--p-blau-hell); } .praxis-bereich--auftakt ul { list-style: none; padding: 1.5rem 0 0 !important; border-top: 1px solid var(--p-linie); display: grid; grid-template-columns: repeat(4, auto); gap: .5rem 2rem; } .praxis-bereich--auftakt ul li { margin: 0 !important; font-size: .9375rem; line-height: 1.4; color: var(--p-text-leise); } .praxis-bereich--auftakt ul li strong { display: block; margin-bottom: .2rem; font-family: var(--p-schrift-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--p-blau); } .praxis-bereich--auftakt .praxis-b-bild { max-width: none; } .praxis-bereich--auftakt .praxis-b-bild img { aspect-ratio: 4 / 5; } @media (min-width: 901px) { .praxis-bereich--auftakt .praxis-b-bild img { aspect-ratio: 1 / 1; max-height: calc(100svh - 12rem); } } /* Foto nicht höher als der Bildschirm: bei 4:5 stand über dem Titel eine große Leerfläche (Valentin, 07.11.2026) */ html:has(.praxis-sprunglinks, .praxis-kapitelliste) { scroll-padding-top: calc(6rem + var(--p-leiste, 0px)); } @media (max-width: 900px) { .praxis-bereich--auftakt .praxis-bereich__spalte:last-child:has(.praxis-b-bild) { order: -1; margin: 0 calc(-1 * var(--p-rand)) !important; } /* Foto nach oben */ .praxis-bereich--auftakt .praxis-b-bild img { aspect-ratio: 4 / 3.4; } .praxis-bereich--auftakt ul { grid-template-columns: 1fr 1fr; } } /* Über mich und Ablauf & Kosten, Auftakt: Überschrift und Einleitung links (breiter als sonst), rechts die Kapitel der Seite als Sprungliste – kein Foto, keine Postkarte */ .praxis-bereich--auftakt:has(.praxis-kapitelliste) { align-items: start !important; } /* Liste oben bündig mit der Unterzeile (Abstand unten bei 901 px+), auf allen Seiten gleich – egal wie lang Einleitung und Liste sind */ .praxis-bereich--auftakt:has(.praxis-kapitelliste) h1 ~ p:not(.praxis-dachzeile) { max-width: 36em; } .praxis-kapitelliste ol { list-style: none; margin: 0 !important; padding: 0 !important; } .praxis-kapitelliste li { margin: 0 !important; padding: 0; border-top: 1px solid var(--p-linie); } .praxis-kapitelliste li:last-child { border-bottom: 1px solid var(--p-linie); } .praxis-kapitelliste a { display: flex; align-items: baseline; gap: 1rem; padding: .9rem 0; color: var(--p-blau) !important; text-decoration: none !important; font-family: var(--p-schrift-display); font-weight: 700; font-size: var(--p-fs-md); line-height: 1.2; } .praxis-kapitelliste a span { flex: 0 0 1.25rem; font-family: var(--p-schrift-karte); font-weight: 500; font-size: var(--p-fs-sm); color: var(--p-grau); } .praxis-kapitelliste a:hover { color: var(--p-blau) !important; text-decoration: underline; text-underline-offset: .15em; } @media (min-width: 901px) { .praxis-bereich.praxis-bereich--auftakt:has(.praxis-kapitelliste) { grid-template-columns: 1.45fr 1fr; column-gap: 5rem; } .praxis-bereich--auftakt:has(.praxis-kapitelliste) > .praxis-bereich__spalte { padding-bottom: 0; } /* kein Polster wie bei Foto rechts: Abstand zu Kapitel 1 exakt das Abschnittsmaß */ .praxis-bereich--auftakt .praxis-kapitelliste { margin-top: calc(var(--p-fs-4xl) + .9rem) !important; } /* gegen .praxis-bereich__spalte > *; eine H1-Zeile + Abstand der Unterzeile: an der H1-Oberkante hing die Linie über den Buchstaben (Valentin, 27.10.2026) */ } @media (max-width: 900px) { .praxis-kapitelliste { margin-top: .5rem; } } /* (bis 27.10.2026: rechts die blaue Postkarte) */ .praxis-bereich--auftakt:has(.praxis-b-postkarte) { align-items: center !important; } .praxis-bereich--auftakt .praxis-b-postkarte { display: flex; justify-content: flex-end; } .praxis-bereich--auftakt .praxis-b-postkarte .praxis-postkarte { width: min(20rem, 100%); } @media (max-width: 900px) { .praxis-bereich--auftakt .praxis-b-postkarte { justify-content: flex-start; } .praxis-bereich--auftakt .praxis-b-postkarte .praxis-postkarte { width: min(20rem, 100%); } /* schmaler, und die Briefmarke deckt den Text */ } /* Über mich, drei Kapitel: Foto und Text im Wechsel, Foto läuft mit; zweites Kapitel auf Mint, Foto rechts */ .praxis-inhalt { counter-reset: kapitel; } .praxis-bereich:is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) { align-items: start; } .praxis-bereich--kapitel-mint, .praxis-bereich--anliegen { background: var(--p-mint-bg); } :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte:has(.praxis-b-bild) { position: sticky; top: 7.5rem; } :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) .praxis-b-bild img { aspect-ratio: 4 / 5; } :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte:has(h2)::before { counter-increment: kapitel; content: counter(kapitel); font-family: var(--p-schrift-karte); font-size: var(--p-fs-md); line-height: 1; color: var(--p-grau); margin-bottom: -.75rem; } /* Nummer dicht über der H2: stand sonst allein am unteren Bildschirmrand (Valentin, 07.11.2026) */ .praxis-bereich--kapitel h3 { margin-top: 1rem !important; } :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte:not(:has(.praxis-b-bild)) { max-width: 40rem; } @media (min-width: 901px) { :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte:has(.praxis-b-bild) { margin-top: 1.75rem !important; } } /* Foto beginnt auf Höhe der Überschrift, nicht der Kapitelnummer */ @media (min-width: 901px) { :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte:not(:has(h2, .praxis-b-bild)) { margin-top: 1.75rem !important; } } /* zweite Spalte ohne eigene Nummer (Zitat, Postkarte, Unterabschnitt): beginnt auf Höhe der H2 */ .praxis-bereich__spalte > .praxis-b-zwischenruf { background: var(--p-weiss); } /* Leistungsseiten: Störer in der Mint-Fläche als weiße Karte */ .praxis-bereich--ablauf > .praxis-bereich__spalte:last-child:has(h2) { padding-top: 0 !important; } /* rechte Spalte mit eigener H2 (Kosten auf Leistungsseiten) hat ihre Nummer selbst, kein Versatz */ .praxis-bereich--kapitel > .praxis-bereich__spalte:has(h2) ul { list-style: none; padding: 0 !important; margin: .25rem 0 !important; display: flex; flex-wrap: wrap; gap: .5rem; } .praxis-bereich--kapitel > .praxis-bereich__spalte:has(h2) ul li { margin: 0 !important; padding: .5rem 1rem; border-radius: var(--p-pille); background: var(--p-blau-hell); color: var(--p-blau); font-size: var(--p-fs-sm); } .praxis-bereich--kapitel > .praxis-bereich__spalte:has(h2) ul li:nth-child(even) { background: var(--p-mint-hell); color: var(--p-text); } .praxis-bereich--kapitel > .praxis-bereich__spalte:not(:has(h2)) ul { display: flex; flex-direction: column; gap: .6rem; padding-left: 1.25rem !important; } /* Liste ohne eigene Überschrift (Tipps auf Online): normale Aufzählung statt Chips */ .praxis-bereich--kapitel-mint .wp-block-quote { margin: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; transform: none !important; text-align: left; } .praxis-bereich--kapitel-mint .wp-block-quote p { font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; line-height: 1.1 !important; } .praxis-bereich--kapitel-mint .wp-block-quote p::before { content: "„"; } .praxis-bereich--kapitel-mint .wp-block-quote p::after { content: "“"; } .praxis-bereich--kapitel-mint .praxis-unterschrift { margin-top: .75rem !important; } /* Leistungsseiten: nur die Hauptkapitel tragen eine H2 (Nummer, Kapitelliste); Bereiche dazwischen beginnen mit einer H3 und gehören zum Kapitel davor (Valentin, 08.11.2026) */ .praxis-bereich:is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint):not(:has(h2)) > .praxis-bereich__spalte { margin-top: 0 !important; } .praxis-bereich:is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint):not(:has(h2)) > :is(.praxis-bereich__spalte:first-child, .praxis-bereich__spalte:has(> .praxis-b-bild) + .praxis-bereich__spalte) > h3:first-child, .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > h3:first-child { font-size: var(--p-fs-2xl) !important; line-height: 1.15; } /* gleiche Schrift wie die übrigen H3, nur größer (vorher fett serifenlos: wirkte neben den Serif-H3 unruhig, Valentin 08.11.2026) */ /* Illustration im Kapitel: kleiner, Zitat-Karte überlappt ihren Fuß – die Bildspalte wird nicht länger als der Text */ :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte:has(> .praxis-illu) { align-items: center; } :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte > .praxis-illu { width: min(100%, 26rem); } :is(.praxis-bereich--kapitel > .praxis-bereich__spalte > .praxis-illu + .wp-block-quote, .praxis-bereich__spalte > .praxis-illu + .praxis-b-postkarte) { position: relative; margin-top: -2.5rem !important; width: min(100%, 22rem); } .praxis-bereich--kapitel > .praxis-bereich__spalte > .praxis-illu + .wp-block-quote { padding: 1.5rem 1.75rem; } :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte > .praxis-illu + .praxis-b-postkarte .praxis-postkarte { width: 100%; } :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte:has(> .praxis-illu) > .praxis-b-zwischenruf { align-self: stretch; } /* Anliegen (Leistungsseiten, Mockup 04_design/spielwiese/therapieseiten-gruende, Variante B, Valentin 08.11.2026): wie „Womit Menschen zu mir kommen“ auf der Startseite. Überschrift und Liste als Chips über die ganze Breite, darunter Hinweise in zwei Spalten ([praxis_spalten]). art="anliegen" auf Mint, art="anliegen-hell" auf Weiß. */ .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > :is(p, h3, .praxis-b-zwischenruf) { max-width: 46rem; } .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > h3 { margin-top: .75rem !important; } .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 !important; margin: .25rem 0 !important; } .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > ul li { margin: 0 !important; padding: .5rem 1rem; border-radius: var(--p-pille); background: var(--p-blau-hell); color: var(--p-blau); font-size: var(--p-fs-sm); line-height: 1.35; } .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > ul li:nth-child(even) { background: var(--p-mint-hell); color: var(--p-text); } .praxis-bereich--anliegen > ul li:nth-child(even) { background: var(--p-weiss); } /* Mint-Chip auf Mint-Fläche verschwimmt */ .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > ul li::first-letter { text-transform: uppercase; } .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > ul li a { color: inherit !important; } .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > .praxis-bereich__spalten { grid-template-columns: 1fr 1fr; gap: 1.5rem 4rem; margin-top: 1rem !important; } .praxis-bereich--anliegen .praxis-b-zwischenruf { background: var(--p-weiss); } .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell):has(> h2)::before { counter-increment: kapitel; content: counter(kapitel); font-family: var(--p-schrift-karte); font-size: var(--p-fs-md); line-height: 1; color: var(--p-grau); margin-bottom: -.5rem; } @media (max-width: 900px) { .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > .praxis-bereich__spalten { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .praxis-bereich:is(.praxis-bereich--anliegen, .praxis-bereich--anliegen-hell) > ul li { padding: .45rem .75rem; font-size: var(--p-fs-xs); } } /* Linkliste (z. B. „Weiterlesen im Ratgeber“): Listenpunkt = Link, darunter eingerückt eine Zeile Erklärung (Markdown: zweite Zeile mit zwei Leerzeichen) */ .praxis-inhalt ul:has(> li > a:first-child + br) { list-style: none; padding: 0 !important; margin: 0 !important; border-top: 1px solid var(--p-linie); } .praxis-inhalt ul:has(> li > a:first-child + br) > li { margin: 0 !important; padding: .9rem 0; border-bottom: 1px solid var(--p-linie); font-size: var(--p-fs-sm); line-height: 1.4; color: var(--p-text-leise); } .praxis-inhalt ul:has(> li > a:first-child + br) > li::before { display: none; } .praxis-inhalt ul:has(> li > a:first-child + br) > li > a:first-child { display: inline-block; margin-bottom: .2rem; font-size: var(--p-fs-base); font-weight: 600; text-decoration: none; color: var(--p-blau); } .praxis-inhalt ul:has(> li > a:first-child + br) > li > a:first-child::after { content: " →"; color: var(--p-orange); } .praxis-inhalt > .praxis-bereich--kapitel:has(.praxis-zeitstrahl) { margin-bottom: var(--p-abschnitt) !important; } /* Abstand zum Kontaktbereich (Ränder fallen zusammen) */ :is(.praxis-b-praxen, #praxen) { margin-top: var(--p-abschnitt) !important; } /* Praxis-Karten nach einem Kapitel (Über mich): Abstand wie zwischen den Kapiteln */ :is(.praxis-b-praxen, #praxen) > .praxis-h2 { font-size: var(--p-fs-3xl); } /* Leistungsseiten: Praxen-H2 zwischen den Kapiteln so groß wie deren H2 (sonst greift .praxis-inhalt h2) */ /* Handy: Praxen als kompakte Liste statt großer Karten, überall wo der Praxen-Block steht (Mockup 04_design/spielwiese/praxen-handy-varianten.html, Variante B, Valentin 08.11.2026). Eine Zeile je Ort: kleines Foto, Name, Sterne, Adresse, Anbindung; die ganze Zeile führt zur Praxis- bzw. Online-Seite. Gilt auch für Startseite (#praxen) und Kontakt. */ @media (max-width: 600px) { :is(.praxis-b-praxen, #praxen) .praxis-praxen { gap: .75rem; } :is(.praxis-b-praxen, #praxen) :is(.praxis-praxis, .praxis-online) { position: relative; display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: .875rem; align-items: center; padding: .875rem 2.25rem .875rem .875rem; } :is(.praxis-b-praxen, #praxen) :is(.praxis-praxis, .praxis-online)::after { content: "›"; position: absolute; right: .875rem; top: 50%; transform: translateY(-55%); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--p-orange); pointer-events: none; } :is(.praxis-b-praxen, #praxen) .praxis-praxis__medien { width: 4.75rem; height: 4.75rem; border-radius: .625rem; } :is(.praxis-b-praxen, #praxen) .praxis-praxis__medien img { width: 100%; height: 100%; transform: none !important; } :is(.praxis-b-praxen, #praxen) .praxis-praxis__text { padding: 0; gap: .3rem; } :is(.praxis-b-praxen, #praxen) .praxis-praxis__titel { font-size: 1.1875rem !important; line-height: 1.15; } :is(.praxis-b-praxen, #praxen) .praxis-praxis__titel a::after { content: ""; position: absolute; inset: 0; border-radius: var(--p-ecke); } /* ganze Zeile klickbar */ :is(.praxis-b-praxen, #praxen) .praxis-google { position: relative; z-index: 1; margin-top: 0 !important; padding: .3rem .625rem .3rem .5rem; font-size: .8125rem; } /* bleibt eigener Link über der Zeile */ :is(.praxis-b-praxen, #praxen) .praxis-praxis__text > p { font-size: .9375rem; line-height: 1.35; } :is(.praxis-b-praxen, #praxen) :is(.praxis-google__anzahl, .praxis-google__pfeil) { display: none; } /* nur „★★★★★ 4,9 von 5“: passt neben das Foto */ @media (max-width: 360px) { :is(.praxis-b-praxen, #praxen) .praxis-google__von { display: none; } } /* 320 px: sonst unter dem Pfeil der Zeile – „★★★★★ 4,9“ */ :is(.praxis-b-praxen, #praxen) .praxis-angaben { font-size: .875rem; line-height: 1.35; gap: 0; padding-left: 0 !important; } :is(.praxis-b-praxen, #praxen) .praxis-angaben li { min-width: 0; } :is(.praxis-b-praxen, #praxen) .praxis-angaben li span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Anbindung einzeilig, ganz auf der Praxis-Seite */ :is(.praxis-b-praxen, #praxen) .praxis-angaben li:not(:first-child), :is(.praxis-b-praxen, #praxen) .praxis-praxis .praxis-buttons { display: none; } /* Zeiten, Sprachen, Barrierefreiheit, Maps: auf der Praxis-Seite */ :is(.praxis-b-praxen, #praxen) .praxis-online { margin-top: .75rem; } :is(.praxis-b-praxen, #praxen) .praxis-online::before { content: ""; width: 4.75rem; height: 4.75rem; border-radius: .625rem; background: var(--p-mint-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='m16 10 5-3v10l-5-3'/%3E%3C/svg%3E") center / 1.875rem no-repeat; } :is(.praxis-b-praxen, #praxen) .praxis-online p { font-size: .875rem; line-height: 1.35; } :is(.praxis-b-praxen, #praxen) .praxis-online .praxis-button { position: absolute; inset: 0; z-index: 0; padding: 0; border-radius: var(--p-ecke); background: transparent; box-shadow: none; color: transparent; font-size: 0; } /* Button wird zur klickbaren Zeile, Name bleibt für Screenreader */ :is(.praxis-b-praxen, #praxen) .praxis-online .praxis-button::after { display: none; } } .praxis-b-praxen > .praxis-h3 { margin-bottom: 1.25rem; } /* leise Zwischenüberschrift (ueberschrift="klein") wie „Aus dem Ratgeber“ */ @media (max-width: 900px) { :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) > .praxis-bereich__spalte:has(.praxis-b-bild) { position: static; order: -1; } :is(.praxis-bereich--kapitel, .praxis-bereich--kapitel-mint) .praxis-b-bild img { aspect-ratio: 4 / 3; } } /* Ausbildungen als zweispaltige Liste */ .praxis-b-ausbildungen { list-style: none; padding: 0 !important; margin: .75rem 0 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; } .praxis-b-ausbildungen li { margin: 0 !important; padding: .9rem 0; border-bottom: 1px solid var(--p-linie); display: flex; flex-direction: column; } .praxis-b-ausbildungen small { font-size: var(--p-fs-xs); color: var(--p-grau); } @media (max-width: 700px) { .praxis-b-ausbildungen { grid-template-columns: 1fr; } } /* Werdegang: Zeitstrahl nach Jahren, untereinander – Jahr links, Einträge rechts */ .praxis-zeitstrahl { position: relative; list-style: none; padding: 0 0 0 1.75rem !important; margin: .75rem 0 1rem !important; max-width: 46rem; } .praxis-zeitstrahl::before { content: ""; position: absolute; left: 6px; top: .5rem; bottom: .5rem; width: 2px; background: var(--p-blau); } .praxis-zeitstrahl li { position: relative; margin: 0 !important; padding: 0 0 1.75rem; display: grid; grid-template-columns: 5rem 1fr; gap: 0 1rem; } .praxis-zeitstrahl li:last-child { padding-bottom: 0; } .praxis-zeitstrahl__jahr { grid-row: 1 / span 4; font-family: var(--p-schrift-karte); font-weight: 500; font-size: 1.5rem; line-height: 1.1; color: var(--p-blau); } .praxis-zeitstrahl__punkt { position: absolute; left: -1.75rem; top: .45rem; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--p-weiss); border: 3px solid var(--p-blau); } .praxis-zeitstrahl__punkt--aktuell { background: var(--p-orange); border-color: var(--p-orange); } .praxis-zeitstrahl p { grid-column: 2; margin: 0 0 .6rem !important; font-size: var(--p-fs-sm); line-height: 1.4; } .praxis-zeitstrahl p:last-child { margin-bottom: 0 !important; } .praxis-zeitstrahl strong { display: block; font-weight: 600; color: var(--p-text); } .praxis-zeitstrahl small { display: block; margin-top: .15rem; font-size: var(--p-fs-sm); color: var(--p-grau); } .praxis-zeitstrahl__art { display: inline-block; margin-left: .5rem; padding: .15rem .55rem; border-radius: var(--p-pille); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: .15em; background: var(--p-blau-hell); color: var(--p-blau); } .praxis-zeitstrahl__art--erfahrung { background: var(--p-mint-hell); color: #2A6249; } /* dunkles Mint nur für diese Marke, 6:1 auf Mint hell */ .praxis-zeitstrahl:has(+ .praxis-zeitstrahl__fussnote) { margin-bottom: 0 !important; } .praxis-zeitstrahl__fussnote { margin: 0 !important; padding-top: 1rem; border-top: 1px solid var(--p-linie); font-size: var(--p-fs-sm); color: var(--p-grau); } /* Studium und Yoga im Kleingedruckten */ @media (max-width: 600px) { .praxis-zeitstrahl li { grid-template-columns: 4rem 1fr; gap: 0 .75rem; } .praxis-zeitstrahl__jahr { font-size: 1.3rem; } } /* Gesehen werden: links Text, rechts die Beispielsätze als Notizzettel */ .praxis-bereich--gesehen > .praxis-bereich__spalte:last-child { gap: 1.5rem; padding-top: .75rem; } .praxis-bereich--gesehen > .praxis-bereich__spalte:last-child > p { margin: 0 0 -.5rem !important; font-size: var(--p-fs-xs) !important; line-height: 1.4; letter-spacing: .02em; color: var(--p-text-leise) !important; } /* Beschriftung über den Zetteln, 1 rem bis zum ersten */ .praxis-bereich--gesehen ul { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 1.25rem; } .praxis-bereich--gesehen ul li { margin: 0 !important; padding: 1.1rem 1.4rem; background: var(--p-weiss); box-shadow: 0 10px 26px rgba(14, 26, 46, .12); font-family: var(--p-schrift-karte); font-weight: 500; font-size: var(--p-fs-base); line-height: 1.35; color: var(--p-blau) !important; transform: rotate(-1.5deg); } .praxis-bereich--gesehen ul li:nth-child(2) { transform: rotate(1deg); margin-left: 2rem !important; } .praxis-bereich--gesehen ul li:nth-child(3) { transform: rotate(-.6deg); margin-left: 1rem !important; } @media (max-width: 900px) { .praxis-bereich--gesehen > .praxis-bereich__spalte:last-child { padding-top: 0; } .praxis-bereich--gesehen ul li:nth-child(n) { margin-left: 0 !important; } } /* Erste Stunde: gehört zum Mint-Band „So arbeite ich“ (Gesehen werden darüber), vier Schritte nebeneinander */ .praxis-bereich--gesehen, .praxis-bereich--stunde { background: var(--p-mint-bg); } .praxis-inhalt > .praxis-bereich--gesehen + .praxis-bereich--stunde { margin-top: 0 !important; padding-top: 0; } .praxis-bereich--stunde h3 { font-size: var(--p-fs-xl) !important; } .praxis-bereich--stunde ol { list-style: none; counter-reset: schritt; padding: 0 !important; margin-top: 1.25rem !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .praxis-bereich--stunde ol li { counter-increment: schritt; margin: 0 !important; padding-top: 1.25rem; border-top: 2px solid var(--p-blau); font-size: var(--p-fs-sm); display: flex; flex-direction: column; gap: .5rem; } .praxis-bereich--stunde ol li::before { content: counter(schritt); font-family: var(--p-schrift-display); font-weight: 700; font-size: 2.75rem; line-height: 1; color: var(--p-blau); } .praxis-bereich--stunde ol li strong { font-family: var(--p-schrift-display); font-size: 1.15rem; line-height: 1.2; color: var(--p-blau); } @media (max-width: 900px) { .praxis-bereich--stunde ol { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .praxis-bereich--stunde ol { grid-template-columns: 1fr; } } /* Button unter den Schritten: 2,5 rem Abstand, damit er kein fünfter Schritt ist */ /* Button und Kosten-Link in einer Reihe, mobil untereinander */ .praxis-bereich--stunde:has(> .praxis-b-knopf) { flex-flow: row wrap; align-items: center; column-gap: 1.5rem; } .praxis-bereich--stunde:has(> .praxis-b-knopf) > :not(.praxis-b-knopf, .praxis-b-knopf ~ p) { flex: 0 0 100%; } .praxis-bereich--stunde > .praxis-b-knopf, .praxis-bereich--stunde > .praxis-b-knopf ~ p { margin-top: 1.25rem !important; margin-bottom: 0 !important; } .praxis-bereich--stunde > .praxis-b-knopf ~ p { font-size: var(--p-fs-sm); } @media (max-width: 560px) { .praxis-bereich--stunde > .praxis-b-knopf ~ p { flex: 0 0 100%; margin-top: 0 !important; } } /* Drei Rückmeldungen als Postkarten nebeneinander, die mittlere versetzt */ .praxis-bereich.praxis-bereich--rueckmeldungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2rem; align-items: start; } .praxis-bereich--rueckmeldungen > :not(.wp-block-quote) { grid-column: 1 / -1; max-width: 40rem; } .praxis-bereich--rueckmeldungen .wp-block-quote { max-width: none !important; margin: 1.75rem 0 0 !important; text-align: left; } .praxis-bereich--rueckmeldungen .wp-block-quote:nth-of-type(2) { transform: rotate(.8deg); margin-top: 4.25rem !important; } .praxis-bereich--rueckmeldungen .wp-block-quote p { font-size: var(--p-fs-lg) !important; line-height: 1.45 !important; } @media (max-width: 900px) { .praxis-bereich.praxis-bereich--rueckmeldungen { grid-template-columns: minmax(0, 1fr); } .praxis-bereich--rueckmeldungen .wp-block-quote:nth-of-type(2) { margin-top: 1.75rem !important; } } /* Was ich nicht verspreche: direkt unter den Rückmeldungen, mit Linie */ .praxis-bereich--rueckmeldungen > h3 { margin-top: 2.5rem !important; padding-top: 2rem; border-top: 1px solid var(--p-linie); } /* Hinweis zu den Rückmeldungen: kleiner grauer Kasten */ .praxis-inhalt > .praxis-bereich--hinweis { margin-top: 2rem !important; display: block; padding: 1.25rem 1.5rem; background: #F6F7F9; } .praxis-bereich--hinweis h3, .praxis-bereich--hinweis p { display: inline; font-size: var(--p-fs-xs) !important; line-height: 1.6; color: var(--p-grau) !important; } .praxis-bereich--hinweis h3 { font-family: var(--wp--preset--font-family--text) !important; font-weight: 600; color: var(--p-text) !important; } .praxis-bereich--hinweis h3::after { content: ": "; } .praxis-inhalt > .praxis-bereich--hinweis + p { margin-top: 2rem !important; } /* Spaltengruppe innerhalb eines Bereichs ([praxis_spalten]) */ .praxis-bereich__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } /* Ablauf & Kosten: Zahlen-Karte im Auftakt */ /* Ablauf und Honorar: Mintfläche wie #kosten auf der Startseite, links H2 und Schritte, rechts die weiße Honorar-Karte mit Button */ .praxis-bereich--ablauf { background: var(--p-mint-bg); } .praxis-bereich.praxis-bereich--ablauf { grid-template-columns: 1fr 1fr; gap: 4rem; } .praxis-bereich--ablauf .praxis-schritte { margin-top: .75rem !important; } /* Kapitelnummern wie bei Über mich, sobald die Seite eine Kapitelliste im Auftakt hat (Ablauf & Kosten, Erfahrungen) */ .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--ablauf > .praxis-bereich__spalte:has(h2)::before, .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--gesehen > .praxis-bereich__spalte:has(h2)::before, .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--rueckmeldungen::before, .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--angebote::before, .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--fragen::before { counter-increment: kapitel; content: counter(kapitel); font-family: var(--p-schrift-karte); font-size: var(--p-fs-md); line-height: 1; color: var(--p-grau); } .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) :is(.praxis-bereich--ablauf, .praxis-bereich--gesehen) > .praxis-bereich__spalte:has(h2)::before { margin-bottom: -.75rem; } /* wie bei den Kapiteln: Nummer dicht über der H2 */ .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--fragen::before { grid-column: 1 / -1; margin-bottom: 1.25rem; } .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--rueckmeldungen::before { grid-column: 1 / -1; } /* die Honorar-Karte beginnt auf Höhe der H2, nicht der Kapitelnummer darüber (Nummer + Spaltenabstand) */ .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--ablauf > .praxis-bereich__spalte:last-child { padding-top: calc(var(--p-fs-md) + .5rem); } @media (max-width: 900px) { .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--ablauf > .praxis-bereich__spalte:last-child { padding-top: 0; } } /* steht der Kontaktbereich in der Kapitelliste (dazu="…|#anfrage"), bekommt auch er seine Nummer */ .praxis-inhalt:has(.praxis-kapitelliste a[href="#anfrage"]) .praxis-kontaktbereich > .praxis-stapel::before { counter-increment: kapitel; content: counter(kapitel); font-family: var(--p-schrift-karte); font-size: var(--p-fs-md); line-height: 1; color: var(--p-grau); margin-bottom: -.75rem; } .praxis-inhalt:has(.praxis-kapitelliste, .praxis-bereich--kapitel) .praxis-bereich--fragen > h2 { font-size: var(--p-fs-3xl) !important; line-height: 1.05; letter-spacing: -.015em; } /* so groß wie das Kapitel davor */ .praxis-bereich--ablauf .praxis-schritte p { color: var(--p-text-leise); } .praxis-preise .praxis-h3 { font-family: var(--p-schrift-display); font-weight: 700; margin-top: 0; } .praxis-preise .praxis-b-knopf .praxis-button { box-sizing: border-box; width: 100%; } /* wie der Button in der Kontakt-Karte */ @media (max-width: 900px) { .praxis-bereich.praxis-bereich--ablauf { grid-template-columns: minmax(0, 1fr); gap: 2rem; } } .praxis-inhalt > .praxis-bereich--fragen + p { box-sizing: border-box; max-width: calc(var(--p-breite) - 2 * var(--p-rand)) !important; margin: 3rem auto 0 !important; color: var(--p-text-leise); } /* bündig mit dem Fragenblock */ .praxis-inhalt > .praxis-bereich--fragen ~ .praxis-kontaktbereich { margin-top: var(--p-abschnitt) !important; } /* sonst klebt das Formular am Fragenblock */ /* Zwischenaufruf in einem Bereich: Abstand zum Text davor */ .praxis-bereich > .praxis-b-zwischenruf { margin-top: 1.25rem !important; } .praxis-b-knopf { margin: 0; } .praxis-bereich > .praxis-b-knopf { align-self: flex-start; } .praxis-bereich__spalte > .praxis-b-knopf .praxis-button { box-sizing: border-box; width: 100%; justify-content: center; padding-left: 1rem; padding-right: 1rem; } /* in schmalen Karten volle Breite, sonst bricht der Text um */ /* Rechtstexte (Seitentyp „recht“: Impressum, Datenschutz, AGB): viele kurze Abschnitte – kleinere Überschriften, dichter gesetzt */ .praxis-typ-recht .praxis-inhalt { font-size: var(--p-fs-sm); line-height: 1.6; } .praxis-typ-recht .praxis-inhalt > * { margin-block-start: 1rem; } .praxis-typ-recht .praxis-inhalt > p:first-child { font-size: inherit; line-height: inherit; } .praxis-typ-recht .praxis-inhalt h2 { font-size: var(--p-fs-xl); line-height: 1.2; margin-top: 2.75rem; } .praxis-typ-recht .praxis-inhalt h3 { font-size: var(--p-fs-md); margin-top: 1.75rem; } .praxis-typ-recht .praxis-inhalt > :is(h2, h3) + * { margin-top: .5rem !important; } .praxis-typ-recht .praxis-inhalt > h2 + .praxis-b-praxen { margin-top: 1.25rem !important; } /* Praxis-Karten (Impressum): Bild klebt sonst an der Überschrift; oben bleibt der H2-Abstand wie überall */ .praxis-typ-recht .praxis-inhalt ul:not(.praxis-chips):not(.praxis-tags):not(.praxis-kontaktliste) li { margin: .2rem 0; } /* Einträge mit Folgezeile (z. B. Anlaufstellen: Name – Telefon, darunter ein Satz): mehr Luft zwischen den Einträgen */ .praxis-inhalt ul:not(.praxis-chips):not(.praxis-tags):not(.praxis-kontaktliste):has(> li > br) > li { margin: 0 0 1.1rem; } .praxis-inhalt a[href^="tel:"] { white-space: nowrap; } /* Kapitelliste im Fließtext (Rechtstexte, Anlaufstellen) und unter der H1 der Ratgeber statt rechts im Auftakt: kleiner, ab Tablet zweispaltig */ .praxis-inhalt > .praxis-kapitelliste { margin-top: 0; margin-bottom: 1rem; } .praxis-inhalt > * + .praxis-kapitelliste { margin-top: 2rem; } /* nach einer Einleitung (Datenschutz, Anlaufstellen) derselbe Abstand wie im Ratgeber unter dem Datum */ .praxis-inhalt > .praxis-kapitelliste a, .praxis-artikel .praxis-seitenkopf > .praxis-kapitelliste a { font-family: var(--p-schrift-karte); font-weight: 500; font-size: var(--p-fs-sm); line-height: 1.35; padding: .55rem 0; } /* Einträge oft zweizeilig */ @media (min-width: 700px) { .praxis-inhalt > .praxis-kapitelliste ol, .praxis-artikel .praxis-seitenkopf > .praxis-kapitelliste ol { columns: 2; column-gap: 2.5rem; } .praxis-inhalt > .praxis-kapitelliste li, .praxis-artikel .praxis-seitenkopf > .praxis-kapitelliste li { break-inside: avoid; border-bottom: 1px solid var(--p-linie); border-top: 0; } } /* Fragen eingeklappt bis 900px (praxis.js setzt .praxis-frage / .praxis-antwort): Frage als Knopf mit Pfeil, Linie zwischen den Fragen. Am Dateiende und mit h3 ~ …, damit die Abstandsregeln der Inhaltsbereiche (.praxis-inhalt > h3 + *) nicht gewinnen. */ .praxis-fragen:has(.praxis-frage) { gap: 0; } :is(.praxis-inhalt, .praxis-bereich, .praxis-fragen) h3.praxis-frage { margin: 0 !important; border-top: 1px solid var(--p-linie); } .praxis-frage button { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; width: 100%; padding: 1rem 0; cursor: pointer; } .praxis-frage button::after { content: ""; flex: none; width: .6rem; height: .6rem; margin: .35em .25rem 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .praxis-frage button[aria-expanded="true"]::after { transform: translateY(.2em) rotate(-135deg); } .praxis-frage button:focus-visible { outline: 3px solid var(--p-blau); outline-offset: 3px; border-radius: 4px; } h3.praxis-frage ~ .praxis-antwort { margin: 0 0 1rem !important; } h3.praxis-frage ~ .praxis-antwort + .praxis-antwort { margin-top: -.25rem !important; } h3.praxis-frage ~ .praxis-antwort[hidden] { margin: 0 !important; padding-block: 0; } /* hidden="until-found" behält die Box */ .praxis-bereich--fragen > h2 + h3.praxis-frage, .praxis-inhalt > h2 + h3.praxis-frage { margin-top: 1rem !important; } /* Handy (bis 600 px): Schriften eine Stufe kleiner, Abstände und Innenabstände knapper. Am Dateiende, damit es die Einzelregeln oben übersteuert; html:root schlägt die Variablen aus theme.json. */ @media (max-width: 600px) { html:root { --wp--preset--font-size--medium: 1.0625rem; /* Fließtext 17 statt 18 px */ --wp--preset--font-size--x-large: 1.625rem; /* H2 aus dem Editor 26 statt 30 px */ --wp--preset--font-size--xx-large: 2.25rem; /* H1 36 statt 40 px */ --p-fs-base: 1.0625rem; --p-fs-md: 1.125rem; /* Einleitung, Kontaktbereich 18 statt 20 px */ --p-fs-2xl: 1.375rem; /* H2 im Text 22 statt 24 px */ --p-fs-3xl: 1.625rem; /* Abschnitts-H2 26 statt 30 px */ --p-fs-4xl: 2.25rem; /* Seitentitel 36 statt 40 px */ --p-fs-hero: 2.25rem; } .praxis-seitenkopf__titel--artikel { font-size: 2rem !important; } .praxis-kontaktbereich .praxis-kontaktbereich__titel { font-size: 1.875rem; } .praxis-formular-box__titel { font-size: 1.25rem; margin-bottom: 1rem; padding-bottom: .75rem; } .praxis-bereich--kapitel-mint .wp-block-quote p { font-size: 1.5rem !important; } .praxis-h2 { margin-bottom: 1.25rem; } .praxis-bereich--fragen > h2 { margin-bottom: 1.75rem !important; } .praxis-inhalt > h2 { margin-top: 2.5rem; } .praxis-b-bild, .praxis-b-postkarte, .praxis-b-chips, .praxis-hinweis, .praxis-b-schritte, .praxis-b-preise, .praxis-b-tags, .praxis-vorstellung, .praxis-b-praxis, .praxis-b-praxen, .praxis-galerie, .praxis-b-ratgeber, .praxis-b-anfrage, .praxis-kontakt, .praxis-inhalt .praxis-kontaktbereich { margin-top: 2.25rem !important; margin-bottom: 2.25rem !important; } .praxis-inhalt .wp-block-quote { margin: 2.5rem auto !important; padding: 1.75rem 1.5rem; } .praxis-b-postkarte .praxis-postkarte { padding: 1.75rem; } .praxis-b-schritte { padding: 1.5rem 1.25rem; } .praxis-online { padding: 1.25rem; } .praxis-ueber__brief { padding-top: 2.5rem; } .praxis-zwei { gap: 2rem; } .praxis-bereich:has(> .praxis-bereich__spalte) { gap: 2rem; } .praxis-kontaktbereich { gap: 1.5rem; } /* Mobil-Durchsicht 07.11.2026: Stellen, die auf dem Handy zu viel Höhe brauchten */ .praxis-inhalt .wp-block-quote { margin: 2rem auto !important; } .praxis-bereich.praxis-bereich--rueckmeldungen .wp-block-quote.wp-block-quote { margin: .5rem 0 0 !important; } /* Rückmeldungen: Abstand nur über den Gap, vorher 80–100 px zwischen den Karten */ .praxis-stimme p, .praxis-bereich--rueckmeldungen .wp-block-quote p { font-size: 1.0625rem !important; } /* lange Klientinnen-Zitate 17 statt 18 px */ .praxis-hero .praxis-button--hell { padding-block: .75rem; } /* zwei Nebenbuttons unter dem Haupt-CTA flacher, bleiben ≥ 44 px hoch */ /* Erste Stunde: Ziffer links neben dem Schritt statt darüber */ .praxis-bereich--stunde ol { gap: 1rem; } .praxis-bereich--stunde ol li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: .75rem; row-gap: .35rem; padding-top: 1rem; } .praxis-bereich--stunde ol li::before { grid-row: 1 / 3; font-size: 2rem; } /* Themenseiten im Ratgeber: Illustration als kleines Bild links statt 4:3 über die ganze Breite */ .praxis-rg-thema a:has(> .praxis-illu--karte:not(.praxis-illu--leer)) { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: .3rem; align-items: start; padding: 1rem 0; } .praxis-rg-thema a > .praxis-illu--karte { grid-row: 1 / 3; aspect-ratio: 1; margin: 0; align-items: center; } .praxis-rg-thema a > :not(.praxis-illu--karte) { grid-column: 2; } } /* Quellen unter einem Ratgeber: kleiner Abstand statt Abschnittsabstand (nach .praxis-inhalt > .praxis-bereich) */ .praxis-inhalt > .praxis-bereich--quellen { margin-top: 2.5rem !important; max-width: var(--wp--style--global--content-size) !important; } .praxis-404-links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 2rem 0 4rem; }