/* Sailing Sisters · Grundstyles für WordPress-Inhalte (Blockeditor/Gutenberg)
   Stand 23.09.2026. Nach styles.css laden. Gilt für alles, was Redakteurinnen im
   Blockeditor anlegen: Seiten, künftige Blogbeiträge, Rechtstexte.

   Geltungsbereich ist der Inhaltscontainer, nicht die ganze Seite. Standard-Selektor
   .entry-content (klassische Themes) und .wp-block-post-content (Block-Themes).
   Falls das Theme anders heißt: nur die erste Zeile unten anpassen, Rest bleibt.

   Die Regeln folgen readme.md: Schriftzuordnung, Heading-Hierarchie (Größe nach Rolle),
   Hover, Fokus, 4px/8px-Kanten, keine Schatten, 68ch Lesebreite. */

:where(.entry-content, .wp-block-post-content){
  --ss-flow:24px;
  font-family:var(--ss-font-read);font-size:17px;line-height:1.6;color:var(--ss-navy);
  max-width:1200px;margin-inline:auto;padding-inline:24px;box-sizing:border-box;
}

/* --- Lesebreite: Text bleibt bei 68ch, breite Blöcke dürfen raus --- */
/* 670px statt 68ch: ch wächst mit der Schriftgröße, an Überschriften liefen die linken Kanten sonst auseinander.
   670px entspricht 68ch Literata 17px. (Aus dem Theme übernommen, F6, 23.09.2026) */
:where(.entry-content, .wp-block-post-content) > :where(p, ul, ol, h2, h3, h4, blockquote, .wp-block-quote, .wp-block-details, .wp-block-buttons){max-width:670px}
:where(.entry-content, .wp-block-post-content) > * + *{margin-block-start:var(--ss-flow)}
:where(.entry-content, .wp-block-post-content) > *{margin-block-end:0}

/* --- Überschriften: Ysabeau 600, Größe nach Rolle. Im Inhalt gibt es kein h1,
       das trägt der Seitentitel. h2 = Abschnitt, h3 = Unterabschnitt, h4 = Titelzeile. --- */
:where(.entry-content, .wp-block-post-content) :where(h1, h2, h3, h4, h5, h6){font-family:var(--ss-font-brand);font-weight:600;color:var(--ss-navy);letter-spacing:0;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
/* Lange Komposita (Impressum) brechen bei 320px, sonst scrollt die Seite waagerecht. Silbentrennung braucht lang="de". (Abnahme 1b, 24.09.2026) */
:where(.entry-content, .wp-block-post-content) h1{font-size:clamp(36px,6vw,48px);line-height:1.15}
:where(.entry-content, .wp-block-post-content) h2{font-size:32px;line-height:1.25;margin-block-start:64px}
:where(.entry-content, .wp-block-post-content) h3{font-size:24px;line-height:1.25;margin-block-start:48px}
:where(.entry-content, .wp-block-post-content) :where(h4, h5, h6){font-size:20px;line-height:1.3;margin-block-start:32px}
:where(.entry-content, .wp-block-post-content) :where(h2, h3, h4) + *{margin-block-start:16px}

/* --- Text --- */
:where(.entry-content, .wp-block-post-content) p{text-wrap:pretty}
:where(.entry-content, .wp-block-post-content) :where(strong, b){font-weight:600}
:where(.entry-content, .wp-block-post-content) .has-small-font-size{font-family:var(--ss-font-brand);font-size:15px;line-height:1.5;color:var(--ss-navy-600)}

/* --- Links im Text: erben Literata, unterstrichen (im Fließtext Pflicht, Farbe allein reicht nicht) --- */
:where(.entry-content, .wp-block-post-content) :where(p, li, td, dd) a{color:var(--ss-ocean-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--ss-transition,120ms ease-out)}
:where(.entry-content, .wp-block-post-content) :where(p, li, td, dd) a:hover{color:var(--ss-navy)}
/* Lange Adressen brechen um, sonst horizontales Scrollen bei 320/768px. (F-Adressen, 23.09.2026) */
:where(.entry-content, .wp-block-post-content) :where(p, li, dd) a{overflow-wrap:anywhere}
:where(.entry-content, .wp-block-post-content) a:focus-visible{outline:var(--ss-focus-width) solid var(--ss-focus-color);outline-offset:var(--ss-focus-offset);border-radius:2px}

/* --- Listen --- */
:where(.entry-content, .wp-block-post-content) :where(ul, ol){padding-inline-start:24px}
:where(.entry-content, .wp-block-post-content) li + li{margin-block-start:8px}
:where(.entry-content, .wp-block-post-content) ul li::marker{color:var(--ss-ocean-deep)}
:where(.entry-content, .wp-block-post-content) ol li::marker{font-family:var(--ss-font-brand);font-weight:600;color:var(--ss-navy-600)}

/* --- Zitat: wie Komponente Zitat, Sand-100, einzige Ausnahme der Bildpalette in der UI --- */
:where(.entry-content, .wp-block-post-content) :where(blockquote, .wp-block-quote, .wp-block-pullquote){background:var(--ss-sand-100);border:0;border-radius:8px;padding:32px;margin-inline:0;box-sizing:border-box}
:where(.entry-content, .wp-block-post-content) :where(.wp-block-quote, blockquote) p{font-size:24px;line-height:1.5;margin:0}
:where(.entry-content, .wp-block-post-content) :where(blockquote, .wp-block-quote, .wp-block-pullquote) cite{display:block;margin-top:16px;font-family:var(--ss-font-brand);font-style:normal;font-size:15px;color:var(--ss-navy-600)}
:where(.entry-content, .wp-block-post-content) .wp-block-pullquote{text-align:left;max-width:670px}
:where(.entry-content, .wp-block-post-content) :where(.wp-block-quote, .wp-block-pullquote) blockquote{padding:0;background:none;margin:0;border-radius:0}

/* --- Buttons: wie Komponente Button. Standard = primär, Stil „Umriss“ = sekundär. --- */
:where(.entry-content, .wp-block-post-content) .wp-block-buttons{display:flex;flex-wrap:wrap;gap:16px}
:where(.entry-content, .wp-block-post-content) .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ss-hit-min);box-sizing:border-box;padding:12px 24px;border-radius:4px;border:2px solid var(--ss-ocean-deep);background:var(--ss-ocean-deep);color:#fff;font-family:var(--ss-font-brand);font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;box-shadow:none;transition:background-color var(--ss-transition,120ms ease-out),border-color var(--ss-transition,120ms ease-out),color var(--ss-transition,120ms ease-out)}
:where(.entry-content, .wp-block-post-content) .wp-block-button__link:hover{background:var(--ss-navy);border-color:var(--ss-navy);color:#fff}
:where(.entry-content, .wp-block-post-content) .is-style-outline .wp-block-button__link{background:transparent;color:var(--ss-ocean-deep)}
:where(.entry-content, .wp-block-post-content) .is-style-outline .wp-block-button__link:hover{background:transparent;border-color:var(--ss-navy);color:var(--ss-navy)}
:where(.entry-content, .wp-block-post-content) .wp-block-button__link:focus-visible{outline:var(--ss-focus-width) solid var(--ss-focus-color);outline-offset:var(--ss-focus-offset)}

/* --- Bilder: 8px Kante, Bildunterschrift in Ysabeau 15px --- */
:where(.entry-content, .wp-block-post-content) figure{margin-inline:0}
:where(.entry-content, .wp-block-post-content) .wp-block-image img{display:block;max-width:100%;height:auto;border-radius:8px}
:where(.entry-content, .wp-block-post-content) figcaption, :where(.entry-content, .wp-block-post-content) .wp-element-caption{margin-top:8px;font-family:var(--ss-font-brand);font-size:15px;line-height:1.5;color:var(--ss-navy-600);text-align:left}
:where(.entry-content, .wp-block-post-content) .wp-block-embed iframe{border-radius:8px;max-width:100%}

/* --- Tabellen: Ysabeau (Daten werden überflogen), Linien statt Kästchen --- */
:where(.entry-content, .wp-block-post-content) .wp-block-table{overflow-x:auto}
:where(.entry-content, .wp-block-post-content) table{width:100%;border-collapse:collapse;font-family:var(--ss-font-brand);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
:where(.entry-content, .wp-block-post-content) :where(th, td){text-align:left;vertical-align:top;padding:12px 16px 12px 0;border:0;border-bottom:1px solid var(--ss-navy-200)}
:where(.entry-content, .wp-block-post-content) thead th{font-weight:600;color:var(--ss-navy-600);border-bottom-color:var(--ss-navy-300)}
:where(.entry-content, .wp-block-post-content) .is-style-stripes tbody tr:nth-child(odd){background:var(--ss-navy-100)}

/* --- Trenner, Aufklapper, Gruppen --- */
:where(.entry-content, .wp-block-post-content) :where(hr, .wp-block-separator){border:0;border-top:1px solid var(--ss-navy-200);margin-block:48px;max-width:none;opacity:1}
:where(.entry-content, .wp-block-post-content) .wp-block-details{border-top:1px solid var(--ss-navy-200);border-bottom:1px solid var(--ss-navy-200)}
:where(.entry-content, .wp-block-post-content) .wp-block-details + .wp-block-details{margin-block-start:0;border-top:0}
:where(.entry-content, .wp-block-post-content) .wp-block-details summary{display:flex;align-items:center;min-height:var(--ss-hit-min);padding:12px 0;font-family:var(--ss-font-brand);font-size:20px;font-weight:600;line-height:1.3;cursor:pointer}
:where(.entry-content, .wp-block-post-content) .wp-block-details summary:focus-visible{outline:var(--ss-focus-width) solid var(--ss-focus-color);outline-offset:var(--ss-focus-offset)}
:where(.entry-content, .wp-block-post-content) .wp-block-details > :not(summary){margin:0 0 24px}
/* Gruppe mit Hintergrund: nur Navy-100 als ruhige Fläche. Navy-Flächen gibt es im Inhalt nicht. */
:where(.entry-content, .wp-block-post-content) .wp-block-group.has-background{border-radius:8px;padding:32px}

/* --- Rechtstexte (Impressum, Datenschutz): viele Abschnitte, darum eine Stufe ruhiger.
       Seite bzw. Container bekommt die Klasse .ss-rechtstext. h2 = 24px, h3 = 20px. --- */
.ss-rechtstext :where(.entry-content, .wp-block-post-content) h2, :where(.entry-content, .wp-block-post-content).ss-rechtstext h2{font-size:24px;margin-block-start:48px}
.ss-rechtstext :where(.entry-content, .wp-block-post-content) h3, :where(.entry-content, .wp-block-post-content).ss-rechtstext h3{font-size:20px;margin-block-start:32px}

/* --- Code, selten, aber dann lesbar --- */
:where(.entry-content, .wp-block-post-content) :where(code, kbd){font-size:.9em;background:var(--ss-navy-100);border-radius:4px;padding:2px 4px}

/* Zentrierung mit höherer Spezifität, weil WordPress die :where()-Regel sonst schlägt.
   Erst ab 1200px: darunter braucht WordPress seine negativen Ränder, sonst laufen Seitentitel
   und Inhalt links auseinander. (F4, 23.09.2026; Selektor am Theme prüfen) */
@media (min-width:1200px){
  .wp-site-blocks .entry-content, .wp-site-blocks .wp-block-post-content{margin-left:auto;margin-right:auto}
}

@media (prefers-reduced-motion: reduce){
  :where(.entry-content, .wp-block-post-content) *{transition:none !important}
}