/*
Theme Name: 3 Eulen
Author: 3 Eulen Design
Description: Klassisches Theme für 3 Eulen Design auf Basis von Bulma. Drei Eulen auf einem Ast im Startseitenkopf, Druckschicht-Optik, Hell- und Dunkelmodus sowie ein „Zu früh“-Modus für die Zeit vor dem Start.
Version: 1.6.0
Requires at least: 6.3
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drei-eulen
Tags: e-commerce, one-column, custom-logo, custom-menu, featured-images, footer-widgets, threaded-comments, translation-ready
*/

/* ------------------------------------------------------------------
   Farben & Bulma-Anpassung
   ------------------------------------------------------------------ */

:root {
  --sky: #E3ECF3;
  --paper: #F8FAFC;
  --paper-raised: #FFFFFF;
  --ink: #1E2B38;
  --ink-body: #2E3B48;
  --ink-soft: #4C5B6A;
  --rule: #D3DDE6;
  --field-border: #7E8FA0; /* Rand von Eingabefeldern, mind. 3:1 zum Grund */
  --link: #3D5C80;
  --link-hover: #24405F;
  --branch: #6E5340;
  --leaf: #93A86B;
  --owl-a: #D69A3F;
  --owl-b: #4F6D8F;
  --owl-c: #7C8A52;
  --face: #F4F0E8;
  --beak: #C2662B;
  --eye: #22303D;
  --layer: rgba(0, 0, 0, .13);
  --focus: #D69A3F;

  /* Bulma: Primärfarbe = Schiefer-Eule, Schrift auf Buttons weiß */
  --bulma-primary-h: 212deg;
  --bulma-primary-s: 29%;
  --bulma-primary-l: 44%;
  --bulma-primary-invert-l: 100%;
  /* Bulma-Linkfarbe (Paginierung, Dropdown-Pfeil) ebenfalls Schiefer statt Indigo */
  --bulma-link-h: 212deg;
  --bulma-link-s: 32%;
  --bulma-link-l: 40%;
  --bulma-link-on-scheme-l: 37%;
  --bulma-link-invert-l: 100%;
  --bulma-family-primary: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  --bulma-body-background-color: var(--paper);

  /* Browser-eigene Teile (Felder ohne eigene Gestaltung, Scrollleisten,
     Datumsauswahl) im passenden Schema zeichnen */
  color-scheme: light;
}

/* Dunkel: per Schalter/Profil (data-theme="dark") oder, wenn nichts gewählt
   ist, nach Betriebssystem. Die Werte stehen bewusst zweimal hier. */
:root[data-theme="dark"] {
  --sky: #16202B;
  --paper: #1B2632;
  --paper-raised: #222F3C;
  --ink: #E5ECF2;
  --ink-body: #CDD6DF;
  --ink-soft: #A7B5C2;
  --rule: #2E3C4A;
  --field-border: #6A7E92;
  --link: #9DBCE0;
  --link-hover: #C6DBF2;
  --branch: #8C6B51;
  --face: #DCD6CB;
  --eye: #16202B;
  --layer: rgba(0, 0, 0, .2);
  --bulma-link-on-scheme-l: 75%;
  /* Bulmas eigene Flächen (Felder, Zitate, Tags, Dropdowns) im Schiefer-
     Ton des Themes statt in Bulmas neutralem Grau */
  --bulma-scheme-h: 210deg;
  --bulma-scheme-s: 30%;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --sky: #16202B;
    --paper: #1B2632;
    --paper-raised: #222F3C;
    --ink: #E5ECF2;
    --ink-body: #CDD6DF;
    --ink-soft: #A7B5C2;
    --rule: #2E3C4A;
    --field-border: #6A7E92;
    --link: #9DBCE0;
    --link-hover: #C6DBF2;
    --branch: #8C6B51;
    --face: #DCD6CB;
    --eye: #16202B;
    --layer: rgba(0, 0, 0, .2);
    --bulma-link-on-scheme-l: 75%;
    --bulma-scheme-h: 210deg;
    --bulma-scheme-s: 30%;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------ */

html,
body {
  background-color: var(--paper);
}

body {
  color: var(--ink-body);
  font-family: var(--bulma-family-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1 0 auto;
  overflow-x: clip;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.title {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.subtitle {
  color: var(--ink-soft);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  top: 1rem;
  color: var(--paper);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* Lesebreite für Fließtext (Selektor so spezifisch wie Bulmas .container-Regeln) */
.container.reading:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
  max-width: 46rem;
}

/* ------------------------------------------------------------------
   Kopfzeile
   ------------------------------------------------------------------ */

.site-header {
  background-color: var(--sky);
}

.site-header .navbar {
  background-color: transparent;
}

.site-brand {
  gap: .6rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}

.site-brand .site-logo {
  max-height: 2.5rem;
  width: auto;
}

.brand-owl {
  width: 1.6rem;
  height: auto;
  flex: none;
}

.brand-owl .body { fill: var(--owl-b); }
.brand-owl .face { fill: var(--face); }
.brand-owl .beak { fill: var(--beak); }

@media screen and (max-width: 1023px) {
  .site-header .navbar-menu.is-active {
    background-color: var(--sky);
    box-shadow: none;
    border-top: 1px solid var(--rule);
  }

  /* Unterpunkte mobil eingerückt statt auf weißem Band. Bulma färbt
     auch die einzelnen Einträge, deshalb beide zurücksetzen. */
  .site-header .navbar-dropdown {
    background-color: transparent;
    padding-block: 0;
    padding-inline-start: .75rem;
  }

  .site-header .navbar-dropdown .navbar-item:not(.is-active, .is-selected) {
    background-color: transparent;
    color: var(--ink-body);
  }

  .site-header .navbar-dropdown .navbar-item:not(.is-active, .is-selected):hover {
    color: var(--ink);
  }
}

/* Dropdown am Desktop auf Papier statt in Bulmas Weiß bzw. Schwarz */
@media screen and (min-width: 1024px) {
  .site-header .navbar-dropdown {
    background-color: var(--paper-raised);
    border-top-color: var(--rule);
  }

  .site-header .navbar-dropdown .navbar-item:not(.is-active, .is-selected) {
    background-color: transparent;
    color: var(--ink-body);
  }

  .site-header .navbar-dropdown .navbar-item:not(.is-active, .is-selected):hover {
    background-color: var(--sky);
    color: var(--ink);
  }
}

/* ------------------------------------------------------------------
   Eulen
   ------------------------------------------------------------------ */

.eulen-hero {
  background-color: var(--sky);
}

.eulen-hero .hero-body {
  padding-block: 3.5rem 4rem;
}

.eulen-hero .subtitle {
  max-width: 34rem;
  margin-inline: auto;
  line-height: 1.55;
}

.owls {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin: 0 auto 2.25rem;
}

.owls .branch { fill: none; stroke: var(--branch); stroke-width: 9; stroke-linecap: round; }
.owls .branch.twig { stroke-width: 4; }
.owls .leaf { fill: var(--leaf); }

.lid { fill: none; stroke: var(--eye); stroke-width: 2.4; stroke-linecap: round; transition: opacity .1s; }
.pupil { fill: var(--eye); }
.glint { fill: #fff; }
.eye .open { opacity: 0; transition: opacity .1s; }

/* Schlafende Eulen: ein zufälliges Auge geht kurz auf, beim Drüberfahren wird die Eule wach */
.eye.is-open .open,
.owl:hover .open { opacity: 1; }
.eye.is-open .lid,
.owl:hover .lid { opacity: 0; }

/* Wache Eulen (404): Augen offen, ab und zu blinzelt eine */
.owls--awake .eye .open { opacity: 1; }
.owls--awake .eye .lid { opacity: 0; }
.owls--awake .owl.is-blinking .open { opacity: 0; }
.owls--awake .owl.is-blinking .lid { opacity: 1; }

/* Anmeldeseite: Solange jemand ein Passwort tippt, halten die Eulen die Augen zu */
.owls--awake.owls--shy .eye .open { opacity: 0; }
.owls--awake.owls--shy .eye .lid { opacity: 1; }

/* ------------------------------------------------------------------
   Beiträge & Seiten
   ------------------------------------------------------------------ */

.page-head {
  margin-bottom: 2.5rem;
}

.page-head .archive-description {
  color: var(--ink-soft);
  margin-top: .75rem;
}

.entry-meta {
  color: var(--ink-soft);
  font-size: .9rem;
  margin-bottom: .4rem;
}

.entry-meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: .2em;
}

.entry-header {
  margin-bottom: 2rem;
}

.entry-header .title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.12;
}

.entry-thumb {
  margin: 0 0 2rem;
}

.entry-thumb img {
  border-radius: 10px;
  width: 100%;
  height: auto;
}

/* Beitragsliste */
.entry-summary.media {
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
  margin-top: 1.75rem;
}

.entry-summary.media:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.entry-summary .title a {
  color: var(--ink);
}

.entry-summary .title a:hover {
  color: var(--link);
}

.entry-summary-thumb img {
  display: block;
  width: 9rem;
  height: auto;
  border-radius: 8px;
}

@media screen and (max-width: 600px) {
  .entry-summary-thumb img {
    width: 5.5rem;
  }
}

/* Inhalt aus dem Editor */
.entry-content {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.entry-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.entry-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ink);
}

.entry-content > .alignwide {
  margin-inline: max(-7rem, calc(50% - 50vw + 1.5rem));
  max-width: none;
}

.entry-content > .alignfull {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }

.wp-caption-text,
.wp-element-caption,
.gallery-caption {
  color: var(--ink-soft);
  font-size: .875rem;
  margin-top: .5rem;
}

.entry-footer {
  margin-top: 2.5rem;
}

.page-links {
  margin-top: 2rem;
  font-weight: 600;
}

/* Vor/Zurück unter Beiträgen */
.post-navigation {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.post-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}

.post-navigation .nav-next {
  margin-left: auto;
  text-align: right;
}

.post-navigation .nav-label {
  display: block;
  color: var(--ink-soft);
  font-size: .85rem;
}

.post-navigation .nav-title {
  font-weight: 600;
}

/* Paginierung */
.pagination {
  margin-top: 3rem;
}

/* ------------------------------------------------------------------
   Kommentare
   ------------------------------------------------------------------ */

.comments-area {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.comment-list,
.comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .children {
  margin-left: 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--rule);
}

.comment-body {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}

.comment-author {
  font-weight: 600;
  color: var(--ink);
}

.comment-author .avatar {
  border-radius: 50%;
  vertical-align: middle;
  margin-right: .6rem;
}

.comment-author .says {
  display: none;
}

.comment-metadata {
  font-size: .85rem;
  margin: .25rem 0 .75rem;
}

.comment-metadata a {
  color: var(--ink-soft);
}

.comment-awaiting-moderation {
  color: var(--ink-soft);
  font-style: italic;
}

.reply {
  font-size: .9rem;
  margin-top: .5rem;
}

.comment-respond {
  margin-top: 2.5rem;
}

.comment-form .field {
  margin-bottom: 1rem;
}

.comment-notes,
.logged-in-as {
  color: var(--ink-soft);
  font-size: .9rem;
  margin-bottom: 1rem;
}

.comment-form .required {
  color: var(--beak);
}

/* ------------------------------------------------------------------
   Fußzeile
   ------------------------------------------------------------------ */

.site-footer {
  position: relative;
  background-color: var(--sky);
  padding: 3.5rem 1.5rem 2rem;
  color: var(--ink-soft);
}

/* Ein Streifen Druckschichten als Kante */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 13px;
  background: repeating-linear-gradient(to bottom, var(--paper) 0 3px, var(--layer) 3px 4px);
}

.footer-brand {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: .35rem;
}

/* Überschriften klassischer Widgets und von Block-Widgets (z. B. Archiv,
   Kategorien), die WordPress beim Theme-Wechsel in die Fußzeile legt */
.site-footer .widget-title,
.site-footer .widget :is(h2, h3, .wp-block-heading) {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.site-footer .widget + .widget {
  margin-top: 1.5rem;
}

.footer-menu,
.legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu li,
.legal-links li {
  margin-bottom: .35rem;
}

.footer-copy {
  margin-top: 2.5rem;
  font-size: .875rem;
}

/* „Zu früh“-Seite */
.is-coming-soon .footer-note {
  color: var(--ink-soft);
  font-size: .875rem;
  padding: 1.25rem;
}

.is-coming-soon .legal-links {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: .5rem;
}

@media (max-width: 480px) {
  .eulen-hero .title.is-1 {
    font-size: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lid,
  .eye .open {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Navigation: Hell/Dunkel-Schalter und Login
   ------------------------------------------------------------------ */

.navbar-brand .brand-switch {
  margin-inline-start: auto;
  padding-inline: .25rem;
}

.navbar-brand .brand-switch + .navbar-burger {
  margin-inline-start: 0;
}

.theme-switch {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}

.theme-switch__track {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background-color: var(--paper);
  transition: background-color .2s;
}

.theme-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--owl-a);
  display: grid;
  place-items: center;
  transition: transform .2s ease, background-color .2s;
}

.theme-switch svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  grid-area: 1 / 1;
}

.theme-switch .icon-moon { fill: #fff; stroke: none; opacity: 0; }

.theme-switch[aria-checked="true"] .theme-switch__track { background-color: var(--sky); }
.theme-switch[aria-checked="true"] .theme-switch__thumb { transform: translateX(22px); background-color: var(--owl-b); }
.theme-switch[aria-checked="true"] .icon-sun { opacity: 0; }
.theme-switch[aria-checked="true"] .icon-moon { opacity: 1; }

.login-button {
  font-weight: 600;
}

/* ------------------------------------------------------------------
   Startseite
   ------------------------------------------------------------------ */

.eulen-hero.is-front .hero-body {
  padding-block: 3.5rem 4.5rem;
}

.hero-title {
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.6rem);
  line-height: 1.08;
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.eulen-hero .title.hero-title {
  margin-bottom: 1.25rem;
}

.eulen-hero .title.hero-title + .subtitle {
  margin-top: 0;
}

.hero-text {
  max-width: 34rem;
  line-height: 1.55;
}

.hero-actions {
  margin-top: 2rem;
}

.hero-art .owls {
  width: min(100%, 26rem);
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .eulen-hero.is-front .columns {
    display: flex;
    flex-direction: column;
  }

  .eulen-hero.is-front .hero-art {
    order: -1;
  }

  .eulen-hero.is-front .hero-art .owls {
    width: min(80%, 17rem);
  }

  .eulen-hero.is-front .hero-body {
    padding-block: 1.5rem 3rem;
  }
}

.front-cards {
  padding-block: 3.5rem;
}

.eulen-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.35rem;
  background-color: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.eulen-card__title {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.eulen-card__more {
  margin-top: auto;
  padding-top: 1.25rem;
  font-weight: 600;
}

.eulen-card__empty {
  color: var(--ink-soft);
}

.news-list li + li {
  margin-top: .85rem;
}

.news-list time {
  display: block;
  color: var(--ink-soft);
  font-size: .8rem;
}

.news-list a {
  color: var(--ink);
  font-weight: 600;
}

.news-list a:hover {
  color: var(--link);
}

/* Instagram unter News und Team, in voller Breite (column is-full).
   Ohne Widget nur Text und Link: als schmales Band statt großer Karte */
.eulen-card--wide.is-compact {
  flex-flow: row wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
}

.eulen-card--wide.is-compact .eulen-card__title,
.eulen-card--wide.is-compact .eulen-card__text {
  margin: 0;
}

.eulen-card--wide.is-compact .eulen-card__more {
  margin: 0 0 0 auto;
  padding: 0;
}

/* Am Handy wie die anderen Karten: untereinander, Link links */
@media screen and (max-width: 768px) {
  .eulen-card--wide.is-compact {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .eulen-card--wide.is-compact .eulen-card__title {
    margin-bottom: 1rem;
  }

  .eulen-card--wide.is-compact .eulen-card__more {
    margin: 0;
    padding-top: 1.25rem;
  }
}

/* Widget-Bereich „Startseite: Karten über Instagram“: jedes Widget eine
   Karte. Mehrere stehen nebeneinander, jede mindestens 18rem breit, sonst
   rutscht die nächste in eine neue Reihe. Am Handy untereinander (Bulma). */
.front-widgets > .column {
  min-width: min(100%, 18rem);
}

.front-widget {
  min-width: 0;
}

.front-widget :is(h2, h3, h4) {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.front-widget :is(h2, h3, h4):not(:first-child) {
  margin-top: 1.25rem;
}

/* :where hält die Spezifität niedrig, damit Shortcodes mit eigener
   Gestaltung ihre Abstände behalten */
:where(.front-widget) :where(p, ul, ol, figure, blockquote, .wp-block-buttons):not(:last-child) {
  margin-bottom: .75rem;
}

/* wpautop legt um Shortcodes leere Absätze */
.front-widget p:empty {
  display: none;
}

.front-widget :is(ul, ol):not([class]) {
  padding-left: 1.25rem;
  list-style: disc;
}

.front-widget a:not(.button, .wp-block-button__link, .wp-element-button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.front-widget :is(img, iframe, video) {
  max-width: 100%;
  height: auto;
}

.front-widget img {
  border-radius: 6px;
}

/* Recycling-Karte aus dem Portal ([eulen_recycling]) liegt schon in einer
   Karte: ohne eigenen Rahmen, mittig in der Höhe der Nachbarkarten */
.front-widget .eulen-recycling-karte {
  max-width: none;
  margin: auto 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Rückfall-Widget der Instagram-Karte: nichts darf über die Karte hinausragen */
.insta-widget {
  min-width: 0;
}

.insta-widget img,
.insta-widget iframe,
.insta-widget video {
  max-width: 100%;
  height: auto;
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: .5rem;
}

.insta-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}

.team-faces {
  display: flex;
  padding-left: .6rem;
}

.team-faces li {
  margin-left: -.6rem;
}

.team-faces img,
.team-faces__initial {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--paper-raised);
}

.team-faces__initial {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  background-color: var(--owl-b);
}

.team-faces li:nth-child(3n+1) .team-faces__initial { background-color: var(--owl-a); }
.team-faces li:nth-child(3n+3) .team-faces__initial { background-color: var(--owl-c); }

.team-names {
  margin-top: .75rem;
  color: var(--ink-soft);
  font-size: .9rem;
}

/* ------------------------------------------------------------------
   Portal-Plugin: Team-Seite und Formulare
   ------------------------------------------------------------------ */

.eulen-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 2rem 1.5rem;
  margin-top: 1.5rem;
}

.eulen-team__photo img,
.eulen-team__photo .eulen-team__initial {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

.eulen-team__initial {
  display: grid !important;
  place-items: center;
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  background-color: var(--owl-b);
}

.eulen-team__member:nth-child(3n+1) .eulen-team__initial { background-color: var(--owl-a); }
.eulen-team__member:nth-child(3n+3) .eulen-team__initial { background-color: var(--owl-c); }

.content p.eulen-team__name {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  margin: .85rem 0 .1rem;
}

.content p.eulen-team__role {
  color: var(--ink-soft);
  font-size: .9rem;
  margin: 0;
}

.eulen-team__text {
  margin-top: .5rem;
  font-size: .95rem;
}

.eulen-form {
  margin-top: 1.5rem;
  padding: 1.75rem;
  background-color: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.content ol.eulen-steps:not([type]) {
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  counter-reset: step;
}

.content .eulen-steps li {
  flex: 1;
  margin: 0;
  padding-top: .6rem;
  border-top: 3px solid var(--rule);
  color: var(--ink-soft);
  font-size: .9rem;
  counter-increment: step;
}

.eulen-steps li::before {
  content: counter(step) "\00a0";
  font-weight: 700;
}

.content .eulen-steps li.is-done { border-color: var(--owl-c); }
.content .eulen-steps li.is-active { border-color: var(--owl-b); color: var(--ink); font-weight: 600; }

.eulen-step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.eulen-step + .eulen-step {
  margin-top: 2rem;
}

.is-stepped .eulen-step + .eulen-step {
  margin-top: 0;
}

/* Nur die Überschrift des Schritts. Auswahlgruppen im Schritt (Radio-
   Buttons) haben eine eigene legend.label und sehen aus wie andere Labels. */
.eulen-step > legend {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Auswahl-Knöpfe mit etwas Luft; auf schmalen Bildschirmen untereinander */
.eulen-form .control .radio {
  margin-inline: 0 1.5rem;
}

@media screen and (max-width: 480px) {
  .eulen-form .control .radio {
    display: flex;
    gap: .4em;
    margin: 0 0 .35rem;
  }
}

/* Was das Portal-Skript ausblendet (Schritt-Leiste, Weiter/Zurück, leere
   Zusammenfassung, Felder abhängig von einer Auswahl), bleibt auch dann
   unsichtbar, wenn Bulma oder das Theme dem Element ein display geben.
   Ohne JavaScript stehen so alle Schritte ohne funktionslose Knöpfe da. */
.eulen-form [hidden] {
  display: none !important;
}

.eulen-step-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
}

.eulen-step-nav .is-next {
  margin-left: auto;
}

.content .eulen-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background-color: var(--paper);
}

.content .eulen-summary dt {
  color: var(--ink-soft);
  font-size: .9rem;
}

.content .eulen-summary dd {
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 480px) {
  .content .eulen-summary {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .content .eulen-summary dd {
    margin-bottom: .6rem;
  }
}

.eulen-form .help.is-hint {
  color: var(--ink-soft);
}

/* Felder und Hinweise in den Formularen ans Farbschema angleichen */
.eulen-form .input,
.eulen-form .textarea,
.eulen-form .select select {
  background-color: var(--paper);
}

.eulen-form-wrap .notification {
  color: var(--ink);
  background-color: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left-width: 4px;
}

.eulen-form .notification {
  background-color: var(--paper);
}

.eulen-form-wrap .notification.is-danger { border-color: #C8553D; }
.eulen-form-wrap .notification.is-warning { border-color: var(--owl-a); }
.eulen-form-wrap .notification.is-success { border-color: var(--owl-c); }

/* Zweitrangige Buttons: umrandet statt gefüllt (Concept Art) */
.login-button,
.hero-actions .button:not(.is-primary),
.eulen-step-nav .button:not(.is-primary) {
  background-color: transparent;
  border-color: var(--ink-soft);
  color: var(--ink);
}

.login-button:hover,
.hero-actions .button:not(.is-primary):hover,
.eulen-step-nav .button:not(.is-primary):hover {
  background-color: var(--paper-raised);
  border-color: var(--ink);
  color: var(--ink);
}

/* Aktiver Menüpunkt: Unterstrich statt Farbfläche */
.site-header a.navbar-item.is-active,
.site-header .navbar-link.is-active {
  background-color: transparent;
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--owl-a);
}

.eulen-hero.is-front .subtitle {
  margin-inline: 0;
}

/* Logo ohne Farbfläche (Bulma hinterlegt Navbar-Links auf Touch-Geräten) */
.site-header .navbar-brand a.site-brand {
  background-color: transparent;
}

/* ------------------------------------------------------------------
   Warenkorb-Link (nur mit WooCommerce)
   ------------------------------------------------------------------ */

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  color: var(--ink);
}

.cart-link:hover {
  background-color: var(--paper-raised);
  color: var(--ink);
}

.cart-link__icon {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-link__count {
  position: absolute;
  top: -.15rem;
  right: -.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background-color: var(--owl-a);
  color: #1E2B38;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

.navbar-brand .brand-cart {
  padding-inline: .25rem;
}

.navbar-brand .brand-cart + .navbar-burger {
  margin-inline-start: 0;
}

/* ------------------------------------------------------------------
   Formulare aus dem Block-Editor und aus Plugins
   ------------------------------------------------------------------ */

/* Nackte Felder im Inhalt (ohne Bulma-Klassen). :where hält die
   Spezifität bei 0 – Bulma, WooCommerce und Plugins mit eigener
   Gestaltung haben weiter Vorrang. */
:where(.entry-content, .shop-content, .woocommerce-Tabs-panel)
  :where(input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
    input[type="number"], input[type="password"], input[type="search"],
    input[type="date"], input[type="time"], textarea, select) {
  max-width: 100%;
  padding: .6em .75em;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background-color: var(--paper-raised);
  color: var(--ink);
  font: inherit;
}

:where(.entry-content, .shop-content, .woocommerce-Tabs-panel)
  :where(input, textarea, select):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* Bulma-Felder (Suche, Kommentare, Portal-Formulare): Rand mit mind. 3:1
   Kontrast wie bei den übrigen Feldern, Grund in den Theme-Farben.
   Fehler-/Erfolgsfarben (.is-danger usw.) und Fokus behält Bulma. */
.input,
.textarea,
.select select {
  border-color: var(--field-border);
  background-color: var(--paper-raised);
  color: var(--ink);
}

/* Block-Buttons (z. B. „Senden“ unter Formularen) im Theme-Stil,
   solange im Editor keine eigene Farbe gewählt ist */
.wp-block-button__link:not(.has-background),
.wp-element-button:not(.has-background) {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.wp-block-button__link:not(.has-text-color),
.wp-element-button:not(.has-text-color) {
  color: #FFFFFF;
}

.wp-block-button__link:not(.has-background):hover,
.wp-element-button:not(.has-background):hover {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), calc(var(--bulma-primary-l) - 6%));
}

/* Stil „Kontur“: umrandet wie die zweitrangigen Buttons des Themes */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background-color: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  color: var(--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
  background-color: var(--paper-raised);
}

/* Buttons sind Links, sollen aber nicht wie Fließtext-Links unterstrichen sein */
.entry-content :is(.wp-block-button__link, .wp-element-button, .wc-block-components-button) {
  text-decoration: none;
}

/* Jetpack-Formulare: Farben über deren eigene Variablen.
   html:root schlägt Jetpacks :root, im Editor gewählte Farben
   (stehen direkt am Formular) gewinnen weiterhin. */
html:root {
  --jetpack--contact-form--border: 1px solid var(--field-border);
  --jetpack--contact-form--border-color: var(--field-border);
  --jetpack--contact-form--border-radius: 8px;
  --jetpack--contact-form--input-background: var(--paper-raised);
  --jetpack--contact-form--text-color: var(--ink);
  --jetpack--contact-form--primary-color: var(--owl-b);
  --jetpack--contact-form--input-padding: 12px;
  --jetpack--contact-form--input-padding-left: 14px;
}

/* Stil „Standard“: Jetpack setzt hier feste Grauwerte statt seiner
   Variablen, und das Textfeld trägt die Klasse .textarea, auf die
   Bulma eigene Farben und 20 Zeilen Höhe anwendet. */
.contact-form .grunion-field:not([type="checkbox"], [type="radio"], .contact-form__select-wrapper):not(:is(.is-style-outlined, .is-style-animated) *) {
  padding-top: var(--jetpack--contact-form--input-padding);
  padding-bottom: var(--jetpack--contact-form--input-padding);
  border: var(--jetpack--contact-form--border);
  border-color: var(--jetpack--contact-form--border-color);
  border-radius: var(--jetpack--contact-form--border-radius);
  background-color: var(--jetpack--contact-form--input-background);
  box-shadow: none;
  color: var(--jetpack--contact-form--text-color);
}

.contact-form .grunion-field:not([type="checkbox"], [type="radio"]):focus {
  border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 28%, transparent);
  outline: none;
}

.contact-form textarea.grunion-field {
  height: 200px;
  min-height: 7rem;
  max-height: none;
  resize: vertical;
}

/* Jetpack hängt den Feldtyp als Klasse an die Beschriftung
   (label.textarea, label.select, label.file) – genau Bulmas Klassen für
   Eingabefelder. Ohne Rücksetzen wird die Beschriftung selbst zum Kasten. */
.contact-form .grunion-field-label:is(.textarea, .select, .file) {
  appearance: none;
  align-items: normal;
  justify-content: normal;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  resize: none;
  vertical-align: baseline;
}

.contact-form .grunion-field-label:is(.textarea, .select, .file):not(:is(.is-style-outlined, .is-style-animated) *) {
  display: block;
  margin-bottom: .25em;
  padding: 0;
  background: none;
  color: inherit;
}

.contact-form .grunion-field-label.select::after,
.contact-form .contact-form__select-wrapper.select::after {
  content: none;
}

/* Bulmas .select am Auswahl-Rahmen von Jetpack: keine feste Höhe */
.contact-form .contact-form__select-wrapper.select {
  display: block;
  height: auto;
  vertical-align: baseline;
}

.contact-form .grunion-label-required {
  color: var(--ink-soft);
  font-weight: 400;
}

.wp-block-button .wp-block-button__link {
  border-radius: var(--bulma-radius, .375em);
  font-weight: 600;
}

.contact-form .wp-block-button__link {
  padding: .7em 1.4em;
}