/*
Theme Name: peitschenherz
Theme URI: https://peitschenherz.de
Author: Markus Spätling
Description: Schlankes Theme fuer peitschenherz.de — ohne externe Ressourcen,
 ohne Tracking, ohne Cookies ausser Login und Altersbestaetigung.
Version: 1.8.0
License: GPLv2 or later
Text Domain: ph
*/

/* ============================================================
   peitschenherz — CI und Seitengeruest

   Die Farbe steckt an genau einer Stelle: den Variablen in :root.
   Dunkel ist die Voreinstellung, hell kommt ueber prefers-color-scheme.

   Keine externen Schriften (Google-Fonts-Urteil LG Muenchen I),
   kein CDN, keine Cookies, kein Tracking — daraus folgt, dass die
   Seite ohne Einwilligungsbanner auskommt.

   Dieselbe Datei benutzt spaeter das WordPress-Theme. Was hier
   statisch aussieht, muss dort genauso aussehen.
   ============================================================ */

:root{
  --bg:#141013; --bg-2:#1e181c; --fg:#ece6e9; --muted:#a4979e;
  --akzent:#a4243b; --akzent-hell:#c8465e; --beige:#c9a86a;
  --linie:#332a2f; --warnung:#d4762a;
  --raum:clamp(1rem,4vw,2.5rem);
  --serif:Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#faf7f8; --bg-2:#f0eaec; --fg:#1c161a; --muted:#5d5257;
    --akzent:#8c1d31; --akzent-hell:#a4243b; --beige:#8a6f3c;
    --linie:#ddd2d6;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
     font:1.05rem/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}

/* Deutsche Komposita sind die Hauptfalle dieser Seite: „Altersbestaetigung"
   und „Nutzungsbedingungen" sprengen bei 320 px sonst die Spalte.
   Die hyphens-Regeln sind deshalb nicht kosmetisch. */
h1,h2,h3{font-family:var(--serif);line-height:1.2;
         hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(1.7rem,5vw,2.6rem)}
p,li{hyphens:auto;overflow-wrap:break-word}
a{color:var(--akzent-hell)}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--raum)}

h2{font-size:clamp(1.3rem,3.4vw,1.9rem)}
h3{font-size:1.15rem}
h1,h2,h3{font-weight:400;margin:0 0 .5em}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Sprungmarke ---------- */

/* Nur bei Fokus sichtbar — sonst aus dem Blickfeld, aber im Tab-Fluss. */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;
        background:var(--akzent);color:#fff;padding:10px 16px;
        text-decoration:none}
.sprung:focus{left:0}

/* ---------- Kopf ---------- */

.kopf{border-bottom:1px solid var(--linie);background:var(--bg-2);
      position:relative}
/* ACHTUNG: Das Element traegt "wrap kopf-in". Eine padding-Kurzschreibweise
   wuerde den seitlichen Abstand von .wrap auf 0 setzen — der Kopf klebte
   dann am Bildschirmrand, waehrend der Rest der Seite Abstand haelt.
   Und ein max-width hier liesse .wrap den Block per margin:0 auto falsch
   zentrieren. Deshalb ausschliesslich padding-block. */
.kopf-in{display:flex;align-items:center;gap:1.25rem;
         flex-wrap:wrap;padding-block:.9rem}

.marke{font-family:var(--serif);font-size:1.35rem;color:var(--fg);
       text-decoration:none;margin-right:auto;letter-spacing:.01em}
.marke:hover{color:var(--akzent-hell)}

.menue-knopf{display:none;background:none;border:1px solid var(--linie);
             color:var(--fg);border-radius:3px;padding:10px 14px;
             font:inherit;font-size:.95rem;cursor:pointer;min-height:44px}
.menue-knopf:hover{border-color:var(--akzent-hell)}

#hauptmenue{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center}
#hauptmenue a{color:var(--muted);text-decoration:none;font-size:.95rem;
              padding:6px 0;border-bottom:1px solid transparent}
#hauptmenue a:hover{color:var(--fg)}
#hauptmenue a[aria-current="page"]{color:var(--fg);
                                   border-bottom-color:var(--akzent-hell)}

@media (max-width:900px){
  .menue-knopf{display:block}
  #hauptmenue{display:none;width:100%;flex-direction:column;
              align-items:stretch;gap:0;padding-bottom:.5rem}
  #hauptmenue.offen{display:flex}
  #hauptmenue a{padding:12px 0;border-bottom:1px solid var(--linie)}
}

/* ---------- Abschnitte und Textbreite ---------- */

main > section,main > article{padding-block:clamp(2rem,5vw,3.5rem)}
main > section + section,main > article + section{border-top:1px solid var(--linie)}
main > section > *,main > article > *{max-width:70ch}
ul,ol{padding-left:1.15em}
li{margin:.3em 0}

/* ---------- Knoepfe ---------- */

.knopf{display:inline-block;padding:12px 22px;border-radius:3px;
       border:1px solid var(--linie);color:var(--fg);background:none;
       font:inherit;font-size:.95rem;text-decoration:none;cursor:pointer}
.knopf:hover{border-color:var(--akzent-hell);color:var(--fg)}
.knopf-haupt{background:var(--akzent);border-color:var(--akzent);color:#fff}
.knopf-haupt:hover{background:var(--akzent-hell);border-color:var(--akzent-hell);
                   color:#fff}

/* ---------- Hinweise und Warnungen ---------- */

.hinweis{color:var(--muted);font-size:.92rem}

/* Steht immer in einem .wrap oder Abschnitt — Seitenabstand kommt von dort. */
.ph-hinweis{border:1px solid var(--linie);border-left:3px solid var(--akzent);
            background:var(--bg-2);border-radius:3px;
            padding:1rem 1.2rem;margin:1.5rem 0}
.ph-hinweis > :first-child{margin-top:0}
.ph-hinweis > :last-child{margin-bottom:0}

/* Fuer Praktiken ohne sichere Ausfuehrung (z. B. Atemkontrolle):
   deutlich abgesetzt, Rand in --warnung. */
.warnkasten{border:1px solid var(--warnung);border-left:4px solid var(--warnung);
            border-radius:3px;background:var(--bg-2);
            padding:1rem 1.2rem;margin:1.75rem 0}
.warnkasten h2,.warnkasten h3{color:var(--warnung);margin-top:0}
.warnkasten > :last-child{margin-bottom:0}

/* ---------- Formulare ---------- */

.ph-formular{display:flex;flex-direction:column;gap:.45rem;max-width:38rem;
             margin:1.5rem 0}
.ph-formular label{font-size:.95rem;margin-top:.75rem}
.ph-formular input[type=text],.ph-formular input[type=email],
.ph-formular input[type=password],.ph-formular input[type=date],
.ph-formular select,.ph-formular textarea{
  width:100%;padding:11px 12px;font:inherit;color:var(--fg);
  background:var(--bg-2);border:1px solid var(--linie);border-radius:3px}
.ph-formular textarea{min-height:9rem;resize:vertical}
.ph-formular .hinweis{margin:.15rem 0 0}
.ph-formular .knopf{align-self:flex-start;margin-top:1.25rem}

/* Ankreuzfelder stehen neben ihrem Text, nicht darueber. */
.ph-haken{display:flex;align-items:flex-start;gap:.65rem;
          font-size:.95rem;line-height:1.5}
.ph-haken input[type=checkbox],.ph-haken input[type=radio]{
  width:22px;height:22px;flex:none;margin:0;accent-color:var(--akzent)}

.ph-fehler{border-left:3px solid var(--warnung);background:var(--bg-2);
           padding:.7rem 1rem;margin:0 0 .5rem;color:var(--fg)}

/* ---------- Kartenraster ---------- */

/* min() statt fester 16rem — sonst sprengt eine Karte 320-px-Displays.
   max-width:none hebt die 70ch-Textbreite der Abschnitte auf: die gilt
   fuer Fliesstext, nicht fuer das Raster — sonst blieben auf breiten
   Bildschirmen nur zwei Spalten. */
.karten{display:grid;gap:1.25rem;list-style:none;padding:0;max-width:none;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.karten > *{margin:0}
.karten a.karte,.karten .karte{display:block;height:100%;
  background:var(--bg-2);border:1px solid var(--linie);border-radius:4px;
  padding:1.25rem 1.35rem;color:inherit;text-decoration:none;
  transition:border-color .2s ease}
.karten a.karte:hover{border-color:var(--akzent-hell)}
.karten .karte h2,.karten .karte h3{margin:0 0 .4em;font-size:1.15rem}
.karten .karte p{margin:0;color:var(--muted);font-size:.96rem}

/* ---------- Blog ---------- */

/* "wrap beitrag": wieder nur padding-block, Breite an die Kinder. */
.beitrag{padding-block:clamp(2rem,5vw,3.5rem)}
.beitrag > *{max-width:70ch}
.beitrag h2{margin-top:1.6em}

.beitrag-karte{padding-block:1.5rem;border-bottom:1px solid var(--linie)}
.beitrag-karte > *{max-width:70ch}
.beitrag-karte h2{margin:0 0 .25em;font-size:1.3rem}
.beitrag-karte h2 a{text-decoration:none}
.beitrag-karte h2 a:hover{text-decoration:underline}

.beitrag-meta{color:var(--muted);font-size:.88rem;margin:0 0 .8em}

/* ---------- Glossar ---------- */

dl{margin:1.5rem 0}
dt{font-family:var(--serif);font-size:1.1rem;margin-top:1.4rem;
   padding-top:1rem;border-top:1px solid var(--linie)}
dt:first-of-type{margin-top:0;padding-top:0;border-top:0}
dd{margin:.35rem 0 0;color:var(--fg)}
dd + dd{margin-top:.25rem}

/* ---------- Fuss ---------- */

.fuss{border-top:1px solid var(--linie);background:var(--bg-2);
      margin-top:clamp(2rem,5vw,3.5rem)}
/* Gleiche Falle wie im Kopf: "wrap fuss-in" — nur padding-block,
   kein max-width. */
.fuss-in{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;
         align-items:flex-start;justify-content:space-between;
         padding-block:1.75rem;font-size:.9rem;color:var(--muted)}
.fuss-in p{margin:0}
.fuss-in nav{display:flex;flex-wrap:wrap;gap:0 1.25rem}
/* Eigenstaendige Navigationslinks brauchen eine antippbare Hoehe
   (WCAG 2.5.8: mindestens 24 px) — im Fliesstext gilt das nicht. */
.fuss-in nav a{color:var(--muted);text-decoration:none;
               display:inline-block;padding:8px 0}
.fuss-in nav a:hover{color:var(--fg);text-decoration:underline}

.fuss-hinweis{width:100%;margin:0;padding-top:.5rem;
              border-top:1px solid var(--linie);color:var(--muted);
              font-size:.86rem;max-width:70ch}


/* ---------- Block-Ausgabe (Inhalte sind native Gutenberg-Bloecke) ---------- */
.wp-block-group{margin-block:1.6rem}
.wp-block-list{padding-left:1.3rem}
.wp-block-list li{margin-block:.35rem}
.wp-block-quote{border-left:3px solid var(--akzent);margin-left:0;
                padding-left:1.1rem;color:var(--muted);font-style:normal}
.wp-block-separator{border:0;border-top:1px solid var(--linie);margin-block:2.2rem}
.wp-block-table table{width:100%;border-collapse:collapse}
.wp-block-table td,.wp-block-table th{border:1px solid var(--linie);padding:.5rem .7rem;
                                      text-align:left;vertical-align:top}
.wp-block-columns{gap:1.4rem}

/* Block-Stilvariante "Warnkasten" (register_block_style in functions.php) */
.wp-block-group.is-style-warnkasten{border:1px solid var(--warnung);
  border-left:4px solid var(--warnung);border-radius:3px;padding:1.1rem 1.3rem;
  background:var(--bg-2)}
.wp-block-group.is-style-warnkasten :is(h2,h3){color:var(--warnung);margin-top:0}
.wp-block-group.is-style-warnkasten > :last-child{margin-bottom:0}

/* Block-Stilvariante "Karten" auf core/columns */
.wp-block-columns.is-style-karten .wp-block-column{border:1px solid var(--linie);
  border-radius:3px;padding:1.1rem 1.2rem;background:var(--bg-2)}
.wp-block-columns.is-style-karten .wp-block-column > :first-child{margin-top:0}
.wp-block-columns.is-style-karten .wp-block-column > :last-child{margin-bottom:0}

/* Der Editor zentriert Inhalte ueber theme.json (contentSize). Damit die
   Vorlagen dieselbe Breite halten, bekommt <main> dieselbe Regel. */
main > .wp-block-group,
main > .wp-block-heading,
main > p,
main > ul,
main > ol,
main > figure{max-width:70ch;margin-inline:auto;
              padding-inline:var(--raum);box-sizing:content-box}
main > .alignwide{max-width:1100px}

/* ---------- Textbausteine der Inhaltsseiten ---------- */
.fuehrung{font-size:1.18rem;line-height:1.55;color:var(--fg);
          border-left:3px solid var(--akzent);padding-left:1rem;margin-block:1.4rem}
.begriffe{list-style:none;padding-left:0}
.begriffe li{border-bottom:1px solid var(--linie);padding:.7rem 0;margin:0}
.begriffe li:last-child{border-bottom:0}
.begriffe strong{color:var(--beige)}

/* ==========================================================================
   Gestaltung — Aufwertung 2026-08-10
   Ziel: aus einer reinen Textwueste eine Seite mit Haltung machen, ohne
   externe Ressourcen und ohne das Thema anzuueglich zu bebildern.
   ========================================================================== */

/* ---- Flaeche: leichte Tiefe statt flachem Einfarbig ---- */
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--akzent) 14%, transparent), transparent 70%),
    radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--beige) 7%, transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
@media (prefers-color-scheme: light){
  body{
    background:
      radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--akzent) 8%, transparent), transparent 70%),
      radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--beige) 10%, transparent), transparent 70%),
      var(--bg);
  }
}

/* ---- Kopfzeile ---- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);
}
.marke{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.marke-zeichen{width:34px;height:34px;flex:0 0 auto;overflow:visible}
.mz-herz{fill:none;stroke:var(--akzent-hell);stroke-width:3.4;
         stroke-linecap:round;stroke-linejoin:round}
.mz-lasche{fill:none;stroke:var(--beige);stroke-width:2.6;stroke-linecap:round}
.marke-wort{font-family:var(--serif);font-size:1.42rem;letter-spacing:.02em;color:var(--fg)}
.marke:hover .mz-herz{stroke:var(--beige)}
.marke:hover .mz-lasche{stroke:var(--akzent-hell)}

#hauptmenue a{
  text-decoration:none;color:var(--muted);
  font-size:.87rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem 0;position:relative;
}
#hauptmenue a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--akzent-hell);transition:right .22s ease;
}
#hauptmenue a:hover{color:var(--fg)}
#hauptmenue a:hover::after{right:0}
#hauptmenue .current-menu-item > a{color:var(--fg)}
#hauptmenue .current-menu-item > a::after{right:0;background:var(--akzent)}
.nav-konto{color:var(--beige) !important}

/* ---- Typografie ---- */
h1{letter-spacing:-.015em}
main h2{
  font-size:clamp(1.35rem,3.2vw,1.75rem);
  margin-top:2.6rem;padding-top:.9rem;position:relative;
}
main h2::before{
  content:"";position:absolute;top:0;left:0;width:2.6rem;height:2px;
  background:linear-gradient(90deg,var(--akzent),transparent);
}
main h3{font-size:1.12rem;letter-spacing:.01em}
main p a,main li a{
  color:var(--akzent-hell);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb, var(--akzent-hell) 45%, transparent);
}
main p a:hover,main li a:hover{color:var(--beige);text-decoration-color:var(--beige)}

.fuehrung{
  font-size:clamp(1.1rem,2.4vw,1.28rem);line-height:1.55;
  color:var(--fg);border-left:0;padding-left:0;
  margin-block:1.2rem 2rem;max-width:62ch;
}

/* ---- Hero ---- */
.hero{
  position:relative;
  margin-block:0 2.4rem !important;
  padding-block:clamp(2.6rem,7vw,4.6rem) clamp(2rem,5vw,3.2rem);
  border-bottom:1px solid var(--linie);
}
.hero > *{max-width:60ch}
.hero h1{
  font-size:clamp(2.1rem,6.6vw,3.5rem);line-height:1.06;margin:0 0 1.1rem;
}
.hero .fuehrung{color:var(--muted);margin-bottom:1.8rem}
.hero-zeichen{
  position:absolute;right:-1rem;top:50%;transform:translateY(-50%);
  width:min(300px,34vw);opacity:.13;pointer-events:none;
}
.hero-zeichen .mz-herz{stroke:var(--akzent-hell);stroke-width:2.2}
.hero-zeichen .mz-lasche{stroke:var(--beige);stroke-width:1.8}
@media (max-width:700px){ .hero-zeichen{display:none} }

/* ---- Themenkarten ---- */
.themenkarten{
  display:grid;gap:1rem;margin-block:1.8rem 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.themenkarte{
  display:block;text-decoration:none;position:relative;
  border:1px solid var(--linie);border-radius:4px;
  background:color-mix(in srgb, var(--bg-2) 75%, transparent);
  padding:1.15rem 1.25rem 1.3rem;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.themenkarte::before{
  content:"";position:absolute;inset:0 auto auto 0;height:2px;width:2.4rem;
  background:var(--akzent);border-radius:4px 0 0 0;transition:width .25s ease;
}
.themenkarte:hover{
  border-color:color-mix(in srgb, var(--akzent-hell) 55%, var(--linie));
  transform:translateY(-2px);
  background:var(--bg-2);
}
.themenkarte:hover::before{width:100%}
.themenkarte b{
  display:block;font-family:var(--serif);font-size:1.16rem;
  color:var(--fg);margin-bottom:.4rem;
}
.themenkarte span{display:block;color:var(--muted);font-size:.96rem;line-height:1.5}
.themenkarte::after{
  content:"→";position:absolute;right:1.1rem;bottom:.9rem;
  color:var(--akzent-hell);opacity:0;transform:translateX(-4px);
  transition:opacity .2s ease, transform .2s ease;
}
.themenkarte:hover::after{opacity:1;transform:translateX(0)}

/* ---- Listen mit Akzent statt Standardpunkt ---- */
main .wp-block-list:not(.begriffe){list-style:none;padding-left:0}
main .wp-block-list:not(.begriffe) > li{
  position:relative;padding-left:1.4rem;margin-block:.5rem;
}
main .wp-block-list:not(.begriffe) > li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.42rem;height:.42rem;transform:rotate(45deg);
  background:var(--akzent);
}

/* ---- Begriffsliste ---- */
.begriffe li{padding:.85rem 0}
.begriffe strong{display:block;margin-bottom:.15rem;
                 font-family:var(--serif);font-size:1.04rem;color:var(--beige)}

/* ---- Warnkasten ---- */
.wp-block-group.is-style-warnkasten{
  background:color-mix(in srgb, var(--warnung) 9%, var(--bg-2));
  border-color:color-mix(in srgb, var(--warnung) 55%, transparent);
  border-left-width:4px;border-radius:4px;
}

/* ---- Trenner als Ornament ---- */
main .wp-block-separator{
  border:0;height:auto;overflow:visible;text-align:center;margin-block:2.6rem;
}
main .wp-block-separator::before{
  content:"◆";color:var(--akzent);font-size:.7rem;letter-spacing:1.2rem;
  opacity:.75;display:inline-block;text-indent:1.2rem;
}

/* ---- Knoepfe ---- */
.knopf{border-radius:3px;letter-spacing:.03em;transition:all .2s ease}
.knopf-haupt:hover{transform:translateY(-1px)}

/* ---- Fusszeile ---- */
.fuss{border-top:1px solid var(--linie);background:color-mix(in srgb, var(--bg-2) 60%, transparent);margin-top:3.5rem}
.fuss a{color:var(--muted);text-decoration:none;font-size:.9rem}
.fuss a:hover{color:var(--akzent-hell)}
.fuss-hinweis{color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .themenkarte,.themenkarte::before,.themenkarte::after,
  #hauptmenue a::after,.knopf{transition:none}
  .themenkarte:hover{transform:none}
}

/* ---- Hero-Ornament per CSS, damit der Inhalt frei von SVG bleibt ---- */
.hero{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 38.5C11 30 5.5 23.5 5.5 17.6A8.4 8.4 0 0 1 24 13a8.4 8.4 0 0 1 18.5 4.6C42.5 23.5 37 30 24 38.5' fill='none' stroke='%23c8465e' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M24 38.5c2.5 4 7 6 11 4.5 3.6-1.3 4-5.4 1-6.6' fill='none' stroke='%23c9a86a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right -1.5rem center;
  background-size:min(280px,32vw);
  opacity:1;
}
.hero > *{position:relative}
@media (max-width:760px){ .hero{background-image:none} }

/* ---- Karten als native Spalten-Bloecke (im Editor bearbeitbar) ---- */
main > .wp-block-columns{
  max-width:1100px;margin-inline:auto;padding-inline:var(--raum);
  box-sizing:border-box;margin-block:2rem;
}
.wp-block-columns.is-style-karten{gap:1rem}
.wp-block-columns.is-style-karten .wp-block-column{
  position:relative;overflow:hidden;
  border:1px solid var(--linie);border-radius:4px;
  background:color-mix(in srgb, var(--bg-2) 75%, transparent);
  padding:1.2rem 1.3rem 1.35rem;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.wp-block-columns.is-style-karten .wp-block-column::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:2.4rem;
  background:var(--akzent);transition:width .28s ease;
}
.wp-block-columns.is-style-karten .wp-block-column:hover{
  border-color:color-mix(in srgb, var(--akzent-hell) 55%, var(--linie));
  background:var(--bg-2);transform:translateY(-2px);
}
.wp-block-columns.is-style-karten .wp-block-column:hover::before{width:100%}
.wp-block-columns.is-style-karten h3{
  margin:0 0 .45rem;font-size:1.14rem;
}
.wp-block-columns.is-style-karten h3 a{
  color:var(--fg);text-decoration:none;
}
.wp-block-columns.is-style-karten h3 a::after{content:"";position:absolute;inset:0}
.wp-block-columns.is-style-karten .wp-block-column:hover h3 a{color:var(--akzent-hell)}
.wp-block-columns.is-style-karten p{
  margin:0;color:var(--muted);font-size:.95rem;line-height:1.5;
}
@media (prefers-reduced-motion: reduce){
  .wp-block-columns.is-style-karten .wp-block-column{transition:none}
  .wp-block-columns.is-style-karten .wp-block-column:hover{transform:none}
}

/* ---- Seitenkopf der Unterseiten (ohne Hero) ---- */
main > .wp-block-heading:first-child{
  margin-top:clamp(2rem,5vw,3.2rem);
  padding-bottom:.9rem;
  border-bottom:1px solid var(--linie);
}
main > .wp-block-heading:first-child + .fuehrung{margin-top:1.4rem}

/* ==========================================================================
   Korrekturen nach der ersten Sichtprüfung (2026-08-10)
   ========================================================================== */

/* ---- 1. Navigation war eine senkrechte Aufzaehlung mit Punkten ---- */
#hauptmenue{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
#hauptmenue ul{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;
  list-style:none;margin:0;padding:0;
}
#hauptmenue li{margin:0;padding:0}
#hauptmenue li::before{content:none}
.kopf-in{justify-content:space-between}

.fuss-in nav ul{
  display:flex;flex-wrap:wrap;gap:1.2rem;list-style:none;margin:0;padding:0;
}
.fuss-in nav li{margin:0;padding:0}
.fuss-in nav li::before{content:none}

/* ---- 2. Eine Spaltenbreite fuer ALLE Bloecke ----
   Vorher stand die Breite in `ch`, das haengt an der Schriftgroesse: Ueberschriften
   bekamen dadurch eine breitere Box als Absaetze und begannen sichtbar weiter links.
   Jetzt eine feste Breite in rem, fuer alle gleich. */
:root{ --spalte:46rem; }
main > .wp-block-heading,
main > p,
main > ul,
main > ol,
main > figure,
main > .wp-block-group,
main > .wp-block-separator,
main > .wp-block-quote,
main > .wp-block-table{
  max-width:var(--spalte);
  margin-inline:auto;
  padding-inline:var(--raum);
  box-sizing:content-box;
}
main > .wp-block-columns{max-width:calc(var(--spalte) + 22rem)}
.fuehrung{max-width:none}
.hero > *{max-width:none}

/* ---- 3. Hero: Zierschnur ueberlappte die Ueberschrift ---- */
.hero{background-image:none;overflow:hidden}
.hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-3.5rem;top:50%;transform:translateY(-50%);
  width:min(230px,26vw);aspect-ratio:1;
  opacity:.12;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 38.5C11 30 5.5 23.5 5.5 17.6A8.4 8.4 0 0 1 24 13a8.4 8.4 0 0 1 18.5 4.6C42.5 23.5 37 30 24 38.5' fill='none' stroke='%23c8465e' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M24 38.5c2.5 4 7 6 11 4.5 3.6-1.3 4-5.4 1-6.6' fill='none' stroke='%23c9a86a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero h1,.hero p{position:relative;z-index:1;max-width:min(100%,34rem)}
@media (max-width:860px){ .hero::after{display:none} }

/* ---- 4. Hellmodus: Karten und Flaechen waren fast unsichtbar ---- */
@media (prefers-color-scheme: light){
  .wp-block-columns.is-style-karten .wp-block-column{
    background:#fff;
    border-color:color-mix(in srgb, var(--akzent) 22%, var(--linie));
    box-shadow:0 1px 2px rgba(28,22,26,.05);
  }
  .wp-block-columns.is-style-karten .wp-block-column:hover{
    background:#fff;box-shadow:0 6px 18px rgba(140,29,49,.10);
  }
  .kopf{background:color-mix(in srgb, var(--bg) 92%, transparent)}
  .fuss{background:color-mix(in srgb, var(--bg-2) 70%, transparent)}
  .hero::after{opacity:.16}
}

/* ---- Feinschliff nach der zweiten Sichtprüfung ---- */

/* Das Herz wurde am rechten Rand abgeschnitten. Kein overflow:hidden mehr;
   stattdessen sitzt es weiter aussen, neben dem Text statt darunter. */
.hero{overflow:visible}
.hero::after{
  right:-6.5rem;
  width:min(200px,22vw);
  opacity:.14;
}
@media (max-width:1150px){ .hero::after{right:-2rem;opacity:.10} }
@media (max-width:860px){ .hero::after{display:none} }

/* Der Akzentstrich sass um die Spaltenpolsterung neben dem Text.
   Die Bloecke haben padding-inline:var(--raum) — der Strich muss dieselbe
   Einrueckung haben, sonst steht er sichtbar zu weit links. */
main h2::before{left:var(--raum)}

/* ---- Mobil-Navigation wiederherstellen ----
   Die unbedingte Regel `#hauptmenue{display:flex}` weiter oben hat das
   Ausblenden aus dem 900px-Block ueberschrieben: Auf dem Handy war das Menue
   dauerhaft ausgeklappt, obwohl der Menue-Knopf danebenstand. */
@media (max-width:900px){
  #hauptmenue{
    display:none;width:100%;flex-direction:column;align-items:stretch;
    gap:0;padding-bottom:.5rem;
  }
  #hauptmenue.offen{display:flex}
  #hauptmenue ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  #hauptmenue a{
    padding:12px 0;border-bottom:1px solid var(--linie);
    display:block;width:100%;
  }
  #hauptmenue a::after{content:none}
  .kopf-in{flex-wrap:wrap}
}

/* ==========================================================================
   Korrektur 2026-08-10 (zweite Runde)
   ========================================================================== */

/* ---- FEHLER: `.fuehrung{max-width:none}` galt fuer JEDE Seite ----
   Gedacht war es nur fuer den Hero. Folge: Der Vorspann jeder Unterseite
   sprengte die Spalte und klebte am linken Fensterrand, waehrend der Rest
   mittig stand. Jetzt ausschliesslich innerhalb der Kopfbereiche. */
.fuehrung{max-width:var(--spalte)}
.hero .fuehrung,
.seitenkopf .fuehrung{max-width:none}

/* ---- Kopfbereiche als durchgehendes Band ----
   Gibt jeder Seite oben einen sichtbaren Anfang, statt nur einer Zeile Text
   in viel Weissraum. */
main > .wp-block-group.hero,
main > .wp-block-group.seitenkopf{
  max-width:none;margin-inline:0;padding-inline:0;
  border-bottom:1px solid var(--linie);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--akzent) 8%, transparent), transparent 85%);
}
.hero > *,
.seitenkopf > *{
  max-width:var(--spalte);margin-inline:auto;
  padding-inline:var(--raum);box-sizing:content-box;
}
.seitenkopf{
  padding-block:clamp(1.9rem,4.5vw,3rem) clamp(1.2rem,2.5vw,1.9rem);
  margin-block:0 2.2rem !important;position:relative;
}
.seitenkopf h1{
  margin:0;font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.1;
  border-bottom:0;padding-bottom:0;
}
.seitenkopf .fuehrung{margin:1rem auto 0;color:var(--muted)}

/* Die alte Sonderbehandlung der ersten Ueberschrift entfaellt — die h1 steckt
   jetzt im Kopfbereich. */
main > .wp-block-heading:first-child{
  margin-top:clamp(2rem,5vw,3.2rem);padding-bottom:0;border-bottom:0;
}

/* Ornament sitzt jetzt gegenueber der mittigen Spalte, nicht am Blockrand. */
.hero::after{
  right:calc(50% - min(46vw, 33rem));
  width:min(210px,20vw);
}
@media (max-width:1000px){ .hero::after{display:none} }

/* ---- FEHLER, dieselbe Falle wie beim Vorspann ----
   `padding-left:0` auf Listen und die `padding`-Kurzschreibweise im Warnkasten
   haben die Spaltenpolsterung (`padding-inline:var(--raum)`) ueberschrieben.
   Folge: Listen klebten am Fensterrand, Warnkaesten standen 5px versetzt.
   Regel fuer dieses Theme: In Bloecken, die direkt in <main> stehen, NIEMALS
   `padding` als Kurzform und niemals `padding-left:0` — immer `padding-block`
   plus ein ausdrueckliches `padding-inline:var(--raum)`. */
main > .wp-block-list:not(.begriffe),
main > .wp-block-list.begriffe{
  padding-inline:var(--raum);
}
main > .wp-block-group.is-style-warnkasten{
  padding-block:1.15rem;
  padding-inline:var(--raum);
}

/* ---- Hero-Text stand versetzt ----
   Eine fruehere Regel gab h1 und Absatz im Hero eine eigene Breite (34rem).
   Der Block wurde dadurch mittig gesetzt und begann sichtbar weiter rechts als
   alle anderen Bloecke. Jetzt dieselbe Spaltenbreite wie ueberall; stattdessen
   weicht das Ornament nach aussen aus. */
.hero h1,
.hero p{max-width:var(--spalte)}
.hero::after{right:calc(50% - min(48vw, 38rem))}

/* ---- Dieselbe Falle zum dritten Mal: `max-width:none` auf dem Vorspann ----
   In Hero und Seitenkopf hatte ich sie erneut gesetzt. Ergebnis: Der
   Einleitungssatz lief ueber die volle Breite, waehrend die Ueberschrift
   direkt darueber in der Spalte stand. Es gibt keinen Grund fuer eine
   Sonderbreite — der Vorspann folgt der Spalte wie alles andere. */
.hero .fuehrung,
.seitenkopf .fuehrung{max-width:var(--spalte)}

/* Der 4px-Akzentrand des Warnkastens schob den Text um 4px gegen den
   uebrigen Fliesstext. Die Polsterung links wird um die Randbreite gekuerzt,
   damit der Text buendig steht und der farbige Balken auf der Spaltenkante sitzt. */
main > .wp-block-group.is-style-warnkasten{
  padding-inline-start:calc(var(--raum) - 4px);
}

/* ---- Ursache der letzten Versetzung ----
   WordPress' "constrained layout" gibt den Kindern eines Gruppen-Blocks eine
   eigene Hoechstbreite aus theme.json und zentriert sie darin. Beim Warnkasten
   sass der Text dadurch 36px weiter rechts als der uebrige Fliesstext.
   theme.json wurde auf dieselbe Breite gezogen; zusaetzlich fuellen die Kinder
   des Warnkastens seine Box aus, statt darin zentriert zu werden. */
main > .wp-block-group.is-style-warnkasten > *{
  max-width:none;margin-inline:0;
}

/* ---- JOYclub-Verweise in der Fusszeile ---- */
.fuss-joyclub{
  width:100%;margin:.9rem 0 0;padding-top:.9rem;
  border-top:1px solid var(--linie);
  font-size:.88rem;line-height:1.9;color:var(--muted);
}
.fj-titel{color:var(--muted);margin-right:.35rem}
.fuss-joyclub a{
  color:var(--muted);text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--muted) 45%, transparent);
  text-underline-offset:.16em;
}
.fuss-joyclub a:hover{color:var(--akzent-hell);text-decoration-color:var(--akzent-hell)}
.fj-trenner{margin:0 .45rem;opacity:.55}
/* Kennzeichnung nach § 5a Abs. 4 UWG — muss lesbar sein, nicht versteckt. */
.fj-werbung{
  display:inline-block;margin-left:.5rem;padding:.1rem .45rem;
  border:1px solid var(--linie);border-radius:2px;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--beige);vertical-align:.08em;
}

/* ---- JOYclub-Banner in der Fusszeile ----
   Eigene Grafik in der Haus-CI statt einer fremden Bilddatei: kein Abruf bei
   einem Drittserver, keine Urheberrechtsfrage, und der Banner sieht aus, als
   gehoere er zur Seite. */
.jc-banner{
  width:100%;margin-top:1.4rem;
  display:flex;align-items:flex-start;gap:1rem;
  border:1px solid var(--linie);border-left:3px solid var(--akzent);
  border-radius:4px;padding:1rem 1.15rem;
  background:color-mix(in srgb, var(--bg-2) 70%, transparent);
}
.jc-zeichen{width:38px;height:38px;flex:0 0 auto;margin-top:.15rem;overflow:visible}
.jc-text{min-width:0}
.jc-kopf{
  margin:0 0 .2rem;font-family:var(--serif);font-size:1.08rem;color:var(--fg);
}
.jc-kopf strong{color:var(--akzent-hell);font-weight:inherit}
.jc-zeile{margin:0 0 .7rem;color:var(--muted);font-size:.9rem;line-height:1.45}
.jc-links{margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.jc-knopf{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .8rem;border:1px solid var(--linie);border-radius:3px;
  color:var(--fg);text-decoration:none;font-size:.86rem;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.jc-knopf:hover{
  border-color:var(--akzent-hell);color:var(--akzent-hell);
  background:color-mix(in srgb, var(--akzent) 10%, transparent);
}
/* Kennzeichnung nach § 5a Abs. 4 UWG — sichtbar, nicht versteckt. */
.jc-werbung{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--beige);border:1px solid var(--linie);border-radius:2px;
  padding:.05rem .3rem;
}
@media (max-width:560px){
  .jc-banner{flex-direction:column;gap:.7rem}
  .jc-links{width:100%}
  .jc-knopf{flex:1 1 auto;justify-content:center}
}
@media (prefers-color-scheme: light){
  .jc-banner{background:#fff}
}

/* Der Trennstrich ueber dem Fusszeilen-Hinweis lief wegen `max-width:70ch` nur
   bis zur halben Breite und sah nach Fehler aus. Der Banner darueber trennt
   ohnehin schon — der Strich entfaellt. */
.fuss-hinweis{border-top:0;padding-top:0;margin-top:1.1rem}

/* ---- Umschaltpunkt zum Mobilmenue angehoben ----
   Mit zehn Hauptpunkten plus „Anmelden" passte die Navigation zwischen 900 und
   1000 px nicht mehr in eine Zeile: Die Kopfzeile wuchs dort von 122 auf 168 px,
   weil „Anmelden" umbrach. Statt die Schrift zu verkleinern greift jetzt das
   Klappmenue frueher — ein sauberer Zustand statt eines halben. */
@media (max-width:1000px){
  .menue-knopf{display:block}
  #hauptmenue{
    display:none;width:100%;flex-direction:column;align-items:stretch;
    gap:0;padding-bottom:.5rem;
  }
  #hauptmenue.offen{display:flex}
  #hauptmenue ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  #hauptmenue a{padding:12px 0;border-bottom:1px solid var(--linie);display:block;width:100%}
  #hauptmenue a::after{content:none}
  .kopf-in{flex-wrap:wrap}
}