/**
 * site.css  --  Frauenpraxis Johann auf Gula 5
 *
 * Nur, was diese Site anders braucht als der Master. Ermittelt beim Umzug
 * von "johann" (gula-setup, 2022) auf gula5 am 20.10.2026, am gerenderten
 * Ergebnis gemessen, nicht aus der alten style.css abgeschrieben.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */


/*
 * SCHRIFT: Rajdhani, Serif Cochin (Dateien: webfonts/johann-webfonts/,
 * eingebunden in functions.php).
 */
:root {
	--font-family-sans:  "Rajdhani", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	--font-family-serif: "Cochin", "Times", "serif";
}


/*
 * GRUNDMASSE wie bisher (johann/library/grid/root.css):
 *   Schrift  14 bis 24 px (gula5 bis 20 px). Titel, Abstaende (--size-*)
 *            und Zeilenhoehen haengen daran.
 *   Zeile    1,4 x Schrift (gula5 1,6)
 *   Gewicht  Text 500 (gula5 300), Titel 600 (gula5 500)
 */
:root {
	--fontsize:    calc(14px + (24 - 14) * ((100vw - 300px) / (2000 - 300)));
	--lineheight:  calc( var( --fontsize ) * 1.4 );
	--bodyweight:  500;
	--titleweight: 600;
}


/*
 * FARBEN. Schrift, Grund, Links, Titel und Copyright stehen in den Theme
 * Options (Reiter Farben), nicht hier: Schrift und Link #2d2e83, Grund
 * #ffffff, ueberfahren und Titel #e20074, Copyright #ffffff auf #e20074.
 *
 * Hier das alte Farbvokabular von johann, soweit es noch benutzt wird --
 * gemessen am 20.10.2026 im Browser (alle var(--x) der geladenen Stylesheets
 * auf 14 Seiten gegen die definierten):
 *
 *   --sitecolor, --fp_magenta, --footer_bg   alle 14 Seiten (Master-Plugins
 *                                            Akkordeon, Aktuell, Rechner ...)
 *   --red                                    3 Seiten
 *
 * Alle als RGB-TRIPEL: sie werden als rgba( var(--x), a ) gelesen -- eine
 * fertige Farbe dort waere ungueltig und fiele lautlos aus.
 *
 * Dazu die Skalen aus johann/library/grid/colors/color-custom.css:
 * fpmagenta und fpblue (Klassen fpmagenta-500/-800 stehen 40x im Inhalt,
 * die Navi rechnet mit fpmagenta-800), magenta und lightblue (die
 * Alert-Varianten in gula-sc-alert-messsages/alerts-extra.css). Skalen
 * ganz, nicht nur die heute benutzten Stufen.
 */
:root {
	--sitecolor:   45, 46, 131;
	--fp_magenta:  226, 0, 116;
	--fp_blue:     45, 46, 131;
	--footer_bg:   35, 52, 72;
	--red:         227, 0, 11;

	--fpmagenta: #e20074;
	--fpmagenta-10: #fdeef5;
	--fpmagenta-50: #fce0ee;
	--fpmagenta-100: #f6b3d5;
	--fpmagenta-200: #f180ba;
	--fpmagenta-300: #eb4d9e;
	--fpmagenta-400: #e62689;
	--fpmagenta-500: #e20074;
	--fpmagenta-600: #d60268;
	--fpmagenta-700: #ca005a;
	--fpmagenta-800: #bb004c;
	--fpmagenta-900: #ab0038;
	--fpmagenta-a100: #ffe7f8;
	--fpmagenta-a200: #ffc7ec;
	--fpmagenta-a400: #ff9eda;
	--fpmagenta-a700: #ff80c9;
	--magenta: #e5007d;
	--magenta-50:  #fce0ef;
	--magenta-100: #f7b3d8;
	--magenta-200: #f280be;
	--magenta-300: #ed4da4;
	--magenta-400: #e92691;
	--magenta-500: #e5007d;
	--magenta-600: #cc026b;
	--magenta-700: #bd005a;
	--magenta-800: #a9014b;
	--magenta-900: #920539;
	--magenta-a100: #fffbfc;
	--magenta-a200: #ffc8d8;
	--magenta-a400: #ff95b4;
	--magenta-a700: #ff7ba2;
	--fpblue: #2d2e83;
	--fpblue-50: #c0c0da;
	--fpblue-100: #c0c0da;
	--fpblue-200: #9697c1;
	--fpblue-300: #6c6da8;
	--fpblue-400: #4d4d96;
	--fpblue-500: #2d2e83;
	--fpblue-600: #28297b;
	--fpblue-700: #222370;
	--fpblue-800: #1c1d66;
	--fpblue-900: #111253;
	--fpblue-a100: #a3a5ff;
	--fpblue-a200: #7a84ff;
	--fpblue-a400: #4549ff;
	--fpblue-a700: #2629ec;
	--lightblue: #03a9f4;
	--lightblue-50: #e1f5fe;
	--lightblue-100: #b3e5fc;
	--lightblue-200: #81d4fa;
	--lightblue-300: #4fc3f7;
	--lightblue-400: #29b6f6;
	--lightblue-500: #03a9f4;
	--lightblue-600: #039be5;
	--lightblue-700: #0288d1;
	--lightblue-800: #0277bd;
	--lightblue-900: #01579b;
	--lightblue-a100: #80d8ff;
	--lightblue-a200: #40c4ff;
	--lightblue-a400: #00b0ff;
	--lightblue-a700: #0091ea;
}

.fpmagenta      { color: var(--fpmagenta) }
.fpmagenta-50   { color: var(--fpmagenta-50) }
.fpmagenta-100  { color: var(--fpmagenta-100) }
.fpmagenta-200  { color: var(--fpmagenta-200) }
.fpmagenta-300  { color: var(--fpmagenta-300) }
.fpmagenta-400  { color: var(--fpmagenta-400) }
.fpmagenta-500  { color: var(--fpmagenta-500) }
.fpmagenta-600  { color: var(--fpmagenta-600) }
.fpmagenta-700  { color: var(--fpmagenta-700) }
.fpmagenta-800  { color: var(--fpmagenta-800) }
.fpmagenta-900  { color: var(--fpmagenta-900) }
.fpmagenta-a100 { color: var(--fpmagenta-a100) }
.fpmagenta-a200 { color: var(--fpmagenta-a200) }
.fpmagenta-a400 { color: var(--fpmagenta-a400) }
.fpmagenta-a700 { color: var(--fpmagenta-a700) }
.bg-fpmagenta      { background-color: var(--fpmagenta) }
.bg-fpmagenta-50   { background-color: var(--fpmagenta-50) }
.bg-fpmagenta-100  { background-color: var(--fpmagenta-100) }
.bg-fpmagenta-200  { background-color: var(--fpmagenta-200) }
.bg-fpmagenta-300  { background-color: var(--fpmagenta-300) }
.bg-fpmagenta-400  { background-color: var(--fpmagenta-400) }
.bg-fpmagenta-500  { background-color: var(--fpmagenta-500) }
.bg-fpmagenta-600  { background-color: var(--fpmagenta-600) }
.bg-fpmagenta-700  { background-color: var(--fpmagenta-700) }
.bg-fpmagenta-800  { background-color: var(--fpmagenta-800) }
.bg-fpmagenta-900  { background-color: var(--fpmagenta-900) }
.bg-fpmagenta-a100 { background-color: var(--fpmagenta-a100) }
.bg-fpmagenta-a200 { background-color: var(--fpmagenta-a200) }
.bg-fpmagenta-a400 { background-color: var(--fpmagenta-a400) }
.bg-fpmagenta-a700 { background-color: var(--fpmagenta-a700) }
.fpblue      { color: var(--fpblue) }
.fpblue-50   { color: var(--fpblue-50) }
.fpblue-100  { color: var(--fpblue-100) }
.fpblue-200  { color: var(--fpblue-200) }
.fpblue-300  { color: var(--fpblue-300) }
.fpblue-400  { color: var(--fpblue-400) }
.fpblue-500  { color: var(--fpblue-500) }
.fpblue-600  { color: var(--fpblue-600) }
.fpblue-700  { color: var(--fpblue-700) }
.fpblue-800  { color: var(--fpblue-800) }
.fpblue-900  { color: var(--fpblue-900) }
.fpblue-a100 { color: var(--fpblue-a100) }
.fpblue-a200 { color: var(--fpblue-a200) }
.fpblue-a400 { color: var(--fpblue-a400) }
.fpblue-a700 { color: var(--fpblue-a700) }
.bg-fpblue      { background-color: var(--fpblue) }
.bg-fpblue-50   { background-color: var(--fpblue-50) }
.bg-fpblue-100  { background-color: var(--fpblue-100) }
.bg-fpblue-200  { background-color: var(--fpblue-200) }
.bg-fpblue-300  { background-color: var(--fpblue-300) }
.bg-fpblue-400  { background-color: var(--fpblue-400) }
.bg-fpblue-500  { background-color: var(--fpblue-500) }
.bg-fpblue-600  { background-color: var(--fpblue-600) }
.bg-fpblue-700  { background-color: var(--fpblue-700) }
.bg-fpblue-800  { background-color: var(--fpblue-800) }
.bg-fpblue-900  { background-color: var(--fpblue-900) }
.bg-fpblue-a100 { background-color: var(--fpblue-a100) }
.bg-fpblue-a200 { background-color: var(--fpblue-a200) }
.bg-fpblue-a400 { background-color: var(--fpblue-a400) }
.bg-fpblue-a700 { background-color: var(--fpblue-a700) }


/*
 * NAVIGATION -- gula-nav-logocenter so eingestellt, dass sie aussieht wie
 * die alte Theme-Navi (johann/library/navigation/navi.css):
 *
 *   - Leiste: Startseite magenta mit weissem Logo und weissem Burger,
 *     sonst weiss mit zweifarbigem Logo und magenta Burger
 *   - Logo 12 Schriftgroessen breit, 1 oben / 0,1 unten
 *   - Burger frei rechts oben (absolut, wie alt), nicht in der Logo-Zeile
 *   - Vollbild-Menue: Verlauf magenta, Eintraege 3,5vh, Gewicht 300,
 *     keine Trennlinien
 */
:root {
	--nav-bg:      #ffffff;
	--nav-icon:    var( --fpmagenta-500 );
	--nav-fg:      #ffffff;
	--nav-menu-bg: linear-gradient( -15deg, var( --fpmagenta-800 ) 20%, var( --fpmagenta-500 ) 70% );
	--nav-line:    transparent;
}
.fs-nav-home {
	--nav-bg:   var( --fpmagenta-500 );
	--nav-icon: #ffffff;
}
.nav_wrapper {
	padding-top:    0;
	padding-bottom: 0;
}
.nav_brand-home,
.nav_brand {
	width:          calc( var( --fontsize ) * 12 );
	padding-top:    var( --size-1 );
	padding-bottom: calc( var( --size-1 ) * 0.1 );
}
.navitem_exp {
	position: static;
}
a.nav-expander {
	position:      absolute;
	top:           calc( var( --size-1 ) * 0.4 );
	right:         var( --size-1 );
	padding:       0 1em 0.5em 1em;
}
a.nav-expander .fa-solid {
	margin-top: var( --size-2 );
}
a.nav-expander .fa-solid:hover {
	opacity: 1;
	color:   var( --fpmagenta-900 );
}
.fs-nav-home a.nav-expander .fa-solid:hover {
	color: rgba( var( --white ), 0.8 );
}
.main-nav {
	width: 90%;
}
.main-nav .menu-item,
.main-nav .menu-item:visited {
	font-size:   3.5vh;
	line-height: 1.5;
}
.main-nav .menu-item a {
	padding-left:  0;
	padding-right: 0;
}
.main-nav .sub-menu li {
	font-size: 2.5vh;
}
.ps-close-nav {
	top:   calc( var( --size-1 ) * 2.25 );
	right: calc( var( --size-1 ) * 1.5 );
}
.ps-close-nav:before,
.ps-close-nav:after,
.ps-close-nav:hover:before,
.ps-close-nav:hover:after {
	border-top-color: #ffffff;
}
/* Eintraege so breit wie ihr Text (alt), ohne Trennlinie; das Plugin setzt
   width 100 % und die Linie mit !important. Die <section> im Overlay bekaeme
   sonst den Seitenrand der gula5-Bloecke (2/4/8 Schriftgroessen). */
.main-nav li,
.main-nav .menu-item {
	width: auto;
	border-bottom-width: 0 !important;
}
.aside section {
	padding-left:  0;
	padding-right: 0;
}


/*
 * UEBERSCHRIFTEN erben ihre Farbe wie unter johann (dort hatten h1-h6 keine
 * eigene Farbe). gula5 gibt ihnen --title_color -- auf der Startseite stand
 * der Leitsatz dadurch magenta statt weiss auf dem rosa Block. Die
 * Titelfarbe in den Theme Options bleibt #e20074: an ihr haengen die
 * Aufzaehlungspunkte, die alt ebenfalls magenta waren. Die Aktuell-Titel
 * faerbt gula-aktuell selbst (aktuell.css).
 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: inherit;
}


/*
 * Schriftgroessen-Klassen von johann (style.css). gula5 fuehrt keine
 * .fs-Skala; .fs-xxxxs steht 12x im Inhalt (Leitsaetze). Skala ganz.
 */
.fs-xxl   { font-size: 13vmax;   line-height: 1; letter-spacing: -0.05rem; }
.fs-xl    { font-size: 11vmax;   line-height: 1; letter-spacing: -0.05rem; }
.fs-lg    { font-size: 9.3vmax;  line-height: 1; letter-spacing: -0.05rem; }
.fs-md    { font-size: 7.9vmax;  line-height: 1; letter-spacing: -0.05rem; }
.fs-sm    { font-size: 6.7vmax;  line-height: 1; letter-spacing: -0.05rem; }
.fs-xs    { font-size: 5.7vmax;  line-height: 1; letter-spacing: -0.05rem; }
.fs-xxs   { font-size: 4.9vmax;  line-height: 1; letter-spacing: -0.05rem; }
.fs-xxxs  { font-size: 4.15vmax; line-height: 1; letter-spacing: -0.05rem; }
.fs-xxxxs { font-size: calc(20px + (60 - 20) * ((100vw - 300px) / (2000 - 300))); line-height: 1.1; letter-spacing: -0.05rem; }


/*
 * SEITENRAND der Bloecke wie bisher: 1 / 2,5 / 5 Schriftgroessen (ab 576
 * bzw. 768 px). johann setzte das an .mainwrapper, gula5 an <section> mit
 * 2 / 4 / 8 -- gemessen bei 1390 px: Copyright-Zeile x = 102 (alt) gegen
 * 163 (gula5), Breite 1186 gegen 1063. Gleiche Werte wie bei singkreis.
 */
section {
	padding-left:  var( --size-1 );
	padding-right: var( --size-1 );
}
@media (min-width: 576px) {
	section {
		padding-left:  var( --size-25 );
		padding-right: var( --size-25 );
	}
}
@media (min-width: 768px) {
	section {
		padding-left:  var( --size-5 );
		padding-right: var( --size-5 );
	}
}


/*
 * COPYRIGHT: Schrift 0,8 (gula5 0,6), Abstand oben/unten 0,35.
 * Farben aus den Theme Options.
 */
#copyright {
	padding-top:    calc( var( --fontsize ) * 0.35 );
	padding-bottom: calc( var( --fontsize ) * 0.35 );
	font-size:      calc( var( --fontsize ) * 0.8 );
}
#copyright p {
	font-size: inherit;
}


/*
 * SPRECH- UND TELEFONZEITEN im Fuss: <dl class="base_time">, 151x
 * gerendert. johann fuehrte die Klasse in derselben Regelgruppe wie
 * dl.base; gula5 kennt base, base_wide, base_no_line, aber nicht base_time.
 */
dl.base_time {
	display: grid;
	grid-template-columns: max-content auto;
	column-gap: 0;
	margin: 0;
	padding: 0;
	margin-bottom: calc( var( --fontsize ) * 0.8 );
}
dl.base_time dt {
	grid-column-start: 1;
	font-weight: var( --bodyweight );
	padding-right: calc( var( --fontsize ) * 1 );
	margin-bottom: calc( var( --fontsize ) * 0.5 );
	margin-right: 0;
	border-bottom: 1px solid rgba( var( --sitecolor ), 0.3 );
}
dl.base_time dd {
	grid-column-start: 2;
	margin-bottom: calc( var( --fontsize ) * 0.5 );
	margin-left: 0;
	border-bottom: 1px solid rgba( var( --sitecolor ), 0.3 );
}


/*
 * TABELLEN aus <div>: .table / .table-row / .table-cell (116 Zellen).
 * Alt: johann/style.css, unveraendert.
 */
.table {
	display: table;
	font-size: calc( var( --fontsize ) * 0.9 );
	margin-bottom: calc( var( --fontsize ) * 0.75 );
}
.table-row {
	display: table-row;
	background-color: rgba( var( --sitecolor ), 0.15 );
}
.table-cell {
	display: table-cell;
	border-bottom: 1px dotted rgba( var( --sitecolor ), 0.25 );
	padding: calc( var( --fontsize ) * 0.4 ) calc( var( --fontsize ) * 0.25 ) calc( var( --fontsize ) * 0.1 );
	vertical-align: top;
}
.table-row:nth-child(odd)  { background-color: rgba( var( --sitecolor ), 0.05 ); }
.table-row:nth-child(even) { background-color: rgba( var( --sitecolor ), 0.085 ); }


/*
 * KNOEPFE. Farben ueber die Variablen von gula-sc-buttons (Master:
 * buttons-custom.css), Werte aus der alten Site-Kopie: Flaeche
 * fpmagenta-400, Rand -600, ueberfahren -700/-800.
 *
 * Zwei Varianten kennt der Master nicht, beide stehen im Inhalt:
 *   .btn-outline-theme  57x gerendert (Master heisst .btn-theme-outline)
 *   .btn-cyan           6x in [button], dazu die cyan-Skala
 * Grundmasse wie alt: Zeile 1,5, Polster 1/8 und 3/4 (Master: Zeile 1).
 *
 * SPEZIFITAET mit Absicht erhoeht (html:root, .btn.btn): gula-sc-buttons
 * reiht sein Stylesheet erst beim Rendern des Shortcodes ein, es landet im
 * Fuss NACH dieser Datei und gewinnt sonst bei gleicher Spezifitaet --
 * gemessen: Flaeche blieb #ef5350 (Master-Vorgabe --red-400).
 */
html:root {
	--theme_fg:                  #ffffff;
	--theme_bg:                  var( --fpmagenta-400 );
	--theme_border:              var( --fpmagenta-600 );
	--theme_hover_fg:            #ffffff;
	--theme_hover_bg:            var( --fpmagenta-700 );
	--theme_hover_border:        var( --fpmagenta-800 );

	--cyan-500: #00bcd4;
	--cyan-600: #00acc1;
	--cyan-700: #0097a7;
	--cyan-800: #00838f;
}
.btn.btn {
	padding: var( --size-0125 ) var( --size-075 );
	line-height: 1.5;
}
.btn.btn-outline-theme {
	color: var( --fpmagenta-700 ) !important;
	border-color: var( --fpmagenta-700 );
}
.btn.btn-outline-theme:hover {
	color: #ffffff !important;
	background-color: var( --fpmagenta-400 );
	border-color: var( --fpmagenta-700 );
}
a.btn-cyan,
a.btn-cyan:visited,
.btn-cyan {
	color: #ffffff;
	background-color: var( --cyan-600 );
	border-color: var( --cyan-700 );
	text-decoration: none;
}
.btn-cyan:hover,
.btn-cyan:focus,
.btn-cyan.focus,
.btn-cyan:active,
.btn-cyan.active {
	color: #ffffff;
	background-color: var( --cyan-700 );
	border-color: var( --cyan-800 );
}


/*
 * NACH-OBEN-KNOPF: magenta, 50 px, Pfeil 20 px (alt gula-smoothscroll in
 * der Site-Kopie). Der Master nimmt --sitebgcolor -- hier Weiss auf Weiss.
 */
.scroll-up,
.scroll-up:hover {
	width: 50px;
	height: 50px;
	background-color: var( --fpmagenta-500 );
}
.triangle {
	top: 50%;
	width: 20px;
	height: 20px;
}


/*
 * FETT wie johann: 700 mit leichter Sperrung (0,01em).
 */
strong {
	letter-spacing: 0.01em;
}


/*
 * FUSS: Schrift 1 Schriftgroesse (gula5 0,8). Alt: johann/style.css #footer.
 */
#footer {
	font-size: var( --fontsize );
}


/*
 * AKKORDEON-TITEL. Die Kopie von gula-block-accordion auf dieser Site gab
 * die Titel als <h3> aus, der Master als <h5>. Gemessen auf /team/ bei
 * 1390 px: alt magenta 29,6 px, Zeile 33,7, Sperrung -0.8px, unten 8,2;
 * Master blau 23,1 px. Hier das alte Aussehen am <h5> -- die Ebene bleibt
 * die des Masters. Abstand unter dem Akkordeon alt 0,25 Schriftgroessen.
 */
summary.bacc-vertical h5,
summary.bacc-horizontal h5 {
	color:          var( --fpmagenta-500 );
	font-size:      calc( var( --size-1 ) * 1.45 );
	line-height:    calc( var( --size-1 ) * 1.65 );
	letter-spacing: -0.05rem;
	margin-bottom:  calc( var( --size-1 ) * 0.4 );
}


/*
 * BILDER MITTIG: 5 px Rand wie johann. gula5 hat zusaetzlich
 * img.aligncenter { margin: 1em auto } (aus guladevs style.css) -- auf
 * /angebot/ sass das Labor-Logo dadurch 15 px tiefer.
 */
img.aligncenter {
	margin: 5px auto;
}


/*
 * HOEHENBLOECKE (vh75 ...) wie unter johann als content-box: dort kam das
 * Polster ZU den 75vh dazu. Startseite bei 1390 x 1200: alt 900 + 2 x 61 =
 * 1022 px, der Leitsatz mittig darin; gula5 rechnet border-box (900 px),
 * der Leitsatz sass 61 px hoeher. width: auto dazu, sonst macht gula5s
 * .module { width: 100% } den Block um das Polster breiter als die Seite.
 */
.vhtheme,
.vh100,
.vh75,
.vh50 {
	box-sizing: content-box;
	width: auto;
}


/*
 * FORMULARE (Contact Form 7). Alt: johann/style-child.css.
 * Bewusst NICHT uebernommen: die Schrift der Felder. johann liess die
 * Browser-Vorgabe stehen (Arial 400), gula5 setzt die Hausschrift -- wie
 * bei singkreis so gelassen.
 */
.wpcf7-quiz-label {
	font-size: var( --size-1 );
}
.wpcf7 p input[type="submit"] {
	margin-top: 15px;
}
/* Senden-Knopf: das Formular gibt ihm btn btn-theme btn-lg, und unter johann
   bestimmte .btn-lg Polster, Schrift und Radius. gula5 (wie guladev) gestaltet
   .wpcf7 input[type=submit] spezifischer (0,2,1 gegen 0,1,0) und ueberstimmt
   das: 85x53 statt 114x43 px. Werte von .btn-lg aus der alten Kopie von
   gula-sc-buttons; die Zeile 1,5 kommt von .btn.btn (Abschnitt KNOEPFE). */
.wpcf7 input[type="submit"].btn-lg {
	padding: calc( var( --fontsize ) * 0.2 ) calc( var( --fontsize ) * 0.9 );
	font-size: calc( var( --fontsize ) * 1.075 );
	border-radius: 0.3rem;
}
.wpcf7 label,
.wpcf7 p label {
	font-size: calc( var( --fontsize ) * 0.75 );
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	color: rgba( var( --sitecolor ), 1 );
}
.wpcf7 textarea,
.wpcf7 input[type=date],
.wpcf7 input[type=tel],
.wpcf7 input[type=email],
.wpcf7 input[type=text],
.wpcf7 input[type=password] {
	background-color: rgba( var( --fp_magenta ), 0.1 );
	border: none;
	border-bottom: 1px solid #fff;
	width: 100%;
	padding: var( --size-025 ) 0 var( --size-025 ) var( --size-025 );
	font-size: var( --size-1 );
}
.wpcf7 textarea {
	height: var( --size-5 );
}
.wpcf7 textarea:focus,
.wpcf7 input[type=date]:focus,
.wpcf7 input[type=tel]:focus,
.wpcf7 input[type=email]:focus,
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=password]:focus {
	background-color: #ffffff;
	border-bottom: 1px solid rgba( var( --fp_magenta ), 1 );
}
/* Kein Fokusrahmen in den Feldern, wie johann: der Fokus zeigt sich schon am
   weissen Grund und der Magenta-Linie. gula5 setzt :focus-visible, und das
   greift bei Textfeldern auch per Maus (2 px Magenta mit 2 px Abstand).
   Links und Knoepfe bleiben, wie gula5 und die Knopf-Klassen sie zeigen.
   Entscheid des Nutzers 20.10.2026. */
.wpcf7 textarea:focus-visible,
.wpcf7 input[type=date]:focus-visible,
.wpcf7 input[type=tel]:focus-visible,
.wpcf7 input[type=email]:focus-visible,
.wpcf7 input[type=text]:focus-visible,
.wpcf7 input[type=password]:focus-visible {
	outline: none;
}
.wpcf7 ::placeholder {
	color: rgba( var( --fp_magenta ), 0.5 );
}


/*
 * ZURUECK-LINK der Aktuell-Einzelansicht wie unter johann: gepunktet
 * unterstrichen wie jeder Link (gula5 nimmt die Linie weg), Pfeil
 * caret-left in Textgroesse statt chevron-left (Ziel und Text kommen aus
 * functions.php, Filter gula_backlink_pageid/_text). Doppelte Klasse: gula5
 * reiht sc.backlink.css beim Rendern ein, es kommt nach dieser Datei.
 */
.gula-backlink.gula-backlink a {
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-underline-offset: calc( var( --fontsize ) * 0.3 );
	text-decoration-thickness: 1px;
}
.gula-backlink.gula-backlink i {
	top: 0;
	font-size: inherit;
	margin-right: 0.5em;
}
.gula-backlink i.fa-chevron-left::before {
	content: "\f0d9";
}
/* Ueberfahren: johann liess den Pfeil in der Linkfarbe, gula5
   (sc.backlink.css) faerbt ihn magenta. */
.gula-backlink.gula-backlink a:hover i {
	color: inherit;
}


/*
 * ICON-KREIS (johann: .iconcircle, Breite/Hoehe per width4/height4) als
 * content-box: der 2-px-Rand kam zur Groesse dazu. /praxis/ und
 * /angebot/: alt 86 px, unter border-box 82.
 */
.iconcircle {
	box-sizing: content-box;
}


/*
 * DEFINITIONSLISTEN schmal wie unter johann: dl.base und dl.base_no_line
 * schon unter 1200 px einspaltig (gula5 erst unter 576 px und ohne
 * base_no_line), Eintrag mit 1,5 Abstand darunter; dl.base_wide unter 576.
 * johann setzte dabei dd korrekt in Spalte 1 -- der Fehler, wegen dem gula5
 * guladevs 1199er-Regel nicht uebernommen hat, steckt hier nicht.
 * Gemessen /team/ bei 390 px: dd alt 21,8 px Abstand, gula5 7,3.
 */
@media (max-width: 1199px) {
	dl.base,
	dl.base_no_line {
		grid-template-columns: 1fr;
	}
	dl.base dt {
		grid-column-start: 1;
		border-bottom: 0;
		margin-bottom: calc( var( --fontsize ) * 0.1 );
	}
	dl.base dd {
		grid-column-start: 1;
		margin-bottom: calc( var( --fontsize ) * 1.5 );
	}
}
@media (max-width: 575.98px) {
	dl.base_wide dd {
		margin-bottom: calc( var( --fontsize ) * 1.5 );
	}
}


/*
 * LISTEN nach einem Absatz mit vollem Absatzabstand wie unter johann.
 * gula5 zieht sie um 0,65 Schriftgroessen heran (p ~ ul, p ~ ol).
 * Gemessen /angebot/ und /impressum-datenschutz/: 13 px.
 */
p ~ ul,
p ~ ol {
	margin-top: 0;
}


/*
 * EINLEITUNG (.lead) wie johann: 1,1 Schriftgroessen, Zeile 1,35
 * (gula5 1,15 / 1,6). Schwangerschaftsrechner: Einleitung 25 px hoeher.
 */
.lead {
	font-size:   calc( var( --fontsize ) * 1.1 );
	line-height: calc( var( --fontsize ) * 1.35 );
}


/*
 * KLEINSCHRIFT (.small) mit der Zeile von johann: 1,1 Schriftgroessen
 * (gula5 1,25). Steht in den Fussnoten der Kurstermine und bei
 * Quellenangaben; bei 1390 px 22,5 statt 25,5 px Zeile.
 */
.small {
	line-height: calc( var( --fontsize ) * 1.1 );
}