den Fokus nicht an — der Sprung verschiebt dann nur den Bildausschnitt, die nächste Tab-Taste landet aber wieder in der Navigation. Der tabindex steht deshalb in allen Vorlagen am main-Element, hier folgt die Bildlaufreserve: Die Kopfzeile klebt oben (position:sticky, rund 77px — 52px Logo, 2×12px Innenabstand, 1px Linie) und würde sonst die ersten Zeilen verdecken. 96px halten sie frei und lassen etwas Luft; dieselbe Reserve gilt für jedes andere Sprungziel im Dokument. */ main[tabindex="-1"],:target{scroll-margin-top:var(--space-24)} /* Der Fokusring bleibt für alles bestehen, was Tastaturnutzer bedienen — nur der Inhaltsbereich selbst zieht keinen Rahmen um die halbe Seite.
ist kein Bedienelement, liegt wegen tabindex="-1" nie in der Tab-Reihenfolge und wird ausschließlich über den Sprunglink fokussiert; die Ansage des Screenreaders und die neue Tab-Position zeigen den Sprung bereits an. Bewusst über :focus-visible, damit die globale Regel nirgends sonst geschwächt wird. */ main[tabindex="-1"]:focus-visible{outline:none} /* ===== Umbruchsicherung ===== Deutsche Fachwörter werden lang. „Kindertagespflegeperson" als h1 misst bei 320px Bildschirmbreite rund 460px — in Versalien mit 0.14em Sperrung wächst jedes Zeichen zusätzlich. Ohne Umbrucherlaubnis schob diese eine Zeile die ganze Seite auf 479px auf: waagerechter Bildlauf auf jeder Unterseite, nicht nur an der langen Überschrift. Betroffen waren h1 bis h5, der Tagesablauf (summary), die Info-Kachel, der Platz-Counter, die Kontaktkarte und der Absende-Knopf des Formulars. Die Regel steht am body, weil overflow-wrap vererbt wird: Damit gilt sie für alle Überschriftenebenen und den Fließtext — und ebenso für Textknoten in den eigenen Blöcken, die weder Absatz noch Überschrift sind (der Name in der Kontaktkarte, die Beschriftung des Platz-Counters, die Schreibschriftzeile der Info-Kachel). Eine Liste einzelner Auswahlen träfe genau die nicht. Bewusst „break-word" und nicht „anywhere": break-word lässt die Mindestbreite (min-content) eines Kastens unangetastet und greift erst, wenn ein Wort in der vorhandenen Zeile sonst überliefe. Auf dem Desktop ändert sich dadurch nichts — bei 880px Inhaltsbreite passt jedes Wort der Marke in seine Zeile, gemessen: identische Geometrie aller Elemente vor und nach dieser Regel. „anywhere" würde dagegen die Mindestbreite senken und damit Flex- und Rasterspalten neu umbrechen. Ebenso bewusst kein hyphens:auto — die Trennstriche erschienen auch auf dem Desktop und veränderten das Schriftbild. */ body{overflow-wrap:break-word} /* Was sich nicht umbrechen lässt, bekommt einen eigenen Bildlauf, statt die Seite mitzunehmen: Eine Tabelle rechnet ihre Spalten auf die Mindestbreite des längsten Wortes, das Blockformat lässt sich davon nicht abbringen. Codeblöcke (.wp-block-code), vorformatierter Text (.wp-block-preformatted) und Verse (.wp-block-verse) sind allesamt
 — eine Auswahl deckt die drei ab und
   nimmt Klassisch-Editor-Inhalte gleich mit. Für .wp-block-table setzt WordPress
   dasselbe bereits selbst; hier steht es, damit es auch dann gilt, wenn der
   Blockstil einmal nicht geladen wird, und im Editor sichtbar ist. */
.wp-block-table,pre{overflow-x:auto}
/* Flex-Kästen brauchen eine Stufe mehr. „break-word" erlaubt zwar den Umbruch,
   senkt aber die Mindestbreite (min-content) eines Kastens nicht — und genau die
   bestimmt in einem Flex-Layout die Breite: Ein zentriertes Flex-Kind (Info-Kachel)
   wird so breit wie sein längstes Wort, ein Flex-Kasten mit Text (Knopf, Schaltfläche
   des Platz-Counters, Aufklappzeile des Tagesablaufs) ebenso, weil sein namenloses
   Textkind die Mindestbreite auto behält. Gemessen bei 320px: Die Info-Kachel war
   330px breit und stand 31px über beide Ränder hinaus, die Aufklappzeile 383px.
   „anywhere" nimmt den Umbruch in die Mindestbreite auf und löst das. Es steht nur
   hier und nicht global, weil eine kleinere Mindestbreite z. B. Tabellenspalten
   anders umbrechen ließe — auch auf dem Desktop.
   word-break:break-word ist der ältere Name derselben Wirkung und fängt Safari vor
   15.4 auf; WordPress hält es bei .wp-block-column genauso. Auf dem Desktop ändert
   sich nichts: Solange das längste Wort in die verfügbare Breite passt, ist die
   Kastenbreite von der Mindestbreite unabhängig (gemessen, siehe oben). */
.anker-tile,
.anker-tag,
.anker-counter__link,
.anker-contact__phone,
.anker-form button,
.anker-plan .wp-block-details summary{word-break:break-word;overflow-wrap:anywhere}

/* ===== Kopfbereich ===== */
/* Grundzustand deckend: --surface-page ist derselbe Cremeton wie die bisherige
   rgba(248,247,245,.92), nur ohne Transparenz. Eine deckende Fläche kostet im
   Bildlauf nichts — der Browser schiebt den Inhalt unter einer fertigen Ebene
   durch. */
header.wp-block-template-part{position:sticky;top:0;z-index:30;background:var(--surface-page);border-bottom:1px solid var(--border-soft)}
/* Der Blur bleibt dem Desktop vorbehalten, das Aussehen dort ist unverändert.
   Auf Telefonen und kleinen Tablets muss der Browser sonst in jedem Einzelbild
   den Streifen hinter der Kopfzeile neu auslesen und weichzeichnen — und zwar
   auch im Stillstand, sobald darunter etwas läuft (schwebendes Hero-Logo,
   driftendes Wellenband). Der sichtbare Verlust ist gering: Bei 92 % Deckung
   scheinen ohnehin nur 8 % des Hintergrunds durch. */
@media (min-width:1024px){
header.wp-block-template-part{background:rgba(248,247,245,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
/* Wer im Betriebssystem weniger Transparenz eingestellt hat, bekommt die deckende
   Fläche zurück. Bewusst als eigener Block hinter der Breitenregel und auf
   „reduce" geprüft — nicht als „no-preference" in der Bedingung oben: Browser,
   die das Merkmal nicht kennen (derzeit u. a. Firefox), erfüllen eine solche
   und-Verknüpfung nie und verlören den Blur auch auf dem Desktop. */
@media (prefers-reduced-transparency:reduce){
header.wp-block-template-part{background:var(--surface-page);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Ein gesetzter backdrop-filter macht die Kopfzeile zum Bezugsrahmen für alles
   Darinliegende mit position:fixed. Das mobile Menü von core/navigation ist genau
   das — es schrumpfte dadurch auf die Höhe der Kopfzeile statt den Bildschirm zu
   füllen. Solange das Menü offen ist (WordPress setzt has-modal-open auf ),
   liegt der Blur ohnehin verdeckt unter der Menüfläche und kann entfallen. Das
   Überlagerungsmenü erscheint bis 900px (siehe „Umschaltpunkt des Menüs" weiter
   unten), der Blur erst ab 1024px — die beiden Bereiche berühren sich also nicht.
   Die Regel bleibt als Absicherung stehen, falls einer der beiden Werte wandert. */
.has-modal-open header.wp-block-template-part{backdrop-filter:none;-webkit-backdrop-filter:none}
.anker-header{max-width:1280px;margin-inline:auto;padding:var(--space-3) clamp(var(--space-4),4vw,var(--space-8))!important}
footer.wp-block-template-part{margin-top:0}
.anker-brand{display:flex;align-items:center;gap:var(--space-3);min-width:0;text-decoration:none}
/* Das Logosiegel schrumpft nicht mit. core/site-logo gibt dem Bild max-width:100%
   mit; damit ist seine Mindestbreite im Flex-Layout 0, und die Kopfzeile
   verkleinerte das Siegel, sobald die Zeile eng wurde — gemessen bis auf 24px
   herunter, statt der gesetzten 52px. flex:none hält die Größe fest; dieselbe
   Regel steht im Design-System (ui_kits/website-v2/kit.css: .brand img{flex:none}).
   Das min-width:0 am Textblock gibt der Marke die Nachgiebigkeit zurück, die das
   Siegel damit verliert: Ein sehr langer Website-Titel bricht dann um, statt die
   Zeile über den Bildschirmrand hinauszuschieben. */
.anker-brand .wp-block-site-logo{flex:none}
.anker-brand .wp-block-site-logo img{border-radius:50%;transition:transform var(--duration-slow) var(--ease-out)}
.anker-brand:hover .wp-block-site-logo img{transform:rotate(-4deg) scale(1.04)}
.anker-brand__text{display:flex;flex-direction:column;line-height:1.05;gap:0;min-width:0}
.anker-brand__text .wp-block-site-title{margin:0}
.anker-brand__text .wp-block-site-title a{text-decoration:none}
.anker-brand__text .wp-block-site-tagline{margin:0;line-height:1.1}
.anker-nav .wp-block-navigation-item__content{letter-spacing:var(--tracking-heading);text-transform:uppercase;font-weight:600;color:var(--gray-600);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;transition:color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.anker-nav .wp-block-navigation-item__content:hover{color:var(--navy-700)}
.anker-nav .current-menu-item>.wp-block-navigation-item__content,.anker-nav .current_page_item>.wp-block-navigation-item__content{color:var(--navy-700);border-bottom-color:var(--sand-400)}
/* Seitliche Polsterung selbst setzen: WordPress rechnet hier
   clamp(1rem,var(--wp--style--root--padding-left),20rem) — als Kurzschrift für alle
   vier Seiten. Oben und unten steht in theme.json aber eine nackte 0 ohne Einheit,
   und die ist in clamp() neben Längenangaben ungültig; damit fällt die ganze
   Kurzschrift weg und die Polsterung wird 0 statt 1rem — die Links klebten dann am
   Bildschirmrand. 32px entspricht dem Innenabstand des Rasters. Die Auswahl wiegt
   bewusst schwerer als die von core (siehe Farben direkt darunter): Die Kurzschrift
   von core würde die beiden seitlichen Angaben sonst je nach Reihenfolge der
   Stylesheets wieder überschreiben. .anker-nav steht dafür doppelt in der Auswahl —
   die Klammern :not(.has-background) der core-Regel wären hier zwar auch ein Gewicht,
   hätten mit der Polsterung aber nichts zu tun: Ein im Editor gesetzter Hintergrund
   würde die Polsterung sonst mit abschalten. */
.anker-nav.anker-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){padding-left:var(--space-8);padding-right:var(--space-8)}
/* Farben der offenen Menüfläche. core/navigation setzt sie mit einer fünfteiligen
   Auswahl hart auf Weiß und Schwarz (…:not(.has-background) .…is-menu-open:not(
   .disable-default-overlay)). Eine schlichtere Regel kommt dagegen nicht an — die
   Fläche blieb weiß und die Links schwarz, obwohl der Grundton der Marke immer
   Creme ist. Auffällig war das lange kaum: Das Überlagerungsmenü erschien nur
   unter 600px. Seit es bis 900px greift, sieht es jedes Tablet.
   Dieselbe Auswahl plus .anker-nav wiegt schwerer und gewinnt unabhängig von der
   Reihenfolge der Stylesheets — core druckt seine Blockstile erst am Seitenfuß,
   auf Quellreihenfolge ist hier also kein Verlass. Die Farbe steht bewusst auf
   der Fläche und nicht auf den Links: core stellt die Links über
   .wp-block-navigation-item__content.wp-block-navigation-item__content auf
   color:inherit, sie holen den Wert also von hier. */
.anker-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){background:var(--surface-page)}
.anker-nav.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){color:var(--gray-600)}
/* WordPress stellt die Liste im offenen Menü auf flex-direction:column, setzt dabei
   aber flex-wrap nicht zurück. Ohne nowrap brechen die Punkte auf niedrigen
   Bildschirmen in Spalten nebeneinander um. */
.anker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{flex-wrap:nowrap;width:100%}
.anker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%}
.anker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-size:var(--text-sm);border-bottom:1px dotted var(--border-sand);min-height:44px;display:flex;align-items:center;width:100%}
.anker-nav .wp-block-navigation__responsive-container-open,.anker-nav .wp-block-navigation__responsive-container-close{min-width:44px;min-height:44px;color:var(--navy-700)}
/* Umschaltpunkt des Menüs: 900px, nicht die 600px des Navigationsblocks.
   core/navigation kennt für "overlayMenu":"mobile" nur eine fest verdrahtete
   Schwelle von 600px. Zwischen 601px und rund 900px reicht die Zeile aber nicht
   für Marke und fünf Versal-Links nebeneinander: Der Navigationsblock wurde als
   Flex-Element gestaucht, „Kontakt" rutschte allein in eine zweite Zeile, das
   Logosiegel schrumpfte mit (siehe .anker-brand .wp-block-site-logo weiter oben),
   und die Kopfzeile wuchs von 77px auf 97px. Bei einem längeren Website-Titel
   („Ankerplatz für kleine Füße" statt „Ankerplatz") zog sich das bis 890px hin.
   Das Design-System schaltet an derselben Stelle um: ui_kits/website-v2/kit.css,
   @media (max-width:900px) blendet .nav-links aus und den Knopf ein.
   Umgesetzt ist das über "overlayMenu":"always" in parts/header.html. WordPress
   setzt dann hidden-by-default auf die Menüfläche und always-shown auf den Knopf,
   und beides bleibt in jeder Breite so. Die drei Regeln hier stellen ab 901px
   genau den Zustand wieder her, den core sonst ab 600px selbst herstellt — die
   Werte sind aus wp-includes/blocks/navigation/style.css übernommen. Die
   Steuerung des Menüs (Öffnen, Schließen, Escape, Fokus) macht weiterhin core. */
@media (min-width:901px){
.anker-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open){display:block;position:relative;width:100%;z-index:auto;background-color:inherit}
.anker-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}
.anker-nav .wp-block-navigation__responsive-container-open.always-shown{display:none}
}

/* ===== Fußbereich ===== */
.anker-footer{background:var(--surface-navy);color:var(--text-inverse)}
.anker-footer a{color:var(--cream);text-decoration:none}
.anker-footer a:hover{color:var(--blue-200);text-decoration:underline}
.anker-footer__claim{font-family:var(--font-script)!important;font-weight:600;font-size:var(--text-2xl)!important;line-height:1.2;color:var(--cream);margin:0;text-transform:none!important;letter-spacing:0!important}
.anker-footer__label{font:var(--type-eyebrow)!important;letter-spacing:var(--tracking-eyebrow)!important;text-transform:uppercase;color:var(--blue-200)!important;margin:0 0 var(--space-3)}
.anker-footer__name{font-family:var(--font-script);font-size:var(--text-lg)}
.anker-footer__legal{border-top:1px solid rgba(248,247,245,.18);padding-top:var(--space-5);color:var(--blue-200);font-size:var(--text-xs)}
/* Seitenliste: die Zeilenhöhe allein ergäbe ~24px hohe Ziele. Der Link wird auf
   44×44px gebracht (CLAUDE.md, mobile Ziele) — die 24px Blockabstand zwischen den
   Absätzen wandern dafür in den Link, die Spalte bleibt also gleich hoch. */
.anker-footer__pages p:not(.anker-footer__label){margin:0}
.anker-footer__pages p:not(.anker-footer__label) a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.anker-footer .wp-block-navigation-item__content{font:var(--type-body-sm);color:var(--cream);text-decoration:none;text-transform:none;letter-spacing:0}

/* ===== Textrollen ===== */
.anker-eyebrow{font:var(--type-eyebrow)!important;letter-spacing:var(--tracking-eyebrow)!important;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-3)}
.anker-script{font-family:var(--font-script)!important;font-weight:600;color:var(--navy-700);letter-spacing:.01em!important;text-transform:none!important}
.anker-lead{max-width:640px;margin-inline:auto}

/* ===== Fotos ===== */
.is-style-anker-photo img,figure.is-style-anker-photo img{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:block;width:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out),box-shadow var(--duration-slow) var(--ease-out),filter var(--duration-slow) var(--ease-out)}
.is-style-anker-photo:hover img{transform:translateY(-4px);box-shadow:var(--shadow-md);filter:saturate(1.04)}
.is-style-anker-photo figcaption{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-3);text-align:left}
.anker-gallery.wp-block-gallery figure img{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}

/* ===== Foto-Galerie mit Lightbox ===== */
.anker-galerie__trigger{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;line-height:0;overflow:visible;-webkit-appearance:none;appearance:none;border-radius:var(--radius-lg);cursor:zoom-in}
body.anker-lightbox-open{overflow:hidden}
/* Die Leiste mit Titel und Schließen-Schaltfläche muss in jeder Bildschirmlage
   sichtbar bleiben. Das Foto bekommt deshalb keine feste Höhe, sondern nur eine
   Obergrenze: Bildschirmhöhe minus Leiste (44px Schaltfläche + 2×12px
   Innenabstand), minus deren Abstand zum Bild, minus den Rand des Dialogs.
   dvh folgt den ein- und ausfahrenden Browserleisten auf Mobilgeräten — die
   vh-Zeile davor bleibt als Rückfall für Browser ohne dvh stehen. */
.anker-lightbox{--anker-lightbox-rand:var(--space-6);--anker-lightbox-leiste:calc(68px + var(--space-4));position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--anker-lightbox-rand);background:var(--overlay-scrim);cursor:zoom-out}
.anker-lightbox[hidden]{display:none}
.anker-lightbox__figure{margin:0;width:auto;max-width:100%;max-height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;cursor:default;animation:anker-pop .3s var(--ease-out) both}
/* Wächst die Leiste wider Erwarten (langer Titel, der auf schmalen Geräten
   umbricht), gibt das Foto über flex-shrink Höhe ab, statt sie hinauszudrücken. */
.anker-lightbox__figure img{flex:0 1 auto;min-height:0;width:auto;height:auto;max-width:calc(100vw - 2 * var(--anker-lightbox-rand));max-height:min(900px,calc(100vh - var(--anker-lightbox-leiste) - 2 * var(--anker-lightbox-rand)));max-height:min(900px,calc(100dvh - var(--anker-lightbox-leiste) - 2 * var(--anker-lightbox-rand)));object-fit:contain;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:block}
.anker-lightbox__bar{flex:none;width:0;min-width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-4);background:var(--surface-navy);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5)}
.anker-lightbox__title{font-family:var(--font-heading);font-weight:600;font-size:var(--text-sm);letter-spacing:var(--tracking-heading);text-transform:uppercase;color:var(--cream)}
.anker-lightbox__close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--radius-pill);border:none;background:rgba(248,247,245,.14);color:var(--cream);cursor:pointer;transition:background var(--duration-base) var(--ease-standard)}
.anker-lightbox__close:hover{background:rgba(248,247,245,.24)}

/* ===== Karten (Block-Styles für core/group) ===== */
/* container-type:inline-size macht die Karte zum Bezug für die cqi-Rechnung der
   Überschriften weiter unten. Das damit verbundene Containment ist hier ohne
   Folgen: Alle Karten sind Block- oder Rasterkinder, ihre Breite kommt ohnehin
   von außen, und der Galerie-Dialog hängt an  (siehe galerie-dialog.js) —
   position:fixed bleibt also unberührt. Ein Nebeneffekt in die richtige
   Richtung: Ein überlanges Wort kann die Karte nicht mehr breiter ziehen. */
.is-style-anker-card,.is-style-anker-card-sand,.is-style-anker-card-sky{border-radius:var(--radius-lg);padding:var(--space-6);container-type:inline-size}
.is-style-anker-card{background:var(--surface-card);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm)}
.is-style-anker-card-sand{background:var(--surface-sand);border:1px solid var(--border-sand)}
.is-style-anker-card-sky{background:var(--surface-sky);border:1px solid var(--border-sky)}
.is-style-anker-card :where(h2,h3,h4),.is-style-anker-card-sand :where(h2,h3,h4),.is-style-anker-card-sky :where(h2,h3,h4){margin-top:0}
/* Überschriften in Karten richten sich nach der Kartenbreite, nicht nach der
   Fensterbreite. Die Voreinstellung „Überschrift 3" (x-large) ist zwar fluid,
   ihre Rechnung kennt aber nur den Ansichtsbereich: Im Drei-Spalten-Raster der
   Seite „Über uns" steht sie auf dem Desktop bei vollen 1.5rem, obwohl die Karte
   dort nur 277px misst (880px Inhaltsbreite, drei Spalten, zwei Lücken à 24px).
   Nach Abzug von Polster und Rahmen bleiben 227px Zeile. Am Fehlerbild
   abgelesen: Bei 1.5rem passten 12 der 13 Zeichen von „QUALIFIKATION" in diese
   Zeile, das Wort misst dort also zwischen 227 und 246px. Das dreizehnte Zeichen
   fiel über body{overflow-wrap:break-word} allein in die nächste Zeile.
   cqi rechnet gegen den Inhaltskasten der Karte statt gegen das Fenster. Die
   eigentliche Arbeit tun die beiden Grenzen der clamp(): Ab 267px Zeilenbreite
   (rund 316px Karte) bleibt es bei 1.5rem — die breiten Karten sehen damit aus
   wie bisher, Betreuung hat 830px Zeile, die Kontaktkarte 282px. Nur die
   schmalen Rasterkarten fallen auf 1.28rem; „QUALIFIKATION" misst dort nach
   derselben Rechnung 194 bis 210px und hat mindestens 17px Luft.
   !important, weil WordPress die Voreinstellungsklassen (.has-x-large-font-size)
   selbst mit !important ausgibt; :is() statt :where(), damit bei gleicher
   Spezifität nicht die Reihenfolge der Stylesheets entscheidet. Preis dieser
   Durchsetzung: Eine im Editor von Hand gewählte Schriftgröße greift in Karten
   nicht mehr — gewollt, denn genau daraus entstand der Fehler.
   hyphens:auto steht daneben als Auffangnetz für Wörter, die auch verkleinert
   nicht passen; die Betreiberinnen schreiben ihre Überschriften selbst, und
   deutsche Fachwörter werden lang. Es gilt nur in Karten — die Entscheidung
   gegen globale Trennstriche (siehe „Umbruchsicherung") bleibt bestehen. Der
   Browser nimmt zuerst die Trennstelle und erst danach, wenn auch die nicht
   reicht, den harten Bruch aus break-word. hyphenate-limit-chars hält kurze
   Bruchstücke fern („UN-SERE"). Browser ohne Container-Einheiten verwerfen nur
   die font-size-Zeile, die Trennung bleibt ihnen erhalten.
   Zwei Ausnahmen, beide wegen des !important: Der Beitragstitel im Karten-Raster
   von index.html und archive.html trägt seine 1.25rem als style-Attribut, und
   ein !important der Vorlage sticht ein einfaches style-Attribut — ohne die
   Ausnahme wären die Titel dort auf 1.5rem gewachsen. Die Info-Kachel bringt
   ihre Größe selbst mit (.anker-tile__title, --text-lg); sie steht heute in
   keiner Karte, kann im Editor aber jederzeit in eine gezogen werden und soll
   dann aussehen wie überall sonst.
   :not() bewusst zweimal gekettet statt als Liste: Eine Liste in :not() kennt
   Safari erst ab 16.4, und ein unbekannter Selektor nähme die ganze Regel mit. */
.is-style-anker-card :is(h2,h3,h4):not(.wp-block-post-title):not(.anker-tile__title),
.is-style-anker-card-sand :is(h2,h3,h4):not(.wp-block-post-title):not(.anker-tile__title),
.is-style-anker-card-sky :is(h2,h3,h4):not(.wp-block-post-title):not(.anker-tile__title){font-size:clamp(var(--text-lg),9cqi,var(--text-xl))!important;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:8 4 3}

/* ===== Schlagworte ===== */
.anker-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}
.anker-tag{display:inline-flex;align-items:center;gap:var(--space-2);padding:7px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-sand);background:var(--sand-100);color:var(--text-body);font:var(--type-body-sm);margin:0}

/* ===== Hinweisbox ===== */
.anker-note{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--info-soft);border:1px solid var(--blue-300)}
.anker-note.is-sand{background:var(--sand-100);border-color:var(--border-sand)}
.anker-note.is-erfolg{background:var(--success-soft);border-color:var(--success)}
.anker-note__icon{color:var(--navy-700);flex:none;line-height:1}
.anker-note strong{font:var(--type-label);color:var(--navy-700);display:block;margin-bottom:2px}
.anker-note p{font:var(--type-body-sm);color:var(--text-body);margin:0}
/* Die Rückmeldung des Kontaktformulars ist Sprungziel des Redirects und nimmt
   beim Laden den Fokus auf. Die Kopfzeile klebt oben und würde sie sonst
   verdecken — 96px halten sie frei. */
.anker-note[tabindex]{scroll-margin-top:var(--space-24)}
.anker-note[tabindex]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* ===== Block: Script-Überschrift ===== */
.anker-scriptheading{text-align:center;margin-block:0 var(--space-10)}
.anker-scriptheading.is-align-left{text-align:left}
.anker-scriptheading__eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:var(--space-3)}
.anker-scriptheading__title{font-family:var(--font-heading);font-weight:600;font-size:clamp(var(--text-xl),4.4vw,var(--text-3xl));line-height:1.15;letter-spacing:var(--tracking-heading);text-transform:uppercase;color:var(--navy-700);margin:0}
.anker-scriptheading__script{font-family:var(--font-script);font-weight:600;font-size:clamp(var(--text-xl),3.4vw,var(--text-2xl));color:var(--navy-700);display:block;margin-top:var(--space-2)}

/* ===== Block: Tauwerk-Trenner ===== */
.anker-rope{display:flex;align-items:center;gap:var(--space-4);width:100%;margin-block:var(--space-8)}
.anker-rope__line{flex:1;border-top:2px dotted var(--border-sand)}
.anker-rope.is-solid .anker-rope__line{border-top:3px solid var(--rope)}
.anker-rope.is-twist .anker-rope__line{border-top:3px double var(--rope)}
.anker-rope__symbol{color:var(--navy-700);font-size:var(--text-lg);line-height:1}

/* ===== Block: Herzlinie ===== */
.anker-hearts{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-block:var(--space-6);line-height:1}

/* ===== Block: Wellenband ===== */
.anker-wave{background:var(--blue-200);-webkit-mask-image:radial-gradient(28px 22px at 28px 0,transparent 98%,#000 100%);mask-image:radial-gradient(28px 22px at 28px 0,transparent 98%,#000 100%);-webkit-mask-size:56px 100%;mask-size:56px 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;animation:anker-wave-drift var(--duration-drift) linear infinite}
.anker-wave.is-tone-sand{background:var(--sand-300)}
.anker-wave.is-tone-navy{background:var(--navy-700)}
.anker-wave.is-flipped{transform:scaleY(-1)}

/* ===== Block: Info-Kachel ===== */
.anker-tile{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);align-items:center;text-align:center;box-shadow:var(--shadow-xs);height:100%}
.anker-tile.is-tone-sand{background:var(--surface-sand);border-color:var(--border-sand)}
.anker-tile.is-tone-sky{background:var(--surface-sky);border-color:var(--border-sky)}
.anker-tile__icon{width:52px;height:52px;border-radius:50%;background:var(--white);display:inline-flex;align-items:center;justify-content:center;color:var(--navy-700);flex:none}
.anker-tile__title{font-family:var(--font-heading);font-weight:600;font-size:var(--text-lg);line-height:1.35;letter-spacing:var(--tracking-heading);text-transform:uppercase;color:var(--text-heading);margin:0}
.anker-tile__script{font-family:var(--font-script);font-size:var(--text-lg);color:var(--navy-700);margin-top:-8px}
.anker-tile__text{font:var(--type-body-sm);color:var(--text-body);margin:0}

/* ===== Block: Platz-Counter ===== */
.anker-counter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(var(--space-4),4vw,var(--space-8));align-items:center;background:var(--surface-sand);border:1px solid var(--border-sand);border-radius:var(--radius-xl);padding:clamp(var(--space-6),5vw,var(--space-10)) clamp(var(--space-5),5vw,var(--space-12));box-shadow:var(--shadow-xs);animation:anker-pop .8s var(--ease-out) both}
.anker-counter.is-tone-navy{background:var(--surface-navy);border-color:var(--surface-navy)}
.anker-counter.is-tone-navy .anker-counter__num,.anker-counter.is-tone-navy .anker-counter__label{color:var(--cream)}
.anker-counter.is-tone-navy .anker-counter__of,.anker-counter.is-tone-navy .anker-counter__text{color:var(--blue-200)}
.anker-counter.is-tone-navy .anker-counter__dot{background:transparent;border-color:var(--blue-200)}
.anker-counter.is-tone-navy .anker-counter__dot.is-free{background:var(--cream);border-color:var(--cream)}
.anker-counter.is-tone-navy .anker-counter__link{background:var(--cream);border-color:var(--cream);color:var(--navy-700)}
.anker-counter.is-tone-navy .anker-counter__link:hover{background:var(--sand-400);border-color:var(--sand-400);color:var(--navy-700)}
.anker-counter__figure{display:flex;align-items:baseline;gap:var(--space-3);justify-content:center}
.anker-counter__num{font-family:var(--font-heading);font-weight:700;font-size:clamp(var(--text-4xl),12vw,var(--text-5xl));line-height:1;color:var(--navy-700)}
.anker-counter__of{font:var(--type-body);color:var(--text-muted);font-size:var(--text-lg)}
.anker-counter__body{text-align:center}
.anker-counter__label{font-family:var(--font-script);font-weight:600;font-size:var(--text-2xl);color:var(--navy-700);margin:0 0 var(--space-2);display:block}
.anker-counter__text{font:var(--type-body-sm);color:var(--text-body);margin:0 0 var(--space-4)}
.anker-counter__dots{display:flex;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-4)}
.anker-counter__dot{width:14px;height:14px;border-radius:50%;background:var(--white);border:2px solid var(--navy-700)}
.anker-counter__dot.is-free{background:var(--navy-700)}
.anker-counter__link{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-heading);font-weight:600;font-size:var(--text-sm);letter-spacing:var(--tracking-heading);text-transform:uppercase;text-decoration:none;padding:12px 28px;border-radius:var(--radius-pill);border:2px solid var(--navy-700);background:var(--navy-700);color:var(--cream);min-height:44px;transition:background var(--duration-base) var(--ease-standard)}
.anker-counter__link:hover{background:var(--navy-800);border-color:var(--navy-800);color:var(--cream);text-decoration:none}

/* ===== Block: Kontaktkarte ===== */
.anker-contact{background:var(--surface-sand);border:1px solid var(--border-sand);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);display:flex;align-items:center;gap:var(--space-4);box-shadow:var(--shadow-xs)}
.anker-contact__heart{color:var(--blue-300);font-size:20px;line-height:1;flex:none}
.anker-contact__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.anker-contact__name{font-family:var(--font-script);font-weight:600;font-size:var(--text-2xl);color:var(--navy-700);line-height:1.1}
.anker-contact__role{font:var(--type-body-sm);color:var(--text-muted)}
.anker-contact__phone{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-md);color:var(--text-body);text-decoration:none;margin-top:2px;min-height:44px}
.anker-contact__phone svg{display:block}
.anker-contact__phone>span{width:26px;height:26px;border-radius:50%;background:var(--navy-700);color:var(--cream);display:inline-flex;align-items:center;justify-content:center;flex:none}

/* ===== Block: Kontaktformular ===== */
.anker-form{display:flex;flex-direction:column;gap:var(--space-5);background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:clamp(var(--space-5),4vw,var(--space-8));box-shadow:var(--shadow-md)}
.anker-field{display:flex;flex-direction:column;gap:var(--space-2)}
.anker-field label{font:var(--type-label);color:var(--navy-700)}
.anker-field input,.anker-field textarea,.anker-field select{font-family:var(--font-body);font-size:var(--text-md);color:var(--text-body);background:var(--white);border:1px solid var(--border-field);border-radius:var(--radius-md);padding:12px 16px;min-height:48px;width:100%}
.anker-field input,.anker-field select,.anker-field textarea{max-width:375px}
.anker-field textarea{min-height:120px;resize:vertical}
.anker-field input:focus-visible,.anker-field textarea:focus-visible,.anker-field select:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-color:var(--navy-700)}
.anker-field__hint{font:var(--type-body-sm);color:var(--text-muted)}
/* Pflichtkennzeichen. Der Anker steht als echter Text im Label (siehe
   ankerplatz_kontakt_pflichtzeichen()) und trägt Bedeutung — deshalb
   Marineblau wie die Beschriftung und nicht das dekorative Mittelblau, das
   den Textkontrast verfehlen würde. */
.anker-pflicht{color:var(--navy-700);font-size:.9em}
.anker-form__pflichthinweis{margin:0;font:var(--type-body-sm);color:var(--text-body)}
.anker-check{display:flex;gap:var(--space-3);align-items:flex-start}
.anker-check input{width:22px;height:22px;min-height:22px;margin:2px 0 0;accent-color:var(--navy-700);flex:none}
.anker-check span{font:var(--type-body-sm);color:var(--text-body)}
/* Checkbox-Zeile und Datenschutz-Hinweis gehören zusammen, stehen aber in zwei
   Absätzen (der Link darf nicht im Label liegen). Die Klammer trägt deshalb den
   Absatz-Außenabstand, den die Zeile vorher selbst hatte — nach außen bleibt der
   Abstand zu Textfeld und Button damit unverändert. Der Hinweis rückt auf die
   Textkante des Labels ein: Checkbox-Breite plus Spaltenabstand der Zeile. */
.anker-consent{margin-block:1em}
.anker-consent .anker-check{margin:0}
.anker-consent__hinweis{margin:var(--space-2) 0 0;padding-inline-start:calc(22px + var(--space-3));font:var(--type-body-sm);color:var(--text-body)}
.anker-form__hp{position:absolute!important;left:-9999px}
.anker-form button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;font-family:var(--font-heading);font-weight:600;font-size:var(--text-base);letter-spacing:var(--tracking-heading);text-transform:uppercase;padding:16px 38px;border-radius:var(--radius-pill);border:2px solid var(--navy-700);background:var(--navy-700);color:var(--cream);box-shadow:var(--shadow-sm);cursor:pointer;transition:background var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-out)}
.anker-form button:hover{background:var(--navy-800);border-color:var(--navy-800)}
.anker-form button:active{transform:translateY(1px) scale(.985)}

/* ===== Hero ===== */
.anker-hero{text-align:center}
.anker-hero__logo{margin:0}
.anker-hero__logo img{width:clamp(220px,38vw,380px);height:auto;margin-inline:auto;border-radius:0;animation:anker-rise .9s var(--ease-out) both,anker-float 8s var(--ease-wave) 1.2s infinite}
.anker-hero__title{font-size:clamp(var(--text-xl),5.2vw,var(--text-3xl))!important;overflow-wrap:break-word;margin:0}

/* ===== Buttons (Block-Styles) ===== */
.wp-block-button.is-style-anker-sand .wp-block-button__link{background:var(--sand-400);color:var(--navy-700);border:2px solid var(--sand-400)}
.wp-block-button.is-style-anker-sand .wp-block-button__link:hover{background:var(--sand-500);border-color:var(--sand-500);color:var(--navy-700)}
.wp-block-button.is-style-anker-ghost .wp-block-button__link{background:transparent;color:var(--navy-700);border:2px solid transparent;box-shadow:none}
.wp-block-button.is-style-anker-ghost .wp-block-button__link:hover{background:var(--blue-100);color:var(--navy-700)}
.wp-block-button.is-style-outline .wp-block-button__link{border:2px solid var(--border-sand);color:var(--navy-700);box-shadow:none}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--sand-200);border-color:var(--sand-500);color:var(--navy-700)}

/* ===== Tagesablauf ===== */
.anker-plan .wp-block-details{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-4)}
.anker-plan .wp-block-details summary{font-family:var(--font-heading);font-weight:600;font-size:var(--text-lg);letter-spacing:var(--tracking-heading);text-transform:uppercase;color:var(--navy-700);cursor:pointer;min-height:44px;display:flex;align-items:center}
.anker-plan .wp-block-details[open] summary{margin-bottom:var(--space-4);border-bottom:2px dotted var(--border-sand);padding-bottom:var(--space-3)}
.anker-plan .wp-block-details summary::marker,.anker-plan .wp-block-details summary::-webkit-details-marker{color:var(--sand-500)}
/* Die nur für Screenreader sichtbare Abschnitts-Überschrift (siehe
   ankerplatz_details_ueberschrift() in functions.php) ist ein eigenes Kind der
   Gruppe. Ohne diese Regel wäre das erste Aufklappfeld nicht mehr :first-child
   und bekäme vom Blocklayout 24px Abstand nach oben. */
.anker-plan>.anker-plan__titel:first-child+.wp-block-details{margin-block-start:0}
.anker-step{position:relative;padding:0 0 var(--space-5) 34px}
.anker-step::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:var(--sand-400);border:2px solid var(--navy-700);box-sizing:border-box}
.anker-step::after{content:"";position:absolute;left:6px;top:27px;bottom:0;border-left:2px dotted var(--border-sand)}
.anker-step:last-child{padding-bottom:0}
.anker-step:last-child::after{display:none}
.anker-step h3,.anker-step h4{font-family:var(--font-heading);font-weight:600;font-size:var(--text-lg);letter-spacing:var(--tracking-heading);text-transform:uppercase;color:var(--text-heading);margin:0 0 4px}
.anker-step p{font:var(--type-body-sm);color:var(--text-body);margin:0}

/* ===== Beiträge ===== */
.anker-meta{font:var(--type-body-sm);color:var(--text-muted)}
.wp-block-post-title a{text-decoration:none}
.wp-block-post-title a:hover{color:var(--navy-600);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* ===== Bewegung ===== */
@keyframes anker-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes anker-fade{from{opacity:0}to{opacity:1}}
@keyframes anker-pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes anker-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes anker-wave-drift{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:56px 0;mask-position:56px 0}}
.anker-animate{animation:anker-rise .72s var(--ease-out) both}
.anker-animate:nth-of-type(2){animation-delay:.08s}
.anker-animate:nth-of-type(3){animation-delay:.14s}
.anker-animate:nth-of-type(4){animation-delay:.2s}
.anker-animate:nth-of-type(n+5){animation-delay:.26s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== Druck: keine Animationen ===== */
@media print{*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== Kleine Schirme ===== */
@media (max-width:600px){
.anker-hero__logo img{width:min(78vw,300px)}
.anker-contact{flex-wrap:wrap}
}

/* ===== Flache Schirme (Mobilgerät im Querformat) ===== */
/* Der Dialogrand rückt enger, damit dem Foto neben der Leiste noch Höhe bleibt. */
@media (max-height:520px){
.anker-lightbox{--anker-lightbox-rand:var(--space-3)}
}