/* Strandkörbe Amrum – Komponenten
   Baut auf tokens.css auf. Keine Farbwerte hier, nur Variablen.
   Ausnahmen: #FFFFFF als Fokusring auf roter Fläche und im Hero, wo
   Weiß nicht als Marken-, sondern als Kontrastfarbe auftritt.
   ========================================================================== */
   
/* ==========================================================================
    Helper
    ========================================================================== */
    
    @media (max-width: 767px) {
      .skam-hide-mobile { display: none !important; }
    }
    @media (min-width: 768px) {
      .skam-hide-desktop { display: none !important; }
    }

/* ==========================================================================
   Grundlagen
   ========================================================================== */
   
   :root {
     --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='10' height='10' rx='2'/%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3C/svg%3E");
   }

body {
  background: var(--page);
  color: var(--text);
}

.section--tinted {
  background: var(--surface);
}

hr,
.divider {
  border: 0;
  border-top: 1px solid var(--divider);
}

/* Hauptmenu */

#masthead #desktop-navigation .cart-item {
    background-color: transparent;
}

/* --- Fokus: gilt für alles, niemals entfernen ------------------------- */

/* Kein border-radius hier – der Umriss folgt in modernen Browsern
   automatisch der Form des Elements. Ein eigener Wert würde die
   Pille im Fokuszustand zum Rechteck machen. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Schaltflächen

   Ein Muster, drei Quellen: eigene Komponenten (.btn), ATOMION
   (.atomion-button-filled / -outline) und Gutenberg (.wp-block-button__link
   plus .wp-element-button).

   Zustandslogik: Gefüllt wechselt im Hover auf Kontur, Kontur wechselt auf
   gefüllt. Die Box ändert sich dabei um keinen Pixel – der Rahmen liegt in
   beiden Zuständen an, nur seine Farbe wechselt.

   Zur Spezifität: Gutenberg setzt Farbe, Rahmen und Padding über
   .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)
   – vier Klassen. Bei Gleichstand entscheidet die Ladereihenfolge, und die
   Kernstile liegen oft vorn. Deshalb arbeiten die Regeln unten mit
   verdoppelten Klassen statt mit Elementnamen: Elementnamen würden die
   Hero-Sonderregeln am Ende dieses Abschnitts aushebeln.
   ========================================================================== */

/* --- Gemeinsame Geometrie --------------------------------------------- */

.btn,
.atomion-button-filled,
.atomion-button-outline,
.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  /* Pillen brauchen mehr Seitenluft als Rechtecke, sonst kleben
     die Wortenden an der Rundung */
  padding: var(--btn-padding-y) var(--btn-padding-x);
  min-height: max(var(--field-height), 44px);   /* Untergrenze 2.5.8 */
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  /* Versalien, damit Hero- und Gutenberg-Buttons zu den WooCommerce-
     Buttons passen. Beide Zeilen raus, wenn du Gemischtschreibung willst. */
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transform: none;
  transition: background-color .18s ease, background-image .18s ease,
              border-color .18s ease, color .18s ease;
}

/* --- Gefüllt ----------------------------------------------------------- */

.btn--primary,
.atomion-button-filled.atomion-button-filled,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button,
.wp-element-button:not(.wp-block-button__link) {
  /* background-color trägt allein; der Verlauf liegt nur darüber.
     In forced-colors und bei fehlender Unterstützung bleibt die Fläche
     dadurch bestehen, weil Verläufe technisch background-image sind. */
  background-color: var(--cta-bg);
  background-image: var(--cta-gradient);
  color: var(--cta-text);
  border-color: var(--cta-bg);
}

.btn--primary:hover,
.atomion-button-filled.atomion-button-filled:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:hover,
.wp-element-button:not(.wp-block-button__link):hover {
  background-color: transparent;
  background-image: none;
  border-color: var(--cta-bg-hover);
  color: var(--cta-bg-hover);      /* #B8030E – 6,32:1 auf Strandsand */
  box-shadow: none;
}

/* --- Kontur ------------------------------------------------------------
   Startet als Kontur und füllt sich im Hover. Der umgekehrte Weg sorgt
   dafür, dass zwei nebeneinanderstehende Buttons im Hover nicht identisch
   aussehen. Padding und Rahmenstärke stehen hier noch einmal, weil
   Gutenberg für is-style-outline eigene Werte mitbringt und der Button
   sonst größer wäre als sein gefüllter Nachbar.                          */

.btn--secondary,
.atomion-button-outline.atomion-button-outline,
.wp-block-button.is-style-outline.is-style-outline > .wp-block-button__link.wp-element-button,
.wp-block-button.is-style-outline--2.is-style-outline--2 > .wp-block-button__link.wp-element-button {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-width: var(--btn-border-width);
  background-color: transparent;
  background-image: none;
  border-color: var(--cta-bg);
  color: var(--cta-bg-hover);
}

.btn--secondary:hover,
.atomion-button-outline.atomion-button-outline:hover,
.wp-block-button.is-style-outline.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-outline--2.is-style-outline--2 > .wp-block-button__link.wp-element-button:hover {
  background-color: var(--cta-bg-hover);
  background-image: none;
  border-color: var(--cta-bg-hover);
  color: var(--cta-text);          /* weiß auf #B8030E – 6,87:1 */
}

/* --- Fokus auf gefüllter Fläche ----------------------------------------
   Der schwarze Ring aus der globalen Regel verschwindet auf Rot. Sobald
   der Grund transparent ist – im Hover der gefüllten Buttons – gilt
   wieder die globale Regel.                                             */

.btn--primary:focus-visible,
.atomion-button-filled.atomion-button-filled:focus-visible,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:focus-visible,
.btn--secondary:hover:focus-visible,
.atomion-button-outline.atomion-button-outline:hover:focus-visible,
.wp-block-button.is-style-outline.is-style-outline > .wp-block-button__link.wp-element-button:hover:focus-visible {
  outline-color: #FFFFFF;
  outline-offset: calc(var(--focus-offset) * -1);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.btn--primary:hover:focus-visible,
.atomion-button-filled.atomion-button-filled:hover:focus-visible,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:hover:focus-visible {
  outline-color: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: none;
}

/* --- Deaktiviert -------------------------------------------------------- */

.btn[disabled],
.btn[aria-disabled="true"],
.atomion-button-filled[disabled],
.atomion-button-outline[disabled],
.wp-element-button[disabled],
.wp-element-button[aria-disabled="true"] {
  background-color: var(--divider);
  background-image: none;
  border-color: var(--divider);
  color: var(--text-secondary);
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Randlose Aktionsleisten -------------------------------------------
   Über die volle Breite laufende Leisten bleiben eckig – eine Pille an
   einer Bildkante sieht aus wie ein Fehler.                             */

.btn--bar {
  border-radius: 0;
  width: 100%;
}

/* --- Kontrast- und Zwangsfarbmodi -------------------------------------
   Bei angeforderter Kontrastverstärkung und in erzwungenen Farbmodi
   fällt der Verlauf weg – flach ist dort immer die sichere Variante.   */

@media (prefers-contrast: more) {
  .btn--primary,
  .btn--primary:hover,
  .atomion-button-filled,
  .atomion-button-filled:hover,
  .wp-block-button__link,
  .wp-block-button__link:hover {
    background-image: none;
  }
}

@media (forced-colors: active) {
  .btn,
  .btn:hover,
  .atomion-button-filled,
  .atomion-button-filled:hover,
  .atomion-button-outline,
  .wp-block-button__link,
  .wp-block-button__link:hover {
    background-image: none;
    border: 1px solid ButtonText;
  }
}

/* --- Buttons im Hero ---------------------------------------------------
   Der Scrim deckt nur die oberen 300px. Die Buttons liegen darunter auf
   dem ungeschützten Foto – dort ist kein Kontrast garantiert. Deshalb
   bleibt der gefüllte Button auch im Hover gefüllt und verdunkelt sich
   nur; ein transparenter Hover würde roten Text auf unbekannten
   Bildpixeln erzeugen. Die Selektoren tragen eine Klasse mehr als die
   Grundregeln, damit sie zuverlässig gewinnen.                          */

.wp-block-atomion-block-hero-slider .atomion-button-filled.atomion-button-filled:hover,
.hero-slider-content .atomion-button-filled.atomion-button-filled:hover,
.wp-block-atomion-block-hero-slider .wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:hover {
  background-color: var(--cta-bg-hover);
  background-image: none;
  border-color: var(--cta-bg-hover);
  color: var(--cta-text);
}

/* Der Kontur-Button bekommt im Hero eine eigene Fläche in Scrim-Stärke.
   Dieselbe Deckkraft 0.6 wie beim Header-Scrim, dort bereits als
   WCAG-AA-tauglich nachgewiesen. */
.wp-block-atomion-block-hero-slider .atomion-button-outline.atomion-button-outline,
.hero-slider-content .atomion-button-outline.atomion-button-outline,
.wp-block-atomion-block-hero-slider .wp-block-button.is-style-outline.is-style-outline > .wp-block-button__link.wp-element-button {
  background-color: rgba(var(--scrim-rgb), 0.6);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.wp-block-atomion-block-hero-slider .atomion-button-outline.atomion-button-outline:hover,
.hero-slider-content .atomion-button-outline.atomion-button-outline:hover,
.wp-block-atomion-block-hero-slider .wp-block-button.is-style-outline.is-style-outline > .wp-block-button__link.wp-element-button:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--text);
}

/* ==========================================================================
   Formularfelder
   ========================================================================== */

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

input,
select,
textarea {
  min-height: var(--field-height);
  width: 100%;
  padding: 0 12px;
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}

.hint {
  color: var(--text-secondary);
}

/* --- Fehler: Farbe allein reicht nicht, 1.4.1 ------------------------- */

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

.field-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 6px;
  color: var(--danger);
}

.field-error::before {
  content: "!";
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--page);
  font-weight: 500;
  text-align: center;
  line-height: 18px;
}

/* --- Statusbereich über dem Absenden-Button, 4.1.3 -------------------- */

.form-status {
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  border-radius: 0;
  padding: 12px 16px;
  color: var(--text);
}

.form-status--success {
  background: var(--success-bg);
  border-left-color: var(--success);
}

/* ==========================================================================
   Links
   ========================================================================== */

#footer-top a,
#main-footer a {
  transition: color 0.15s ease-in-out;
}

#footer-top a:hover,
#main-footer a:hover,
#footer-top a:focus-visible,
#main-footer a:focus-visible {
  color: #C3D82C;
  text-decoration-color: #C3D82C;
}

/* Kennzeichnung externe Links */

.entry-content a[href^="http"]:not([href*="strandkoerbe-amrum.de"])::after,
#main-footer .widget_nav_menu a[href^="http"]:not([href*="strandkoerbe-amrum.de"])::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.2em;
  vertical-align: 0.02em;
  background-color: currentColor;
  -webkit-mask: var(--icon-external) center / contain no-repeat;
  mask: var(--icon-external) center / contain no-repeat;
}

#main-footer .widget_nav_menu a[href^="http"]:not([href*="strandkoerbe-amrum.de"])::after {
  background-color: #C3D82C; /* bzw. dein Korblime-Token aus tokens.css, falls vorhanden */
}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

/* Über dem Hero: Verlaufsabdunklung, damit weiße Navigation trägt */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--scrim), transparent);
  pointer-events: none;
}

.site-header a {
  color: #FFFFFF;
}

/* Nach dem Scrollen: deckender Balken, weißes Logo bleibt gültig */
.site-header.is-scrolled {
  background: var(--header-solid);
}

.site-header.is-scrolled::before {
  display: none;
}

/* ==========================================================================
   Auszeichnungen
   ========================================================================== */

.badge--offer {
  background: var(--accent-lime);
  color: var(--on-lime);
  padding: 4px 10px;
  border-radius: var(--radius);
}

.badge--info {
  background: transparent;
  color: var(--accent-sky);
  border: 1px solid var(--accent-sky);
  padding: 3px 9px;
  border-radius: var(--radius);
}

/* ==========================================================================
   Bewegungsreduktion

   Gilt global und entwertet damit auch alle Button- und Reveal-Transitions –
   deshalb steht in den einzelnen Abschnitten keine eigene Regel mehr.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Header-Scrim, gemeinsam für Hero-Slider und Beitragsbilder
   --scrim-rgb steht in tokens.css
   ========================================================================== */

.wp-block-atomion-block-hero-slider [class*="-hero-image"],
.post-thumbnail {
  position: relative;
}

.wp-block-atomion-block-hero-slider [class*="-hero-image"]::before,
.post-thumbnail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px; /* 80px Plateau + 220px sanfter Auslauf */

  background: linear-gradient(
    in oklab to bottom,
    rgba(var(--scrim-rgb), 0.600) 0px,
    rgba(var(--scrim-rgb), 0.600) 80px,
    rgba(var(--scrim-rgb), 0.384) 124px,
    rgba(var(--scrim-rgb), 0.216) 168px,
    rgba(var(--scrim-rgb), 0.096) 212px,
    rgba(var(--scrim-rgb), 0.024) 256px,
    rgba(var(--scrim-rgb), 0) 300px
  );

  z-index: 1;
  pointer-events: none;
}

.wp-block-atomion-block-hero-slider .hero-slider-content-wrapper {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Inhalt
   ========================================================================== */

.entry-title {
  margin-top: 100px;
  margin-bottom: 100px;
}

/* ==========================================================================
   Reveal
   Tokens stehen in tokens.css
   ========================================================================== */

.js-skam .skam-reveal {
  opacity: 0;
  transform: translateY(var(--skam-reveal-shift));
  transition:
    opacity var(--skam-reveal-duration) var(--skam-reveal-ease),
    transform var(--skam-reveal-duration) var(--skam-reveal-ease);
}

.js-skam .skam-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js-skam .skam-reveal--delay-1 { transition-delay: 100ms; }
.js-skam .skam-reveal--delay-2 { transition-delay: 200ms; }
.js-skam .skam-reveal--delay-3 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .js-skam .skam-reveal,
  .js-skam .skam-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

@media print {
  .js-skam .skam-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Hero-Typografie
   ========================================================================== */

.hero-slider-content .inner :is(.pre-heading, h3) {
  paint-order: stroke fill;
  -webkit-text-stroke: 1px var(--skam-hero-outline);
  text-shadow: 1px 1px 0 var(--skam-hero-outline);
}

/* Fallback ohne paint-order: Kontur aus gestapelten Schatten */
@supports not (paint-order: stroke) {
  .hero-slider-content .inner :is(.pre-heading, h3) {
    -webkit-text-stroke: 0;
    text-shadow:
      1px 1px 0 var(--skam-hero-outline),
     -2px  0   0 var(--skam-hero-outline),  2px 0 0 var(--skam-hero-outline),
      0   -2px 0 var(--skam-hero-outline),  0   2px 0 var(--skam-hero-outline);
  }
}
/* ==========================================================================
 Mobile Menu
 ========================================================================== */

#mobile-navigation .main-nav-item {
    background: #494F57;
}