/*
 * DIAPHOTIZO – ZUSÄTZLICHES CSS
 * Bereinigte Ersatzfassung · Version 2 · 28.09.2026
 * Ersetzt den gesamten bisherigen Inhalt von »Zusätzliches CSS«.
 *
 * 1. Farben und Schriften    5. Formulare und Schaltflächen
 * 2. Texte und Inhalte      6. Footer und Newsletter
 * 3. Textheader             7. Teilen-Buttons: vier feste Reihen
 * 4. Hauptnavigation
 *
 * Gilt für Hemingway Rewritten mit dem Childtheme Diaphotizo Social.
 * Darkmode-Umschaltung, Kacheln/Manrope und das Jetpack-Kommentarformular
 * bleiben in ihren vorhandenen Theme-/Seiten-/Plugin-Einstellungen.
 * Die bestehenden --dia-Variablen sind Schnittstellen zum Darkmode.
 */

/* 1. FARBEN UND SCHRIFTEN ----------------------------------------- */

body.wp-theme-hemingway-rewritten {
  --dia-petrol: #163d43;
  --dia-petrol-dark: #102f34;
  --dia-turquoise: #316d6c;
  --dia-turquoise-light: #a9cfca;
  --dia-sage: #91a58f;
  --dia-paper: #f1f4f2;
  --dia-ink: #263b3f;
  --dia-muted: #526568;
  --dia-line: #cbd6d0;
  --dia-white: #ffffff;
  --dia-font: Lato, "Segoe UI", sans-serif;
  --dia-button-bg: var(--dia-petrol);
  --dia-button-ink: var(--dia-white);
  --dia-button-hover: var(--dia-turquoise);
  --dia-outline-ink: var(--dia-petrol);
  --dia-focus: var(--dia-petrol);
}

body.wp-theme-hemingway-rewritten #page {
  color: var(--dia-ink);
  background-color: var(--dia-white);
  font-family: var(--dia-font);
}

/* Helle Bedienelemente auf den dauerhaft dunklen Flächen. */
body.wp-theme-hemingway-rewritten #page :is(.main-navigation, .site-footer) {
  --dia-focus: var(--dia-turquoise-light);
  --dia-button-bg: var(--dia-turquoise-light);
  --dia-button-ink: var(--dia-petrol-dark);
  --dia-button-hover: var(--dia-white);
  --dia-outline-ink: var(--dia-turquoise-light);
}

/* 2. TEXTE UND INHALTE -------------------------------------------- */

body.wp-theme-hemingway-rewritten #page :is(.entry-content, .entry-summary, .comment-content) {
  line-height: 1.7;
}

body.wp-theme-hemingway-rewritten #page :is(h1, h2, h3, h4, h5, h6) {
  color: var(--dia-petrol);
  font-family: var(--dia-font);
}

body.wp-theme-hemingway-rewritten #page :is(.entry-meta, .entry-meta a, .wp-caption-text, figcaption) {
  color: var(--dia-muted);
}

body.wp-theme-hemingway-rewritten #page a {
  color: var(--dia-turquoise);
  text-underline-offset: 0.18em;
}

body.wp-theme-hemingway-rewritten #page :is(.entry-content, .entry-summary, .comment-content) a:not(.wp-block-button__link):not(.wp-block-file__button):not(.wp-block-social-link-anchor) {
  text-decoration: underline;
}

body.wp-theme-hemingway-rewritten #page a:is(:hover, :focus-visible, :active) {
  color: var(--dia-petrol-dark);
}

body.wp-theme-hemingway-rewritten #page .entry-title a {
  color: var(--dia-petrol);
}

body.wp-theme-hemingway-rewritten #page .entry-title a:is(:hover, :focus-visible) {
  color: var(--dia-turquoise);
}

/* Folgen-Navigation: dieselbe Größe wie die umgebenden Links. */
.diaphotizo-folgen-nav h3 {
  font-size: 18px !important;
}

body.wp-theme-hemingway-rewritten #page blockquote {
  color: var(--dia-ink);
  background-color: var(--dia-paper);
  border-inline-start: 4px solid var(--dia-sage);
  font-family: var(--dia-font);
  line-height: 1.7;
}

body.wp-theme-hemingway-rewritten #page blockquote cite {
  color: var(--dia-muted);
}

body.wp-theme-hemingway-rewritten #page :is(hr, .wp-block-separator) {
  background-color: var(--dia-line);
  color: var(--dia-line);
  border-color: var(--dia-line);
}

body.wp-theme-hemingway-rewritten #page :is(.comment-navigation, .paging-navigation, .post-navigation) {
  border-color: var(--dia-line);
}

/* Ruhiger Abschluss der Einzelansichten von Artikeln und Podcasts.
 * Kategorien/Archive bleiben erhalten; nur ihre Fußzeile wird ausgeblendet.
 * Die eigene Folgen-Navigation und ähnliche Beiträge bleiben unverändert.
 */
body.single-post.wp-theme-hemingway-rewritten #page #main > article.post {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

body.single-post.wp-theme-hemingway-rewritten #page #main > article.post > footer.entry-meta {
  margin-top: 0;
  margin-bottom: 0;
}

body.single-post.wp-theme-hemingway-rewritten #page #main > article.post > footer.entry-meta .entry-categories,
body.single-post.wp-theme-hemingway-rewritten #page #main > .post-navigation {
  display: none;
}

/* Nur eine feine Linie, direkt vor den Kommentaren. */
body.single-post.wp-theme-hemingway-rewritten #page #comments.comments-area {
  border-top: 1px solid var(--dia-line);
  margin-top: 32px;
  padding-top: 24px;
}

body.wp-theme-hemingway-rewritten #page .format-aside .entry-content {
  background-color: var(--dia-paper);
}

body.wp-theme-hemingway-rewritten #page .format-quote .entry-content {
  background-color: var(--dia-paper);
  color: var(--dia-ink);
}

body.wp-theme-hemingway-rewritten #page :is(.featured-image .flag, .entry-tags a) {
  background-color: var(--dia-petrol);
  color: var(--dia-white);
}

body.wp-theme-hemingway-rewritten #page .entry-tags a::after {
  border-right-color: var(--dia-petrol);
}

body.wp-theme-hemingway-rewritten #page .entry-tags a:is(:hover, :focus-visible) {
  background-color: var(--dia-turquoise);
  color: var(--dia-white);
}

body.wp-theme-hemingway-rewritten #page .entry-tags a:is(:hover, :focus-visible)::after {
  border-right-color: var(--dia-turquoise);
}

body.wp-theme-hemingway-rewritten #page ::selection {
  color: var(--dia-petrol-dark);
  background-color: #dfeae3;
}

/* 3. TEXTHEADER --------------------------------------------------- */

/* Die helle Headerfläche ist bewusst von der dunklen Navigation getrennt. */
body.wp-theme-hemingway-rewritten #page #masthead,
body.wp-theme-hemingway-rewritten #page #masthead .site-branding {
  background-color: #f1f4f2;
}

body.wp-theme-hemingway-rewritten #page #masthead .site-header-image {
  background-image: none;
  min-height: 0;
  padding: 24px 0 22px;
}

body.wp-theme-hemingway-rewritten #page #masthead .site-branding {
  position: static;
  clip: auto;
  display: block;
  width: 1040px;
  max-width: 86%;
  margin: 0 auto;
  padding: 0;
}

body.wp-theme-hemingway-rewritten #page #masthead .site-title,
body.wp-theme-hemingway-rewritten #page #masthead .site-description {
  position: static;
  clip: auto;
  text-align: left;
  width: auto;
}

body.wp-theme-hemingway-rewritten #page #masthead .site-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 0;
}

body.wp-theme-hemingway-rewritten #page #masthead .site-title a {
  color: #163d43;
  text-decoration: none;
}

body.wp-theme-hemingway-rewritten #page #masthead .site-title a:is(:hover, :focus-visible) {
  color: #316d6c;
}

body.wp-theme-hemingway-rewritten #page #masthead .site-description {
  font-family: var(--dia-font);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.035em;
  color: #316d6c;
  opacity: 1;
  margin: 7px 0 0;
}

body.wp-theme-hemingway-rewritten #page #masthead .site-description::before {
  content: none;
  display: none;
}

/* Freigegebene Endgrößen; ersetzen die früheren +2-/+1-Nachträge. */
.site-title { font-size: 47px !important; }
.site-description { font-size: 18px !important; }

@media (max-width: 800px) {
  body.wp-theme-hemingway-rewritten #page #masthead .site-header-image {
    padding: 18px 0;
  }
  body.wp-theme-hemingway-rewritten #page #masthead .site-description {
    margin-top: 5px;
  }
  .site-title { font-size: 37px !important; }
  .site-description { font-size: 17px !important; }
}

@media (min-width: 801px) {
  body.wp-theme-hemingway-rewritten #page #masthead .site-branding {
    display: grid;
    grid-template-columns: max-content;
    justify-content: start;
  }
  body.wp-theme-hemingway-rewritten #page #masthead .site-description {
    text-align: right;
  }
}

/* 4. HAUPTNAVIGATION ---------------------------------------------- */

body.wp-theme-hemingway-rewritten #page :is(.main-navigation, .main-navigation .menu, .main-navigation ul ul li, .site-footer),
body.wp-theme-hemingway-rewritten #header-search.toggled {
  background-color: var(--dia-petrol);
}

body.wp-theme-hemingway-rewritten #page .main-navigation a {
  color: #e2ece8;
  background-color: var(--dia-petrol);
}

body.wp-theme-hemingway-rewritten #page .main-navigation :is(li:hover, li.focus, .current-menu-item, .current_page_item) > a,
body.wp-theme-hemingway-rewritten #page .main-navigation a:focus-visible {
  color: var(--dia-white);
  background-color: var(--dia-petrol-dark);
  text-decoration: underline;
  text-decoration-color: var(--dia-turquoise-light);
}

body.wp-theme-hemingway-rewritten #page .main-navigation li::before {
  color: var(--dia-sage);
}

body.wp-theme-hemingway-rewritten #site-navigation #primary-menu > li::before {
  content: none;
  display: none;
}

body.wp-theme-hemingway-rewritten #page .menu-toggle {
  background-color: var(--dia-petrol);
}

body.wp-theme-hemingway-rewritten #page .menu-toggle:is(:hover, :focus-visible) {
  background-color: var(--dia-petrol-dark);
}

body.wp-theme-hemingway-rewritten #page .menu-toggle::before,
body.wp-theme-hemingway-rewritten #header-search-toggle::before {
  color: var(--dia-turquoise-light);
}

/* 5. FORMULARE UND SCHALTFLÄCHEN ---------------------------------- */

/* !important ist hier wegen direkt im Block gespeicherter Farben nötig. */
body.wp-theme-hemingway-rewritten #page :is(.wp-block-button__link, .wp-block-file__button, button[type="submit"], input[type="submit"], input[type="button"], input[type="reset"]) {
  color: var(--dia-button-ink) !important;
  background-color: var(--dia-button-bg) !important;
  background-image: none !important;
  border-color: var(--dia-button-bg) !important;
  font-family: var(--dia-font);
  text-decoration: none;
}

body.wp-theme-hemingway-rewritten #page :is(.wp-block-button__link, .wp-block-file__button, button[type="submit"], input[type="submit"], input[type="button"], input[type="reset"]):is(:hover, :focus-visible, :active) {
  background-color: var(--dia-button-hover) !important;
  border-color: var(--dia-button-hover) !important;
  text-decoration: underline;
}

body.wp-theme-hemingway-rewritten #page .wp-block-button.is-style-outline > .wp-block-button__link,
body.wp-theme-hemingway-rewritten #page .wp-block-button__link.is-style-outline {
  color: var(--dia-outline-ink) !important;
  background-color: transparent !important;
  border-color: var(--dia-outline-ink) !important;
}

body.wp-theme-hemingway-rewritten #page .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible, :active),
body.wp-theme-hemingway-rewritten #page .wp-block-button__link.is-style-outline:is(:hover, :focus-visible, :active) {
  color: var(--dia-button-ink) !important;
  background-color: var(--dia-button-bg) !important;
}

body.wp-theme-hemingway-rewritten #page :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea, select) {
  color: var(--dia-ink);
  background-color: var(--dia-white);
  border-color: var(--dia-muted);
  font-family: var(--dia-font);
}

body.wp-theme-hemingway-rewritten #page input::placeholder,
body.wp-theme-hemingway-rewritten #page textarea::placeholder {
  color: var(--dia-muted);
  opacity: 1;
}

body.wp-theme-hemingway-rewritten #page :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--dia-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--dia-white);
}

body.wp-theme-hemingway-rewritten #page .screen-reader-text:focus {
  color: var(--dia-petrol-dark);
  background-color: var(--dia-white);
}

/* 6. FOOTER UND NEWSLETTER ---------------------------------------- */

.site-info .powered-by,
.site-info a[href*="wordpress.com"] {
  display: none !important;
}

.site-info {
  text-align: center;
  padding-top: 10px;
}

.site-info::before {
  content: "© 2025 Diaphotizo – Eine unabhängige Plattform für demokratische Öffentlichkeit.";
  display: block;
}

body.wp-theme-hemingway-rewritten #page :is(.site-footer, .site-footer .site-info) {
  color: #d2e0dc;
}

body.wp-theme-hemingway-rewritten #page .site-footer :is(h1, h2, h3, h4, h5, h6) {
  color: var(--dia-white);
}

body.wp-theme-hemingway-rewritten #page .site-footer a {
  color: var(--dia-turquoise-light);
}

body.wp-theme-hemingway-rewritten #page .site-footer a:is(:hover, :focus-visible, :active) {
  color: var(--dia-white);
}

/* Nur auf der Startseite steht die Anmeldung bereits im Seiteninhalt. */
body.home #colophon #block-10,
body.home #colophon #block-11 {
  display: none;
}

/* 7. TEILEN-BUTTONS ------------------------------------------------ */

/* Eigene Farbvariablen: unabhängig von den normalen Artikel-Buttons. */
body.wp-child-theme-diaphotizo-social {
  --dia-share-bg: #163d43;
  --dia-share-hover: #102f34;
  --dia-share-focus: #316d6c;
  --dia-share-ink: #ffffff;
}

html[data-dia-theme="dark"] body.wp-child-theme-diaphotizo-social {
  --dia-share-bg: #24454b;
  --dia-share-hover: #31585f;
  --dia-share-focus: #8bd6c5;
}

/* Vier feste Reihen auf PC und Handy, ohne Gruppenbeschriftungen.
 * Reihenfolge auch unter Einstellungen > Teilen beibehalten,
 * damit Tastatur- und Bildschirmlesereihenfolge mit der Optik übereinstimmen.
 */
body.wp-child-theme-diaphotizo-social #page .sd-sharing .sd-content ul {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-areas:
    "masto x bluesky"
    "facebook linkedin reddit"
    "whatsapp telegram ."
    "email print .";
  gap: 12px 10px;
  align-items: center;
  justify-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-mastodon { grid-area: masto; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-twitter { grid-area: x; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-bluesky { grid-area: bluesky; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-facebook { grid-area: facebook; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-linkedin { grid-area: linkedin; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-reddit { grid-area: reddit; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-jetpack-whatsapp { grid-area: whatsapp; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-telegram { grid-area: telegram; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-email { grid-area: email; }
body.wp-child-theme-diaphotizo-social #page .sd-sharing li.share-print { grid-area: print; }

body.wp-child-theme-diaphotizo-social #page .sd-sharing .sd-content ul li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}

body.wp-child-theme-diaphotizo-social #page .sd-sharing .sd-content ul li.share-end {
  display: none;
}

/* 44 × 44 px Klickfläche, darin ein sichtbarer Kreis mit 32 px. */
body.wp-child-theme-diaphotizo-social #page .sd-sharing .sd-content ul li a.sd-button.share-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 6px !important;
  margin: 0;
  border: 0 !important;
  border-radius: 50%;
  background-color: var(--dia-share-bg) !important;
  background-image: none !important;
  background-clip: content-box !important;
  color: var(--dia-share-ink) !important;
  box-shadow: none !important;
  line-height: 1;
  transition: background-color 150ms ease;
  text-decoration: none !important;
  vertical-align: middle;
}

body.wp-child-theme-diaphotizo-social #page .sd-sharing .sd-content ul li a.sd-button.share-icon::before {
  display: block;
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 0;
  color: var(--dia-share-ink) !important;
  font-size: 20px;
  line-height: 1;
  text-indent: 0;
}

/* Namen bleiben für Bildschirmlesegeräte erhalten, sichtbar nur Symbole. */
body.wp-child-theme-diaphotizo-social #page .sd-sharing .sd-content ul li a.sd-button.share-icon > span:not([hidden]) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.wp-child-theme-diaphotizo-social #page .sd-sharing .sd-content ul li a.sd-button.share-icon:hover {
  background-color: var(--dia-share-hover) !important;
}

body.wp-child-theme-diaphotizo-social #page .sd-sharing .sd-content ul li a.sd-button.share-icon:focus-visible {
  outline: 3px solid var(--dia-share-focus) !important;
  outline-offset: 3px;
}