/*
Theme Name:     Antje Taubert Klarinette Child-Theme
Theme URI:      https://www.7einhalb.de
Description:    Generatepress child theme.
Author:         7einhalb - Maik Bernstein
Author URI:     https://www.7einhalb.de
Template:       generatepress
Version:        0.1.0
*/


/* ### eigene Klassen */

/* Z-Index -1 */
.layer-back {
    z-index: -1;
}

/* Hide Content */
.hideme {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .mobile-hideme {
        display: none !important;
    }
}
@media screen and (min-width: 769px) {
    .desktop-hideme {
        display: none !important;
    }
}

/* Sticky Element */
.stickme {
    position: sticky;
    position: -webkit-sticky;
    top: 5%;
}

/* No Margin */
.nomargin {
    margin: 0;
}

/* No Pointer-Event */
.nopointer {
	pointer-events: none;
}



/* # Seite Home */
/* Video & Overlay-Cutout Desktop */
.background-video-100 {
    position: absolute;
    opacity: 1;
}
.background-video-50 {
    position: absolute;
    opacity: 0.5;
}
.background-video-25 {
    position: absolute;
    opacity: 0.25;
}
video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/* ## Contact Form 7 */
/* Contact Form 7 - Inline-Row */
.inline-row label {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* Contact Form 7 - Allgemeines */
.wpcf7 .wpcf7-list-item {
    margin-left: 0;
}
.wpcf7 p label {
  font-size: 0.9em;
}

.wpcf7 .input-row label, .label {
    padding: 5px 10px 0 10px;
    display: block;
    margin: 0;
    min-width: 130px;
}

.wpcf7 input[type="email"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="text"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    border: unset;
    background: transparent;
    border: 1px solid var(--base);
	border-radius: 10px;
	color: #fff;
	margin-top: 5px;
}

/* Contact Form 7 - Textarea */
.wpcf7 .is-textarea p {
    align-items: flex-start;
    /* border: 1px solid #d2b17f; */
    display: flex;
    flex-direction: column;
    width: 100%;
}
.wpcf7-textarea {
  height: 100px;
}

/* Contact Form 7 - Abstand Radio/Checkbox */
.wpcf7-form .wpcf7-list-item:first-of-type {
    margin-left: 0;
}
.wpcf7-form .wpcf7-form-control.wpcf7-radio {
    display: flex;
	gap: 1em;
}

/* CF7 - Fehlermeldungen */
.wpcf7 form .wpcf7-response-output {
  margin: 0 0.5em 0;
}


/* Contact Form 7 - Button */
input[type="submit"].kh-button--primary.button-slide {
  position: relative;
  overflow: hidden;          /* versteckt Überstand des Overlays */
  align-items: center;
  color: var(--base);
  column-gap: 0.5em;
  display: inline-flex;
  font-size: 0.9em;
  font-weight: 500;
  justify-content: center;
  line-height: 1.1;
  text-decoration: none;
  border: 2px solid var(--base);
  border-radius: 9999px;
  padding: 16px 22px;
  background: transparent;
}
input[type="submit"].kh-button--primary.button-slide:is(:hover,:focus) {
    color: var(--accent);
    transition: all 0.4s ease 0s;
    text-decoration: none;
}
/* CF7 - Button Overlay */
input.button-slide[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;              /* volle Höhe, volle Breite */
  left: -20%;            /* etwas nach links raus, damit Skew Platz hat */
  width: 0;              /* Start: nichts zu sehen */
  background: #fff;
  transform: skewX(-30deg);
  transition: width 0.3s ease;
  z-index: -1;           /* hinter dem Text, aber noch im Button */
}
input.button-slide:hover::before,
input.button-slide:focus::before {
  width: 140% !important;           /* füllt komplett, mit gerader Kante */
}




/* Contact Form 7 -Spinner Korrektur (wg. zentrierten Button) */
/*.wpcf7-spinner {
	display: block;
	margin: 0 auto;
}*/

/* Contact Form 7 - Column Grid */
.dwp-form {
    width: 100%;
    margin: 0 auto;
}
.dwp-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.dwp-form-row .wpcf7-form-control,
.wpcf7-form label {
    width: 100%;
}
.dwp-form-column {
    flex: 1;
    padding: 0.5rem 0;
    width: 100%;
}
.dwp-form-column:first-of-type {
    padding-left: 0;
}
.dwp-form-column:last-of-type {
    padding-right: 0;
}
 
/* CF7 Grid - Desktop Ansicht */
@media only screen and ( min-width: 48em ) { 
    .dwp-form-row {
        flex-direction: row;
    }
    .dwp-form-column {
        padding: 0.5rem 1rem;
    }
}



/* === at: Verlaufs-Token (erzeugt, nicht von Hand aendern) === */
:root{
  --at-verlauf-kopf: linear-gradient(155deg,#0B1D2E 0%,#12263C 46%,#241E3C 100%);
  --at-verlauf-band: linear-gradient(165deg,#0B1D2E 0%,#152A44 52%,#2A2247 100%);
  --at-verlauf-schluss: linear-gradient(150deg,#241E3C 0%,#152A44 60%,#0B1D2E 100%);
  --at-verlauf-musik: linear-gradient(155deg,#0B1D2E 0%,#0F3244 58%,#123A4A 100%);
  --at-verlauf-musik-band: linear-gradient(165deg,#0B1D2E 0%,#123A4A 100%);
  --at-verlauf-lernen: linear-gradient(155deg,#1B1B3A 0%,#241E3C 48%,#2C2350 100%);
  --at-verlauf-lernen-band: linear-gradient(165deg,#241E3C 0%,#2C2350 100%);
  --at-verlauf-lernen-schluss: linear-gradient(150deg,#2C2350 0%,#241E3C 58%,#1B1B3A 100%);
  --at-verlauf-lernen-tief: linear-gradient(165deg,#241E3C 0%,#1B1B3A 100%);
}
/* === at: Ende Verlaufs-Token === */

/* === at: Kopf und Fuss (erzeugt, nicht von Hand aendern) === *//* Kopfleiste und Sektionen teilen sich dieselbe Inhaltsbreite (1280px) und
   dasselbe Seitenpolster. Deshalb sitzt das Polster auf der Leiste selbst und
   nicht im Innencontainer - sonst stuenden Wortmarke und Ueberschriften um die
   Polsterbreite versetzt. */
.site-header{background-color:var(--navy);border-bottom:1px solid rgba(198,166,103,.28)}
/* 🔴 Stapelkontext. GeneratePress setzt .main-navigation{z-index:100}, laesst das
   Element aber `position: static` - dort ist z-index wirkungslos. Das Untermenue
   ist `position:absolute` und wird deshalb von jedem SPAETEREN positionierten
   Geschwister ueberdeckt; unsere Sektionen sind alle `position:relative`. Sichtbar
   wird es erst beim Aufklappen ueber einer Sektion. Eine Zeile behebt es. */
.main-navigation{position:relative}
.main-navigation,.main-navigation.is_stuck{background-color:rgba(11,29,46,.97);
  backdrop-filter:blur(16px);
  padding-left:clamp(20px,4vw,52px);padding-right:clamp(20px,4vw,52px)}
.main-navigation .inside-navigation{min-height:96px;max-width:1280px;
  padding-left:0;padding-right:0}
.navigation-branding img,.site-logo img{width:clamp(64px,6vw,84px);height:auto}
.navigation-branding .main-title,.site-title{font-family:var(--gp-font--cormorant-garamond);
  font-size:clamp(1rem,.245vw + .943rem,1.1875rem);font-weight:400;line-height:1.2;
  letter-spacing:.2em;text-transform:uppercase;color:var(--base)}
/* GPs Navigations-Branding kennt keinen Untertitel. Der Entwurf setzt unter die
   Wortmarke ein kursives "Klarinette" - hier als Pseudoelement, damit dafuer
   kein eigenes Hook-Element noetig ist. Bei mehrsprachigem Ausbau ersetzen. */
.navigation-branding .main-title::after {
  content: 'Klarinette · Klezmer · Körperarbeit';
  display: block;
  font-family: var(--gp-font--cormorant-garamond);
  font-style: italic;
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.8;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--accent);
  margin-top: 6px;
  border-top: 1px solid;
}
p.main-title > a {
  letter-spacing: .18em;
}
.navigation-branding{column-gap:16px;margin-right:auto}
/* GeneratePress gibt der Wortmarke unterhalb der Containerbreite 10 px
   Aussenabstand, unter 1024 px dem Titel noch einmal 10 px. Die Inhaltskante
   aller Sektionen liegt aber genau auf dem Seitenpolster - gemessen am
   10.09.2026: bei 1280 px Wortmarke 61, Inhalt 51; bei 1000 px 60 gegen 40. */
/* GP schreibt die Regel mit ID-Selektor (#site-navigation / #sticky-navigation,
   bis 1290 px) - der `body`-Praefix hebt die Spezifitaet darueber. */
body #site-navigation .navigation-branding,
body #sticky-navigation .navigation-branding,
.main-navigation .navigation-branding .main-title{margin-left:0}
/* Navigation rechtsbuendig an die Inhaltskante, wie im Entwurf. */
.main-navigation .main-nav{margin-left:auto}
.main-navigation .main-nav > ul{justify-content:flex-end}
.main-navigation .main-nav ul li a{padding-left:clamp(8px,1vw,15px);
  padding-right:clamp(8px,1vw,15px)}
.main-navigation .main-nav ul li.at-nav__button > a{border:1px solid var(--accent);
  color:var(--accent);padding:14px 26px;margin-left:14px;line-height:1;
  transition:background-color .35s ease,color .35s ease}
.main-navigation .main-nav ul li.at-nav__button > a:hover,
.main-navigation .main-nav ul li.at-nav__button.sfHover > a{background-color:var(--accent);
  color:var(--navy)}
/* Aufklappmenue nach Welt eingefaerbt. Die Bereichsfarbe kommt als
   Zahlentripel ueber --at-ton vom Menuepunkt - dieselbe Mechanik wie bei
   at-row und at-event, deshalb reicht EIN Regelsatz fuer alle drei Welten.
   Ohne Vorgabe bleibt es Gold. */
.main-navigation .main-nav ul li.at-nav--musik{--at-ton:111,191,199}
.main-navigation .main-nav ul li.at-nav--lernen{--at-ton:179,163,223}
.main-navigation .main-nav ul li.at-nav--musik > ul{background-color:var(--petrol-leiste)}
.main-navigation .main-nav ul li.at-nav--lernen > ul{background-color:var(--violett-leiste)}
.main-navigation .main-nav ul ul{min-width:268px;padding:10px 0;
  background-color:var(--navy-leiste);
  border:1px solid rgba(var(--at-ton,198,166,103),.34);
  border-top:2px solid rgb(var(--at-ton,198,166,103))}
.main-navigation .main-nav ul ul li a{padding:12px 16px}
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li.sfHover > a,
.main-navigation .main-nav ul ul li a:focus{
  background-color:rgba(var(--at-ton,198,166,103),.14);
  color:rgb(var(--at-ton,198,166,103))}
/* Erster Punkt jedes Panels: die Uebersichtsseite selbst, im Aussehen der
   frueheren kursiven Rubrik. Die Rubriken "Buehne & Klang" und "Atem &
   Handwerk" (::before) sind am 10.09.2026 entfallen (Ansage Maik) - an ihrer
   Stelle steht ein echter Link, derselbe wie im Hauptmenue, z. B.
   "Musik (Uebersicht)". Die Klasse traegt der Menuepunkt. */
.main-navigation .main-nav ul ul li.at-nav__uebersicht > a{
  padding:8px 16px 12px;font-family:var(--gp-font--cormorant-garamond);
  font-style:italic;font-weight:400;font-size:.9375rem;line-height:1.3;
  letter-spacing:.01em;text-transform:none;
  color:rgb(var(--at-ton,198,166,103))}
/* Der kleine Pfeil am Elternpunkt traegt ebenfalls die Bereichsfarbe. */
.main-navigation .main-nav ul li[class*='at-nav--'] > a .gp-icon{
  color:rgb(var(--at-ton,198,166,103))}
.main-navigation .main-nav ul li[class*='at-nav--'].sfHover > a,
.main-navigation .main-nav ul li[class*='at-nav--'] > a:hover{
  color:rgb(var(--at-ton,198,166,103))}
.main-navigation .main-nav ul li.current-menu-item > a{
  box-shadow:inset 0 -1px 0 0 var(--accent)}
/* Unter dem Umbruchpunkt stellt GP den Menuebutton in eine eigene Zeile unter die
   Wortmarke. Der Entwurf haelt beides in einer Zeile, den Button als gerahmtes
   Quadrat ohne Beschriftung. */
@media (max-width:1080px){
  .main-navigation.has-branding .inside-navigation{flex-wrap:nowrap;column-gap:16px}
  .navigation-branding{flex:1 1 auto;min-width:0}
  .main-navigation .menu-toggle{flex:0 0 auto;width:auto;height:52px;padding:0 14px;
    line-height:1;border:1px solid rgba(198,166,103,.5);color:var(--accent)}
  .main-navigation .menu-toggle .mobile-menu{display:none}
}
.at-fuss a{text-decoration:none}
/* Der Praefix `body` ist noetig, nicht Zierde: die Wellbeing-Vorlage setzt
   `.comments-area{max-width:840px;padding-inline:20px}` im GeneratePress
   Custom CSS, und das steht am ENDE des <body> - also hinter dieser Datei.
   Bei gleicher Spezifitaet gewinnt das Spaetere. Am 14.08.2026 aufgelaufen:
   der Grund war da, der Kasten blieb 840px breit. */
body .comments-area{
	--at-ton:198,166,103;
	max-width:none;
	background:var(--base);
	color:var(--contrast);
	padding:clamp(72px,8vw,116px) clamp(20px,4vw,52px)
}

body .comments-area>*{max-width:720px;margin-left:auto;margin-right:auto}

/* Die Kopfleiste ist klebend und 96px hoch - ohne den Abstand landet das
   Sprungziel #respond unter ihr. Dieselbe Regel wie an allen Ankern. */
#comments,#respond,.comment-respond{scroll-margin-top:96px}

/* Ueberschrift mit der goldenen Haarlinie, demselben Motiv wie unter jeder H2
   der Site. WordPress gibt hier ein h3 aus; die Stufe zu aendern ginge nur
   ueber PHP (R12), das Aussehen nicht. */
.comments-area :is(.comments-title,.comment-reply-title){
	margin:0 0 clamp(26px,3vw,34px);
	font-family:var(--gp-font--cormorant-garamond);
	font-weight:300;
	font-size:clamp(1.75rem,1.0204vw + 1.5109rem,2.5rem);
	line-height:1.14;
	letter-spacing:-.01em;
	color:var(--contrast)
}

.comments-area :is(.comments-title,.comment-reply-title)::after{
	content:"";
	display:block;
	width:72px;
	height:1px;
	margin-top:clamp(20px,2.4vw,28px);
	background:var(--accent)
}

/* "Antwort abbrechen" steht als <small> in der Ueberschrift und darf deren
   Groesse nicht mitnehmen. */
.comments-area :is(.comments-title,.comment-reply-title) small{
	display:block;
	margin-top:12px;
	font-family:var(--gp-font--karla);
	font-size:.8125rem;
	letter-spacing:.02em
}

.comment-notes,.comment-form-cookies-consent label,.comments-area .logged-in-as{
	font-family:var(--gp-font--karla);
	font-size:.875rem;
	line-height:1.6;
	color:var(--contrast-3)
}

/* Feldanordnung wie im Kontaktformular: Name und E-Mail nebeneinander,
   alles andere ueber die volle Spalte.
   GeneratePress gibt die drei einzeiligen Felder OHNE Wrapper aus - sie sind
   nackte Geschwister zwischen den <p>-Bloecken, und ihre <label> liegen als
   .screen-reader-text absolut ausserhalb des Flusses. Deshalb traegt das
   Formular selbst den Umbruch, nicht ein Raster ueber Absaetzen. */
.comment-form{
	display:flex;
	flex-wrap:wrap;
	column-gap:20px;
	row-gap:clamp(22px,2.4vw,30px)
}

.comment-form>p{flex:1 0 100%;margin:0}
.comment-form>input[type=url]{flex:1 0 100%}

@media (min-width:700px){
	.comment-form>input[type=text],
	.comment-form>input[type=email]{flex:1 1 calc(50% - 10px)}
}

/* Feldunterkante statt Kasten - dieselben Werte wie die globale Klasse
   at-input, die an den Contact-Form-7-Feldern haengt. */
.comment-form :is(input[type=text],input[type=email],input[type=url],textarea){
	width:100%;
	padding:14px 2px;
	border:0;
	border-bottom:1px solid rgba(var(--at-ton),.34);
	background:transparent;
	border-radius:0;
	font-family:var(--gp-font--karla);
	font-weight:400;
	font-size:1.0625rem;
	line-height:1.4;
	color:var(--contrast);
	outline:none;
	transition:border-color .35s ease
}

.comment-form :is(input[type=text],input[type=email],input[type=url],textarea):is(:focus,:focus-visible){
	border-bottom-color:rgb(var(--at-ton));
	outline:none
}

/* Die Feldbeschriftung steckt bei GeneratePress im Platzhalter - das sicht-
   bare <label> ist ausgeblendet. Der Platzhalter traegt deshalb die Rolle
   der Beschriftung und bekommt deren Farbe. */
.comment-form ::placeholder{color:var(--contrast-3);opacity:1}

.comment-form textarea{min-height:190px;resize:vertical}

.comment-form-cookies-consent{display:flex;align-items:flex-start;column-gap:11px}
.comment-form-cookies-consent input{margin-top:4px;flex:none;accent-color:var(--accent-2)}

.comment-form input[type=submit]{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:17px 34px;
	border:0;
	border-radius:0;
	background:var(--accent);
	font-family:var(--gp-font--karla);
	font-size:.6875rem;
	font-weight:500;
	line-height:1;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--navy);
	cursor:pointer;
	transition:background-color .35s ease,color .35s ease
}

.comment-form input[type=submit]:is(:hover,:focus){background:var(--accent-3);color:var(--navy)}


/* GeneratePress beschriftet die einzeiligen Felder ueber Platzhalter, das
   Kommentarfeld aber gar nicht: dort stand ein grosser leerer Kasten ohne
   ein Wort daran. Sein <label> gibt es, es ist nur als .screen-reader-text
   weggeklippt - hier wird es wieder sichtbar.

   Die beiden !important sind noetig, nicht bequem: GeneratePress setzt in
   assets/css/main.min.css
       .screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px)}
   und gegen !important hilft keine Spezifitaet. Am 14.08.2026 zweimal
   gemessen - ohne die Marker blieb das Label absolut positioniert und
   unsichtbar hinter dem Textfeld liegen. `clip` (die alte Eigenschaft) muss
   mit zurueckgesetzt werden, `clip-path` allein genuegt nicht. */
.comment-form-comment label{
	position:static!important;
	clip:auto!important;
	clip-path:none;
	width:auto;
	height:auto;
	margin:0 0 6px;
	overflow:visible
}

/* Zwischen dem Artikel und dem Kommentarband lagen 25,5px weisser Grund -
   zwei gestaltete Baender mit einem weissen Streifen dazwischen sehen aus wie
   ein Fehler. Die Quelle ist GeneratePress' comments.min.css:
       .one-container .comments-area{margin-top:1.5em}
   Zwei Klassen, also (0,2,0) - dagegen kommt `body .comments-area` (0,1,1)
   nicht an. Deshalb hier derselbe Selektor Zeichen fuer Zeichen; bei
   gleicher Spezifitaet gewinnt das Spaetere, und diese Datei laedt nach
   comments.min.css. Am 14.08.2026 nachgemessen: Luecke 26px -> 0px. */
.one-container .comments-area{margin-top:0}
.single-post article{margin-bottom:0}

/* Der Beitragswechsler ("voriger / naechster Beitrag") steht zwischen dem
   letzten Abschnitt des Artikels und den Kommentaren. Ohne eigene Flaeche
   bleibt dort ein weisser Reststreifen zwischen zwei gestalteten Baendern.
   Er bekommt deshalb dieselbe Elfenbeinflaeche und dieselbe 720px-Spalte -
   damit liest sich der Abschluss als ein Stueck: dunkles Band, Papier,
   dunkler Fuss. */
.single-post .entry-meta{
	background:var(--base);
	padding:clamp(34px,4vw,52px) clamp(20px,4vw,52px) 0
}

.single-post #nav-below{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	column-gap:24px;
	row-gap:14px;
	max-width:720px;
	margin:0 auto;
	padding-top:clamp(26px,3vw,34px);
	border-top:1px solid rgba(198,166,103,.26)
}

.single-post #nav-below a{
	display:inline-flex;
	align-items:center;
	column-gap:8px;
	font-family:var(--gp-font--karla);
	font-size:.875rem;
	font-weight:500;
	line-height:1.4;
	letter-spacing:.02em;
	color:var(--accent-2);
	text-decoration:none;
	transition:color .35s ease
}

.single-post #nav-below a:is(:hover,:focus){color:var(--accent)}

/* --- Die Liste. Heute leer, trotzdem gestaltet: der erste echte Kommentar
       soll nicht wie ein Fehler aussehen. Avatare sind aus (show_avatars=0),
       damit kein Abruf an gravatar.com geht - die Regel dafuer bleibt
       trotzdem stehen, falls jemand sie wieder einschaltet. --- */
.comment-list{margin:0 0 clamp(56px,6vw,88px);padding:0;list-style:none}
.comment-list ol.children{margin:0 0 0 clamp(20px,3vw,44px);padding:0;list-style:none}

.comment-list .comment-body{
	padding:clamp(26px,3vw,34px) 0;
	border-top:1px solid rgba(var(--at-ton),.26)
}

.comment-list .comment-author{
	display:flex;
	align-items:center;
	column-gap:14px;
	margin-bottom:4px
}

.comment-list .comment-author .avatar{
	width:44px;
	height:44px;
	flex:none;
	border-radius:50%
}

.comment-list .comment-author .fn{
	font-family:var(--gp-font--cormorant-garamond);
	font-style:normal;
	font-weight:400;
	font-size:1.3125rem;
	line-height:1.3;
	color:var(--contrast)
}

.comment-list .says{display:none}

.comment-list .comment-metadata{
	margin-bottom:14px;
	font-family:var(--gp-font--karla);
	font-size:.8125rem;
	letter-spacing:.02em;
	color:var(--contrast-3)
}

.comment-list .comment-metadata a{
	color:inherit;
	text-decoration:none;
	border-bottom:1px solid rgba(var(--at-ton),.35)
}

.comment-list .comment-content :is(p,li){
	font-family:var(--gp-font--karla);
	font-size:1rem;
	line-height:1.8;
	color:var(--contrast-2)
}

.comment-list .comment-content p:last-child{margin-bottom:0}

/* Der Antwortlink traegt das Aussehen von at-button--tertiary. */
.comment-list .reply{margin-top:16px}

.comment-list .reply a{
	display:inline-flex;
	align-items:center;
	column-gap:10px;
	padding-bottom:8px;
	font-family:var(--gp-font--karla);
	font-size:.875rem;
	font-weight:500;
	line-height:1.4;
	letter-spacing:.02em;
	color:var(--accent-2);
	text-decoration:none;
	border-bottom:1px solid rgba(168,136,73,.45);
	transition:color .35s ease,border-color .35s ease
}

.comment-list .reply a:is(:hover,:focus){color:var(--accent);border-bottom-color:var(--accent)}

.comment-list .comment-awaiting-moderation{
	display:block;
	margin-bottom:10px;
	font-family:var(--gp-font--cormorant-garamond);
	font-style:italic;
	font-size:1rem;
	color:var(--petrol)
}

.comment-navigation :is(a,.page-numbers){
	font-family:var(--gp-font--karla);
	font-size:.8125rem;
	color:var(--accent-2)
}

.no-comments{
	font-family:var(--gp-font--karla);
	font-size:1rem;
	line-height:1.8;
	color:var(--contrast-3)
}
/* === at: Ende Kopf und Fuss === */

/* === at: Formulare (erzeugt, nicht von Hand aendern) === */
/* 🔴 Spezifitaet. Das Child-Theme bringt aus dem Baukasten Regeln wie
   `.wpcf7 input[type="text"]{border:1px solid var(--base);border-radius:10px;
   color:#fff}` mit - Spezifitaet (0,2,1). Die globale Klasse `.at-input`
   allein (0,1,0) verliert dagegen, die Felder blieben Kaesten. Deshalb hier
   Element + Klasse im Formularkontext, und weil der Block ans Dateiende
   geschrieben wird, gewinnt er bei Gleichstand. Der Bestand bleibt unangetastet. */
.dwp-form input.at-input,.dwp-form select.at-input,.dwp-form textarea.at-input{
  width:100%;padding:14px 14px;border:0;border-bottom:1px solid
  rgba(var(--at-ton,198,166,103),.45);border-radius:2px 2px 0 0;
  background:rgba(19,35,53,.045);
  font-family:var(--gp-font--karla);font-size:1.0625rem;line-height:1.4;
  font-weight:400;color:var(--contrast);outline:none;margin-top:0;
  transition:border-color .35s ease}
.dwp-form input.at-input:focus,.dwp-form select.at-input:focus,
.dwp-form textarea.at-input:focus{
  border-bottom-color:rgb(var(--at-ton,198,166,103));outline:none;
  background:rgba(19,35,53,.075)}
/* 25.09.2026, Maik: Felder waren "schlicht, stilvoll ... allerdings genauso
   schwer erkennbar". Ein zarter Grauschimmer (4,5 %, beim Fokus 7,5 %)
   macht die Flaeche sichtbar, die Unterstrichlinie bleibt das Hauptmerkmal. */
.dwp-form input.at-input::placeholder,.dwp-form textarea.at-input::placeholder{
  color:var(--contrast-3)}
.dwp-form label{display:flex;flex-direction:column;gap:9px;
  font-family:var(--gp-font--karla);font-size:.9375rem;line-height:1.4;
  font-weight:400;color:var(--contrast-2);min-width:0;padding:0;margin:0}
.dwp-form .wpcf7-list-item{margin:0 1.4em 0 0}
.dwp-form .wpcf7-list-item-label{font-size:1.0625rem;color:var(--contrast)}
.dwp-form .wpcf7-radio,.dwp-form .wpcf7-checkbox{display:flex;flex-wrap:wrap;
  gap:6px 0;padding-top:8px}
/* Gruppen aus [checkbox]/[radio]: CF7 legt mit `use_label_element` je Option
   ein eigenes <label> an. Ein aeusseres <label> darum waere verschachtelt
   ("Multiple form controls are in a single label element"), deshalb traegt die
   Gruppe ein <div role="group"> und die Beschriftung ein <span>. Optik bleibt
   die des Feldlabels. */
.dwp-form .at-form__gruppe{display:flex;flex-direction:column;gap:9px;
  min-width:0;padding:0;margin:0}
.dwp-form .at-form__legende{font-family:var(--gp-font--karla);font-size:.9375rem;
  line-height:1.4;font-weight:400;color:var(--contrast-2)}
/* Die Spaltenregel oben gilt nur dem aeusseren Feldlabel. Die Optionslabels
   von CF7 setzen Schalter und Text nebeneinander, nicht uebereinander. */
.dwp-form .wpcf7-list-item label{display:inline-flex;flex-direction:row;
  align-items:center;gap:8px;font-size:1.0625rem;line-height:1.4;
  color:var(--contrast)}
.dwp-form .wpcf7-list-item input[type="radio"],
.dwp-form .wpcf7-list-item input[type="checkbox"]{
  accent-color:rgb(var(--at-ton,198,166,103));margin:0;flex:none}
.dwp-form select.at-input{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 12px top 24px,right 6px top 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.dwp-form textarea.at-input{resize:vertical}
/* Pflichtsternchen in der Bereichsfarbe, wie im Entwurf. */
.dwp-form label{--at-stern:rgb(var(--at-ton,198,166,103))}
.at-form__hinweis{margin:26px 0 22px;font-family:var(--gp-font--karla);
  font-size:.875rem;line-height:1.6;color:var(--contrast-2)}
.at-form__hinweis a{color:var(--accent-2);text-decoration:underline}
/* 28.09.2026, Mobilpruefung: das <small> im Hinweis schrumpfte die 14 px
   auf 10,5 px - Datenschutz-Link kaum lesbar und schwer zu treffen. */
.at-form__hinweis small{font-size:inherit}
/* Vorspann ueber dem Formular (A4.5): setzt die Zustaendigkeit, bevor
   jemand ausfuellt. Seit 25.09.2026 zarter Goldgrund statt linker
   Goldkante - Antje gefallen die senkrechten Striche nicht. */
.at-form__vorspann{margin:0 0 28px;padding:14px 18px;
  background-color:rgba(198,166,103,.1);
  font-family:var(--gp-font--karla);font-size:1rem;line-height:1.65;
  color:var(--contrast-2)}
.at-form__vorspann a{color:var(--accent-2);text-decoration:underline}
/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Feld zum Ausfuellen.
   Kein display:none - manche Bots erkennen das; ausserhalb des Sichtfelds. */
.at-form__falle{position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden}
.wpcf7 input[type="submit"].at-form__submit{border:0;border-radius:0;
  background-color:var(--accent);color:var(--navy);
  font-family:var(--gp-font--karla);font-size:.6875rem;font-weight:500;
  line-height:1;letter-spacing:.12em;text-transform:uppercase;
  padding:17px 34px;cursor:pointer;transition:background-color .35s ease}
.wpcf7 input[type="submit"].at-form__submit:is(:hover,:focus){
  background-color:var(--accent-3);color:var(--navy)}
.wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:14px 16px;
  border-width:1px;font-family:var(--gp-font--karla);font-size:.9375rem}
/* === at: Ende Formulare === */

/* === at: Opt-in externe Inhalte (erzeugt, nicht von Hand aendern) === */
.embed-privacy-container{border:1px solid rgba(198,166,103,.34);background-color:var(--navy,#0b1d2e);background-size:cover;background-position:center}
.embed-privacy-container .embed-privacy-overlay{background:rgba(11,29,46,.86);color:var(--base,#f4efe6);padding:clamp(14px,2.2vw,28px);transition:background-color .2s ease}
.embed-privacy-container.is-disabled:hover{border-color:rgb(198,166,103)}
.embed-privacy-container.is-disabled:hover .embed-privacy-overlay{background:rgba(11,29,46,.78)}
.embed-privacy-container .embed-privacy-inner{max-width:34em}
.embed-privacy-container .embed-privacy-overlay p{font-size:.9375rem;line-height:1.55;margin:0 0 .7em;color:var(--base,#f4efe6)}
.embed-privacy-container .embed-privacy-overlay a{color:rgb(198,166,103);text-decoration:underline;text-underline-offset:3px}
.embed-privacy-container .embed-privacy-overlay a:hover,.embed-privacy-container .embed-privacy-overlay a:focus{color:var(--base,#f4efe6)}
.embed-privacy-container .embed-privacy-label{font-size:.8125rem;letter-spacing:.02em}
.embed-privacy-container .embed-privacy-input{accent-color:rgb(198,166,103);margin-right:.5em}
.embed-privacy-container .embed-privacy-footer{font-size:.8125rem;line-height:1.5;padding:0 clamp(14px,2.2vw,28px) 12px}
.embed-privacy-container .embed-privacy-footer a{color:rgb(198,166,103)}
.embed-privacy-container .embed-privacy-logo{opacity:.9}
@media (max-width:599px){
.embed-privacy-container .embed-privacy-overlay p{font-size:.8125rem;line-height:1.45;margin-bottom:.5em}
.embed-privacy-container .embed-privacy-footer{font-size:.75rem}
}
/* === at: Ende Opt-in === */