/* ============================================================
   wp.css — bildet die Standard-Blöcke des Editors auf das
   Stil-J2-Design ab. Grundlage bleibt site.css (unverändert
   aus der statischen Fassung übernommen).
   ============================================================ */

/* ---------- Menü: WordPress liefert ul/li ---------- */
aside nav ul{list-style:none;margin:0;padding:0;counter-reset:punkt}
aside nav li{counter-increment:punkt}
aside nav a::before{
  content:counter(punkt,decimal-leading-zero);
  font-family:Consolas,"Cascadia Mono",monospace;
  font-size:12px;color:#77828e;margin-right:14px;
}
aside nav .current-menu-item > a,
aside nav .current_page_item > a{color:#fff;font-weight:600}
aside nav .current-menu-item > a::before{color:var(--panel-akz)}

/* ---------- Inhaltsblöcke ---------- */
/* Überschriften der Ebene 2 werden automatisch nummerierte
   Abschnittsköpfe — der Seitentitel ist 01, die Zählung läuft weiter. */
.sekt{counter-reset:sekt 1}
.bloecke > h2{
  counter-increment:sekt;
  display:flex;align-items:baseline;gap:18px;
  font-size:26px;font-weight:600;letter-spacing:.01em;
  font-family:Bahnschrift,"DIN Alternate","Segoe UI Semibold","Segoe UI",sans-serif;
  margin:56px 0 26px;padding-top:44px;border-top:1px solid var(--haar);
}
.bloecke > h2::before{
  content:counter(sekt,decimal-leading-zero);
  font:12.5px Consolas,"Cascadia Mono",monospace;color:var(--mut);
}
.bloecke > h2::after{content:"";flex:1;height:1px;background:var(--haar)}
.bloecke > h2:first-child{margin-top:0;padding-top:0;border-top:none}
.bloecke h3{font-size:16.5px;font-weight:600;margin:26px 0 10px}

.bloecke > p{max-width:40em;margin-bottom:14px}
.bloecke > p.vorsatz{max-width:38em}
.bloecke ul:not([class]),.bloecke ol:not([class]){
  max-width:40em;margin:0 0 16px 22px;
}
.bloecke li{margin-bottom:6px}
.bloecke a{color:var(--blau);text-decoration:underline}
.bloecke a.knopf{color:inherit;text-decoration:none}

/* Tabellen (Block „Tabelle") im Planungsstil */
.bloecke figure.wp-block-table{margin:0 0 18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bloecke .wp-block-table table{
  width:100%;border-collapse:collapse;font-size:14px;
  background:var(--flaeche);border:1px solid var(--haar);
}
.bloecke .wp-block-table th{
  text-align:left;padding:10px 14px;border-bottom:2px solid var(--haar-stark);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);font-weight:600;
}
.bloecke .wp-block-table td{padding:10px 14px;border-bottom:1px solid var(--haar);vertical-align:top}
.bloecke .wp-block-table tr:last-child td{border-bottom:none}
.bloecke .wp-block-table tbody tr:hover td{background:var(--blau-flach)}
.bloecke .wp-block-table figcaption{font-size:12.5px;color:var(--mut);margin-top:6px;text-align:left}

/* Handy (Jens, 16.10.2026: „die Tabellen ragen über den Bildschirm raus").
   Gemessen bei 375 px: dreispaltige Leistungstabellen 401–489 px breit, weil
   lange Wörter nicht trennen und je Zelle 28 px Innenabstand anfallen. Mit
   engerem Abstand und Silbentrennung (lang="de") passen sie in 327 px.
   Die Honorartafel (7 Spalten) muss weiter rollen – dafür zeigt theme.js
   per Klasse .rollt einen Schatten am rechten Rand, bis das Ende erreicht ist. */
@media(max-width:700px){
  .bloecke .wp-block-table table{font-size:13.5px}
  .bloecke .wp-block-table th{padding:8px 9px;letter-spacing:.05em;font-size:11px}
  .bloecke .wp-block-table td{padding:8px 9px;overflow-wrap:break-word;hyphens:auto}
}
.bloecke figure.wp-block-table{position:relative}
.bloecke figure.wp-block-table.rollt::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
  background:linear-gradient(to left,rgba(0,0,0,.22),transparent);
  transition:opacity .2s;
}
.bloecke figure.wp-block-table.rollt.rollt-ende::after{opacity:0}

/* Aufklappblöcke (Block „Details") im Referenzen-Stil */
.bloecke details{border:1px solid var(--haar);background:var(--flaeche);margin-bottom:14px}
.bloecke details > summary{
  padding:14px 18px;cursor:pointer;list-style:none;
  font-weight:600;font-size:16px;display:flex;gap:16px;align-items:baseline;
}
.bloecke details > summary::-webkit-details-marker{display:none}
.bloecke details > summary::after{content:"+";margin-left:auto;color:var(--blau);font-size:19px;line-height:1}
.bloecke details[open] > summary::after{content:"–"}
.bloecke details > summary:hover{background:var(--blau-flach)}
.bloecke details > :not(summary){margin:12px 18px}
.bloecke details p{max-width:52em;font-size:14.5px}

/* Bilder */
.bloecke img{max-width:100%;height:auto}
.bloecke figure.wp-block-image{margin:0 0 18px}
.bloecke figure.wp-block-image figcaption{font-size:13px;color:var(--mut);margin-top:8px;text-align:left}

/* Block „Neueste Beiträge" (Startseite) */
.bloecke ul.wp-block-latest-posts{list-style:none;margin:0;max-width:none;background:var(--flaeche);border:1px solid var(--haar)}
.bloecke ul.wp-block-latest-posts > li{margin:0;padding:15px 18px;border-bottom:1px solid var(--haar);display:flex;gap:22px;align-items:baseline}
.bloecke ul.wp-block-latest-posts > li:last-child{border-bottom:none}
.bloecke ul.wp-block-latest-posts > li:hover{background:var(--blau-flach)}
.bloecke ul.wp-block-latest-posts a{color:inherit;text-decoration:none;font-weight:600;font-size:15.5px}
.bloecke ul.wp-block-latest-posts a:hover{color:var(--blau)}
.bloecke .wp-block-latest-posts__post-date{font:12.5px Consolas,monospace;color:var(--mut);order:-1;flex:0 0 92px}

/* Trennlinie */
.bloecke hr.wp-block-separator{border:none;height:1px;background:var(--haar);margin:34px 0}

/* Seitennummerierung der Beitragsliste */
.pagination .nav-links{display:flex;gap:12px;font-size:14px}
.pagination a,.pagination .current{padding:7px 13px;border:1px solid var(--haar);background:var(--flaeche)}
.pagination .current{background:var(--blau);color:#fff;border-color:var(--blau)}

/* Angemeldet: die schwarze WordPress-Leiste oben einrechnen */
body.admin-bar aside{top:32px;height:calc(100vh - 32px)}
@media(max-width:960px){body.admin-bar aside{top:0;height:auto}}

/* ---------- Kontaktformular (Contact Form 7) ---------- */
.wpcf7 form{max-width:44em;margin-top:8px}
.wpcf7 form .zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:700px){.wpcf7 form .zwei{grid-template-columns:1fr}}
.wpcf7 form p{margin-bottom:16px;max-width:none}
.wpcf7 form label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.wpcf7 input:not([type=submit]),.wpcf7 select,.wpcf7 textarea{
  width:100%;padding:10px 12px;border:1px solid var(--haar);
  background:var(--flaeche);color:var(--ink);font:inherit;font-size:14.5px;
  border-radius:0;margin-top:4px;
}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:2px solid var(--blau);outline-offset:-2px;
}
.wpcf7 textarea{min-height:130px;resize:vertical}
.wpcf7 input[type=submit]{
  width:auto;border:1px solid var(--blau);background:var(--blau);color:#fff;
  font-weight:600;font-size:14.5px;padding:11px 28px;cursor:pointer;
}
.wpcf7 input[type=submit]:hover{background:var(--ink);border-color:var(--ink)}
.wpcf7 .pflichtnote{font-size:12.5px;color:var(--mut);margin-top:12px}
.wpcf7 .pflichtnote a{color:var(--blau)}

/* Honigtopf: fuer Menschen unsichtbar, fuer Maschinen ein normales Feld */
.wpcf7 .honig{position:absolute !important;left:-9999px !important;top:0}

/* Rueckmeldungen von Contact Form 7 im Seitenstil */
.wpcf7 form .wpcf7-response-output{
  margin:16px 0 0;padding:12px 16px;border:1px solid var(--haar);
  background:var(--flaeche);font-size:14px;
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--mgmt);color:var(--mgmt)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{border-color:var(--feld);color:var(--feld)}
.wpcf7-not-valid-tip{color:var(--feld);font-size:12.5px;margin-top:4px}

/* ---------- Teamkarten ----------
   Das Foto ist seit dem 27.08.2026 ein Bild-Block statt rohem HTML, damit
   es ueber die Mediathek getauscht werden kann. Bild-Bloecke bringen einen
   Aussenabstand mit (Regel weiter oben) - in der Karte wuerde der die
   Rasterzelle aufreissen. Die Gestaltung selbst steht in site.css und gilt
   fuer beide Fassungen. */
.bloecke .person figure.foto{margin:0}

/* WordPress-Eigenheit bei Gruppen-Bloecken: Beim Ausliefern schiebt
   WordPress einen zusaetzlichen Behaelter zwischen Gruppe und Inhalt
   (wp-block-group__inner-container) - Ruecksicht auf Themes ohne
   theme.json. Fuer unsere Bausteine ist das fatal: Das Team-Raster hatte
   dadurch nur EIN Kind, alle vier Karten standen bildschirmfuellend
   untereinander (aufgefallen 27.08.2026).

   display:contents loest den Behaelter auf, ohne ihn zu entfernen - die
   Karten werden wieder direkte Rasterfelder. Im Editor gibt es diesen
   Behaelter nicht; dort laeuft die Regel folgenlos mit. */
.bloecke .wp-block-group__inner-container{display:contents}

/* Beitragsbild ueber dem Beitragstext (single.php). Breite wie der
   Fliesstext plus etwas Luft, damit 16:9-Grafiken lesbar bleiben. */
.beitragsbild{margin:0 0 30px;max-width:44em}
.beitragsbild img{display:block;width:100%;height:auto;border:1px solid var(--haar)}