/*
Theme Name: Olli Kocht (2025)
Theme URI: https://www.kaeding-anderson.de
Author: Kaeding Anderson
Author URI: https://www.kaeding-anderson.de
Description: Theme für olli-kocht.de (2025) — Restaurant & Catering Lemgo.
Version: 1.0
Text Domain: ok
*/
@charset "UTF-8";

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --green-500: #c7e986;
  --green-700: #a7cf5d;
  --green-300: #e3f4c2;
  --green-200: #f0f9dd;
  --olive-600:  #7e9a4f;
  --olive-500:  #80985a;
  --olive-icon: #b6d96f;
  --coral-500: #f06860;
  --coral-600: #e2503f;
  --coral-300: #f7a59d;
  --ink-900:   #1a1a1a;
  --gray-700:  #6f6a6a;
  --gray-600:  #908888;
  --gray-500:  #9a9a9a;
  --gray-400:  #c4c0c0;
  --gray-300:  #d8d8d8;
  --gray-200:  #ececec;
  --paper:      #ffffff;
  --paper-warm: #fcfcf8;
  --kids-red:    #e33424;
  --kids-blue:   #00a3e7;
  --kids-green:  #279849;
  --kids-yellow: #ffc22c;

  /* Semantisch */
  --color-accent: var(--coral-500);
  --color-surface: var(--green-500);
  --color-surface-soft: var(--green-200);
  --color-text: var(--gray-600);
  --color-text-strong: var(--gray-700);
  --color-on-green: var(--olive-600);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--gray-700);
  background: var(--paper);
  margin: 0;
  padding: 0;
}

::selection { background: var(--green-300); }

img { max-width: 100%; }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.06;
  color: var(--gray-600);
}

h1, .h1, .has-h-1-font-size {
  font-size: clamp(40px, 4.6vw, 72px) !important;
  line-height: 1.04;
}
h2, .h2, .has-h-2-font-size {
  font-size: clamp(30px, 3.2vw, 52px) !important;
}
h3, .h3, .has-h-3-font-size {
  font-size: 28px !important;
}
h4, .h4, .has-h-4-font-size {
  font-size: 20px !important;
}

.ok-display {
  font-weight: 500;
  font-size: clamp(48px, 6.2vw, 104px);
  line-height: 1.04;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.ok-label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ok-lead {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: var(--gray-700);
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
#main a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 4px;
}
a:hover { color: inherit; }

/* ============================================================
   HEADER
   ============================================================ */
#header {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  transition: all ease .3s;
}

#header .ok-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 56px;
  max-width: 1440px;
  margin: 0 auto;
}

#header .ok-logo img {
  height: 52px;
  width: auto;
  display: block;
}

#header .ok-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}

#header .ok-nav .navbar-nav {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

#header .ok-nav .navbar-nav a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-600);
  text-decoration: none;
}
#header .ok-nav .navbar-nav a:hover {
  color: var(--olive-600);
}

#header .ok-header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Pill-Button (Header) */
.btn-pill {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .22s cubic-bezier(.2, .7, .2, 1);
  border: 1.5px solid var(--green-500);
  background: transparent;
  color: var(--olive-500);
}
.btn-pill:hover {
  background: var(--green-300);
  border-color: var(--green-300);
  color: var(--olive-600);
}
.btn-pill.filled {
  background: var(--green-500);
  border-color: var(--green-500);
  color: #5c7338;
}
.btn-pill.filled:hover {
  background: var(--green-700);
  border-color: var(--green-700);
}
.btn-pill.coral {
  background: var(--coral-500);
  border-color: var(--coral-500);
  color: #fff;
}
.btn-pill.coral:hover {
  background: var(--coral-600);
  border-color: var(--coral-600);
}

/* ============================================================
   GUTENBERG BLOCK OVERRIDES
   ============================================================ */
.wp-block-cover, .wp-block-cover__inner-container {}
.wp-block-cover + .wp-block-group.alignfull { margin-top: 0; }
.entry-content > .wp-block-cover:first-child + .wp-block-group { margin-top: 0; }
.entry-content > .wp-block-group:last-of-type:not(.alignfull) { margin-bottom: 4rem; }

.wp-block-group.alignfull + .wp-block-group.alignfull { margin-top: 0; }
.wp-block-group.alignfull:not(.has-background) + .wp-block-group.alignfull:not(.has-background) {
  padding-top: 0;
}

/* Hintergrundfarbe: Grün-Soft */
.has-green-200-background-color,
.ok-section-green { background-color: var(--green-200) !important; }
.has-green-500-background-color { background-color: var(--green-500) !important; }

/* Buttons (Gutenberg) */
.wp-block-button__link {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 9999px !important;
  padding: .875rem 1.875rem !important;
  background-color: var(--green-500);
  color: #5c7338 !important;
  border: 1.5px solid var(--green-500) !important;
  transition: all .22s cubic-bezier(.2, .7, .2, 1);
  text-decoration: none !important;
}
.wp-block-button__link:hover {
  background-color: var(--green-700);
  border-color: var(--green-700) !important;
  color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--olive-500) !important;
  border-color: var(--green-500) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--green-300);
  border-color: var(--green-300) !important;
  color: var(--olive-600) !important;
}

/* List */
.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.wp-block-list li {
  position: relative;
  padding-left: 1.5rem;
}
.wp-block-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--olive-600);
}

/* Columns */
.wp-block-column.has-background {
  padding: 1.5rem;
}
.wp-block-media-text.has-media-on-the-right:not(.has-background) .wp-block-media-text__content {
  padding-left: 0;
}

/* Accordion */
.wp-block-accordion { margin-top: 0 !important; }
.wp-block-accordion-item { border-top: 1px solid var(--gray-200); }
.wp-block-accordion-heading__toggle-title {
  text-decoration: none !important;
  transition: all ease .3s;
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  color: var(--olive-600) !important;
}

/* Separator */
hr.wp-block-separator {
  border-color: var(--gray-200);
}

/* InfoCard-Blöcke (Custom-Klassen für Gutenberg-Gruppe) */
.ok-info-card {
  position: relative;
  overflow: hidden;
  background: var(--green-500);
  border-radius: 42px;
  padding: 34px 34px 30px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  transition: background .22s, transform .22s;
}
.ok-info-card:hover { background: var(--green-700); }
.ok-info-card .ok-info-card__title {
  font-weight: 500;
  font-size: clamp(30px, 3vw, 52px);
  line-height: 1.02;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.ok-info-card .ok-info-card__content {
  margin-top: auto;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

/* ============================================================
   HERO-SEKTION
   ============================================================ */

/* Wrapper der Hero-Gruppe */
.ok-hero {
  text-align: center;
  padding: 88px 24px 44px !important;
}

/* KIDS-Farbwörter */
.ok-kids-k { color: #e33424 !important;}
.ok-kids-i { color: #00a3e7 !important;}
.ok-kids-d { color: #279849 !important;}
.ok-kids-s { color: #ffc22c !important;}

/* Subline unter dem H1 */
.ok-hero-subline {
  margin-top: 24px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--gray-400) !important;
}

/* Scroll-Cue (Pfeil nach unten) */
.ok-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray-400);
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  background: none;
  font-family: 'Inter', sans-serif;
}
.ok-scroll-cue .ok-scroll-cue__circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--green-500);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: okBob 2.2s ease-in-out infinite;
}
.ok-scroll-cue .ok-scroll-cue__circle svg {
  color: var(--green-700);
}

@keyframes okBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ============================================================
   INFO-CARDS (3er-Reihe)
   ============================================================ */

/* Spalten-Block Wrapper */
.wp-block-columns.ok-cards-row {
  padding: 44px 56px 40px !important;
  gap: 22px !important;
  flex-wrap: nowrap !important;   /* nebeneinander erzwingen auf Desktop */
  align-items: stretch !important;
  margin: 0 !important;
}
@media (max-width: 781px) {
  /* WP stapelt Columns unter 782px — hier bleiben wir beim Standard */
  .wp-block-columns.ok-cards-row {
    flex-wrap: wrap !important;
    padding: 32px 24px !important;
  }
}

/* Spalte nimmt volle Höhe ein */
.wp-block-columns.ok-cards-row > .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
}

/* Gruppe (ok-card) füllt die Spalte komplett */
.wp-block-columns.ok-cards-row > .wp-block-column > .wp-block-group.ok-card {
  flex: 1 !important;
}

/* Die Karte selbst */
.wp-block-group.ok-card {
  background: var(--green-500) !important;
  border-radius: 42px !important;
  padding: 34px 34px 30px !important;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: background .22s ease, transform .22s ease !important;
  /* Gutenberg-Standard-Padding überschreiben */
  padding-top: 34px !important;
  padding-bottom: 30px !important;
  padding-left: 34px !important;
  padding-right: 34px !important;
}
.wp-block-group.ok-card:hover {
  background: var(--green-700) !important;
  transform: translateY(-3px);
}

/* Titel oben — H3-Block in der Karte */
.wp-block-group.ok-card h3.ok-card__title,
.wp-block-group.ok-card .ok-card__title {
  font-weight: 500 !important;
  font-size: clamp(30px, 2.6vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 0 auto !important;
     /* drückt den Content-Block nach unten */
}
.ok-card__title a {
  text-decoration: none !important;
}

/* Content-Block unten — Absatz-Block in der Karte */
.wp-block-group.ok-card p.ok-card__content,
.wp-block-group.ok-card .ok-card__content {
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.wp-block-group.ok-card .ok-card__content a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Klickbare Karte */
.wp-block-group.ok-card.ok-card--link { cursor: pointer; }

/* ============================================================
   KONTAKT-FORMULAR
   ============================================================ */
.ok-contact-panel {
  border-radius: clamp(36px, 4vw, 56px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(80, 80, 70, .10);
}
.ok-contact-panel__left {
  background: var(--green-500);
  padding: clamp(40px, 5vw, 64px);
}
.ok-contact-panel__right {
  background: #fff;
  padding: clamp(40px, 5vw, 64px);
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gray-300);
}
#footer a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
#footer a:hover {
  color: var(--gray-500);
}
#footer .footer-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Social Row */
.ok-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 24px 56px;
  color: var(--coral-500);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ok-social-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--coral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  color: #fff;
  text-decoration: none;
}
.ok-social-btn:hover {
  background: var(--coral-600);
  color: #fff;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.hyphens { hyphens: auto; }

#btn-to-top {
  width: 50px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  padding: 0;
  text-align: center;
  position: fixed;
  z-index: 2000;
  bottom: 1.5rem;
  right: 1.5rem;
  display: none;
  background: #fff;
  border: 1.5px solid var(--green-500);
  border-radius: 50%;
  color: var(--olive-600);
}
#btn-to-top:hover {
  background: var(--green-200);
}

/* Scroll Reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms ease, transform 650ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Transitions */
a, .wp-block-button__link { transition: all ease .3s; }

/* Lazyload */
img[data-src] { opacity: 0; }
img.lazyloaded {
  transition: opacity .2s linear .15s;
  opacity: 1;
}

/* ============================================================
   ALIGNMENT (XL+)
   ============================================================ */
@media screen and (min-width: 1200px) {
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
  .wp-block-cover__inner-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body .is-layout-constrained > .alignwide,
  .wp-block-cover__inner-container > .alignwide {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 900px) {
  #header .ok-header-inner {
    padding: 18px 24px;
  }
}

@media screen and (max-width: 768px) {
  #header .ok-header-inner {
    grid-template-columns: 1fr auto;
  }
  #header .ok-nav {
    display: none;
  }
  .wp-block-group {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media screen and (max-width: 575px) {
  .wp-block-group {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media screen and (min-width: 1600px) {
  :root :where(.wp-block-group) {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}


/* ============================================================
   SEKTION: WOCHENPLAN
   ============================================================ */

.wp-block-group.ok-wochenplan {
  background-color: var(--green-200) !important;
  text-align: center;
}
.wp-block-group.ok-wochenplan .ok-label {
  color: var(--olive-600);
}

/* PDF-Viewer-Rahmen */
.wp-block-group.ok-pdf-frame {
  background: #e9e9e6 !important;
  border-radius: 18px !important;
  padding: 14px !important;
  box-shadow: 0 24px 60px rgba(80,80,70,.16) !important;
  text-align: left;
}

/* Toolbar-Zeile im PDF-Viewer (Dateiname + Download) */
.wp-block-group.ok-pdf-toolbar {
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px 16px !important;
  background: transparent !important;
}
.wp-block-group.ok-pdf-toolbar p {
  margin: 0 !important;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--gray-600);
  letter-spacing: .02em;
}

/* Innerer weißer Bereich (wo PDF liegt) */
.wp-block-group.ok-pdf-inner {
  background: #f4f4f1 !important;
  border-radius: 10px !important;
  padding: clamp(18px,3vw,34px) !important;
}

/* ============================================================
   SEKTION: EINDRÜCKE (GALERIE-MOSAIK)
   ============================================================ */

.ok-label-coral {
  color: var(--coral-500) !important;
}

/* Gallery-Block als 4-Spalten-Mosaik */
.wp-block-gallery.ok-galerie {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(2, 220px) !important;
  gap: 16px !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Übergeordnete Liste entfernen */
.wp-block-gallery.ok-galerie ul.blocks-gallery-grid {
  display: contents !important;
}

/* Neues Gallery-Format (nested images) */
.wp-block-gallery.ok-galerie > figure.wp-block-image,
.wp-block-gallery.ok-galerie ul.blocks-gallery-grid > li {
  margin: 0 !important;
}

/* Bild 1: groß links, nimmt 2 Spalten × 2 Zeilen */
.wp-block-gallery.ok-galerie > figure.wp-block-image:nth-child(1),
.wp-block-gallery.ok-galerie ul.blocks-gallery-grid > li:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.wp-block-gallery.ok-galerie > figure.wp-block-image:nth-child(2),
.wp-block-gallery.ok-galerie ul.blocks-gallery-grid > li:nth-child(2) {
  grid-column: 3; grid-row: 1;
}
.wp-block-gallery.ok-galerie > figure.wp-block-image:nth-child(3),
.wp-block-gallery.ok-galerie ul.blocks-gallery-grid > li:nth-child(3) {
  grid-column: 4; grid-row: 1;
}
.wp-block-gallery.ok-galerie > figure.wp-block-image:nth-child(4),
.wp-block-gallery.ok-galerie ul.blocks-gallery-grid > li:nth-child(4) {
  grid-column: 3; grid-row: 2;
}
.wp-block-gallery.ok-galerie > figure.wp-block-image:nth-child(5),
.wp-block-gallery.ok-galerie ul.blocks-gallery-grid > li:nth-child(5) {
  grid-column: 4; grid-row: 2;
}

/* Bilder füllen ihre Zelle */
.wp-block-gallery.ok-galerie img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 28px !important;
  display: block !important;
}
.wp-block-gallery.ok-galerie figure.wp-block-image,
.wp-block-gallery.ok-galerie li.blocks-gallery-item {
  overflow: hidden;
  border-radius: 28px;
}

@media (max-width: 768px) {
  .wp-block-gallery.ok-galerie {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
  }
  .wp-block-gallery.ok-galerie > figure.wp-block-image:nth-child(1),
  .wp-block-gallery.ok-galerie ul.blocks-gallery-grid > li:nth-child(1) {
    grid-column: 1 / 3; grid-row: auto;
  }
  .wp-block-gallery.ok-galerie > figure.wp-block-image,
  .wp-block-gallery.ok-galerie ul.blocks-gallery-grid > li {
    grid-column: auto !important; grid-row: auto !important;
    height: 180px;
  }
}

/* ============================================================
   SEKTION: CATERING FÜR KITAS & SCHULEN
   ============================================================ */

.wp-block-group.ok-catering {
  background-color: var(--green-200) !important;
}

/* Feature-Zeile: Icon-Kreis + Titel + Text */
.wp-block-group.ok-feature {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Der Kreis mit Icon-Emoji */
.wp-block-group.ok-feature .ok-feature__icon {
  flex: none !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: var(--green-300) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  padding: 0 !important;
  min-height: unset !important;
}
.wp-block-group.ok-feature .ok-feature__icon p {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

/* Textbereich rechts neben dem Icon */
.wp-block-group.ok-feature .ok-feature__text {
  background: transparent !important;
  padding: 0 !important;
}
.wp-block-group.ok-feature .ok-feature__text p.ok-feature__title {
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--gray-700) !important;
  margin: 0 0 4px !important;
}
.wp-block-group.ok-feature .ok-feature__text p {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: var(--gray-500) !important;
  margin: 0 !important;
}

/* Organische Blob-Form für das Catering-Foto */
.wp-block-image.ok-catering-photo img {
  border-radius: 54% 46% 52% 48% / 44% 56% 44% 56% !important;
  width: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 5 !important;
}

/* ============================================================
   SEKTION: KONTAKT / ANFRAGEFORMULAR
   ============================================================ */

.wp-block-group.ok-contact-section {
  padding-top: clamp(56px, 7vw, 100px) !important;
  padding-bottom: clamp(56px, 7vw, 100px) !important;
}

/* Das Karten-Spalten-Paar */
.wp-block-columns.ok-contact-card {
  border-radius: clamp(36px, 4vw, 56px) !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(80,80,70,.10) !important;
  gap: 0 !important;
  margin: 0 auto !important;
  max-width: 1100px !important;
  align-items: stretch !important;
}
.wp-block-columns.ok-contact-card > .wp-block-column {
  margin: 0 !important;
}

/* Linke grüne Fläche */
.wp-block-column.ok-contact-left {
  background: var(--green-500) !important;
  padding: clamp(40px,5vw,64px) !important;
  border-radius: 0 !important;
}
.wp-block-column.ok-contact-left .ok-label {
  color: var(--olive-600) !important;
}
.wp-block-column.ok-contact-left h2 {
  color: #fff !important;
  margin-top: 12px !important;
}
.wp-block-column.ok-contact-left h2 em {
  font-style: normal;
  color: var(--olive-600) !important;
}
.wp-block-column.ok-contact-left p {
  color: #5c7338 !important;
  font-size: 16.5px !important;
  line-height: 1.55 !important;
}

/* Kontakt-Detail-Zeile (Wo / Wann / E-Mail / Telefon) */
.wp-block-group.ok-contact-detail {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  background: transparent !important;
  padding: 0 !important;
}
.wp-block-group.ok-contact-detail .ok-contact-detail__icon {
  flex: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  padding: 0 !important;
  min-height: unset !important;
}
.wp-block-group.ok-contact-detail .ok-contact-detail__icon p {
  margin: 0 !important; line-height: 1 !important;
}
.wp-block-group.ok-contact-detail .ok-contact-detail__text {
  background: transparent !important;
  padding: 0 !important;
}
.wp-block-group.ok-contact-detail .ok-contact-detail__text p.ok-contact-detail__label {
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--olive-600) !important;
  margin: 0 !important;
}
.wp-block-group.ok-contact-detail .ok-contact-detail__text p {
  font-size: 16px !important;
  color: #5c7338 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Rechte weiße Seite */
.wp-block-column.ok-contact-right {
  background: #fff !important;
  padding: clamp(40px,5vw,64px) !important;
  border-radius: 0 !important;
}

/* Kontaktformular (CF7 / WPForms) Overrides */
.ok-contact-right .wpcf7-form input[type="text"],
.ok-contact-right .wpcf7-form input[type="email"],
.ok-contact-right .wpcf7-form select,
.ok-contact-right .wpcf7-form textarea,
.ok-contact-right .wpforms-field input,
.ok-contact-right .wpforms-field select,
.ok-contact-right .wpforms-field textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--gray-700);
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
}
.ok-contact-right .wpcf7-form input:focus,
.ok-contact-right .wpcf7-form textarea:focus,
.ok-contact-right .wpforms-field input:focus,
.ok-contact-right .wpforms-field textarea:focus {
  border-color: var(--green-500);
}
.ok-contact-right .wpcf7-submit,
.ok-contact-right .wpforms-submit {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 16px 30px;
  background: var(--green-500);
  color: #5c7338;
  border: none;
  cursor: pointer;
  transition: background .22s;
}
.ok-contact-right .wpcf7-submit:hover,
.ok-contact-right .wpforms-submit:hover {
  background: var(--green-700);
}


/* ============================================================
   BUGFIXES — Gutenberg-Konflikte auflösen
   ============================================================ */

/* --- 1. Label coral (Eindrücke) --- */
.ok-label-coral,
p.ok-label-coral,
.wp-block-paragraph.ok-label-coral,
.wp-block-group .ok-label-coral {
  color: var(--coral-500) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

/* --- 2–8. siehe BUGFIX v2 weiter unten --- */


/* ============================================================
   BUGFIX v2 — Überschreibt alle vorherigen Flex-Regeln
   CSS Grid ist robuster als Flex für Gutenberg-Gruppen
   ============================================================ */

/* ---- GALERIE: vereinfachter Ansatz mit :first-child ---- */
.wp-block-gallery.ok-galerie {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: 220px 220px !important;
  gap: 16px !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex-wrap: unset !important;
  align-items: unset !important;
}
/* Erstes Bild: groß links, nimmt 2×2 Felder */
.wp-block-gallery.ok-galerie > figure.wp-block-image:first-child,
.wp-block-gallery.ok-galerie > li:first-child {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 3 !important;
}
/* Alle anderen fließen automatisch in die rechten Felder */
.wp-block-gallery.ok-galerie > figure.wp-block-image,
.wp-block-gallery.ok-galerie > li {
  overflow: hidden !important;
  border-radius: 24px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
}
.wp-block-gallery.ok-galerie img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
/* Mobile */
@media (max-width: 768px) {
  .wp-block-gallery.ok-galerie {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .wp-block-gallery.ok-galerie > figure.wp-block-image:first-child,
  .wp-block-gallery.ok-galerie > li:first-child {
    grid-column: 1 / 3 !important;
    grid-row: auto !important;
    height: 220px;
  }
  .wp-block-gallery.ok-galerie > figure.wp-block-image,
  .wp-block-gallery.ok-galerie > li {
    height: 160px;
  }
}

/* ---- ok-feature: GRID statt Flex ---- */
.wp-block-group.ok-feature {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  align-items: start !important;
  background: transparent !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  /* Flex-Reste neutralisieren */
  flex-direction: unset !important;
  flex-wrap: unset !important;
}
.wp-block-group.ok-feature > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Icon-Zelle (Spalte 1) */
.wp-block-group.ok-feature > .wp-block-group.ok-feature__icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: var(--green-300) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.wp-block-group.ok-feature > .wp-block-group.ok-feature__icon p {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
/* Text-Zelle (Spalte 2) */
.wp-block-group.ok-feature > .wp-block-group.ok-feature__text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.wp-block-group.ok-feature > .wp-block-group.ok-feature__text > p.ok-feature__title {
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--gray-700) !important;
  margin: 0 0 5px !important;
}
.wp-block-group.ok-feature > .wp-block-group.ok-feature__text > p:not(.ok-feature__title) {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: var(--gray-500) !important;
  margin: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* ---- ok-contact-detail: GRID statt Flex ---- */
.wp-block-group.ok-contact-detail {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
  align-items: start !important;
  background: transparent !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}
.wp-block-group.ok-contact-detail > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Icon-Kreis (Spalte 1) */
.wp-block-group.ok-contact-detail > .wp-block-group.ok-contact-detail__icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.wp-block-group.ok-contact-detail > .wp-block-group.ok-contact-detail__icon p {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
/* Text (Spalte 2) */
.wp-block-group.ok-contact-detail > .wp-block-group.ok-contact-detail__text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.wp-block-group.ok-contact-detail > .wp-block-group.ok-contact-detail__text > p.ok-contact-detail__label {
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--olive-600) !important;
  margin: 0 !important;
}
.wp-block-group.ok-contact-detail > .wp-block-group.ok-contact-detail__text > p:not(.ok-contact-detail__label) {
  font-size: 16px !important;
  color: #5c7338 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ---- Verhindert Gutenberg-Standard-Padding in verschachtelten Gruppen ---- */
.wp-block-group.ok-feature .wp-block-group,
.wp-block-group.ok-contact-detail .wp-block-group {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
/* Verhindert is-layout-constrained auto-margins in Grid-Kontext */
.wp-block-group.ok-feature > .wp-block-group,
.wp-block-group.ok-contact-detail > .wp-block-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* ---- Catering — grüner Hintergrund ---- */
.wp-block-group.ok-catering,
.ok-catering.wp-block-group {
  background-color: var(--green-200) !important;
}

/* ---- Kontakt — linke grüne Fläche ---- */
.wp-block-column.ok-contact-left {
  background-color: var(--green-500) !important;
  padding-top: clamp(40px,5vw,64px) !important;
  padding-right: clamp(40px,5vw,64px) !important;
  padding-bottom: clamp(40px,5vw,64px) !important;
  padding-left: clamp(40px,5vw,64px) !important;
}
.wp-block-column.ok-contact-left p,
.wp-block-column.ok-contact-left .ok-label {
  color: var(--olive-600) !important;
}
.wp-block-column.ok-contact-left h2 {
  color: #fff !important;
  margin-top: 12px !important;
}
.wp-block-column.ok-contact-left > p:not(.ok-label) {
  color: #5c7338 !important;
}

/* ---- Kontakt-Card — abgerundete Box + Schatten ---- */
.wp-block-columns.ok-contact-card {
  border-radius: clamp(36px, 4vw, 56px) !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(80,80,70,.10) !important;
  gap: 0 !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-columns.ok-contact-card > .wp-block-column {
  margin: 0 !important;
  padding: 0 !important;
}
/* Höhere Spezifität um das padding:0 oben zu überschreiben */
.wp-block-columns.ok-contact-card > .wp-block-column.ok-contact-left {
  padding-top: clamp(48px,5vw,72px) !important;
  padding-right: clamp(40px,5vw,64px) !important;
  padding-bottom: clamp(48px,5vw,72px) !important;
  padding-left: clamp(40px,5vw,64px) !important;
}
.wp-block-columns.ok-contact-card > .wp-block-column.ok-contact-right {
  background-color: #fff !important;
  padding-top: clamp(48px,5vw,72px) !important;
  padding-right: clamp(48px,5vw,72px) !important;
  padding-bottom: clamp(48px,5vw,72px) !important;
  padding-left: clamp(48px,5vw,72px) !important;
}

/* ============================================================
   GALERIE — Zentrierung
   ============================================================ */

/* Eltern-Section zentrieren */
.wp-block-group.ok-galerie-section,
.wp-block-group:has(> .ok-galerie) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Galerie selbst zentrieren */
.wp-block-gallery.ok-galerie {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   KONTAKT-SECTION — Overflow & Zentrierung
   ============================================================ */

.wp-block-group.ok-contact-section {
  overflow: hidden !important;
  padding-top: clamp(60px,8vw,100px) !important;
  padding-bottom: clamp(60px,8vw,100px) !important;
}

/* Sicherstellen dass die Card innerhalb des Viewports bleibt */
.wp-block-columns.ok-contact-card {
  width: min(1100px, calc(100% - 80px)) !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   KONTAKTFORMULAR (Contact Form 7)
   ============================================================ */

/* Zwei-Spalten-Zeile */
.ok-contact-right .ok-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

/* Einzel-Gruppe */
.ok-contact-right .ok-form-group {
  margin-bottom: 24px;
}

/* Labels */
.ok-contact-right .ok-form-label,
.ok-contact-right label.ok-form-label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: 8px;
}

/* Alle Input-Felder */
.ok-contact-right .wpcf7-form input[type="text"],
.ok-contact-right .wpcf7-form input[type="email"],
.ok-contact-right .wpcf7-form select,
.ok-contact-right .wpcf7-form textarea {
  width: 100%;
  display: block;
  background: var(--gray-200);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 14px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: var(--gray-700);
  outline: none;
  transition: border-color .18s, background .18s;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

/* Placeholder */
.ok-contact-right .wpcf7-form input::placeholder,
.ok-contact-right .wpcf7-form textarea::placeholder {
  color: var(--gray-400);
}

/* Dropdown — Pfeil */
.ok-contact-right .wpcf7-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23908888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* Dropdown: "Bitte wählen" grau */
.ok-contact-right .wpcf7-form select option[value=""] {
  color: var(--gray-400);
}

/* Textarea */
.ok-contact-right .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Fokus */
.ok-contact-right .wpcf7-form input:focus,
.ok-contact-right .wpcf7-form select:focus,
.ok-contact-right .wpcf7-form textarea:focus {
  border-color: var(--green-700);
  background: #fff;
}

/* Submit-Button */
.ok-contact-right .wpcf7-form .wpcf7-submit,
.ok-contact-right .wpcf7-submit {
  display: block;
  width: 100%;
  background: var(--green-500);
  color: var(--olive-600);
  border: none;
  border-radius: 9999px;
  padding: 18px 32px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
  margin-top: 8px;
}
.ok-contact-right .wpcf7-form .wpcf7-submit:hover {
  background: var(--green-700);
}

/* Datenschutz-Hinweis */
.ok-contact-right .ok-form-privacy {
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 16px;
  line-height: 1.5;
}
.ok-contact-right .ok-form-privacy a {
  color: var(--coral-500);
  text-decoration: underline;
}

/* CF7 Validierungs-Fehler */
.ok-contact-right .wpcf7-not-valid-tip {
  font-size: 12px;
  color: var(--coral-500);
  margin-top: 4px;
}
.ok-contact-right .wpcf7-not-valid {
  border-color: var(--coral-500) !important;
}
.ok-contact-right .wpcf7-response-output {
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  margin-top: 16px !important;
  background: var(--green-200);
  color: var(--olive-600);
}

/* ============================================================
   INFO-CARDS: SVG-Icon als Wasserzeichen
   ============================================================ */
.ok-cards-row .ok-card {
  position: relative;
  overflow: hidden;
}
.ok-cards-row .ok-card::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.18;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Karte 1: WO → Chef-Hut */
.ok-cards-row .wp-block-column:nth-child(1) .ok-card::before {
  background-image: url('/wp-content/themes/olli-kocht-claude/assets/images/icons/ciitrus-logo-olli-kocht.svg');
}
/* Karte 2: WAS GIBT'S HEUTE → Menü-Buch */
.ok-cards-row .wp-block-column:nth-child(2) .ok-card::before {
  background-image: url('/wp-content/themes/olli-kocht-claude/assets/images/icons/icon-menu.svg');
}
/* Karte 3: WANN → Uhr */
.ok-cards-row .wp-block-column:nth-child(3) .ok-card::before {
  background-image: url('/wp-content/themes/olli-kocht-claude/assets/images/icons/icon-clock.svg');
}

/* ============================================================
   WOCHENPLAN: PDF-Frame
   ============================================================ */

/* Äußerer Rahmen */
.ok-pdf-frame {
  max-width: 960px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #ebebе7 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.08) !important;
  padding: 0 !important;
}

/* Toolbar: Dateiname oben, PDF darunter */
.ok-pdf-toolbar {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

/* Header-Leiste: Dateiname */
.ok-pdf-toolbar > .wp-block-paragraph {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 10px 22px !important;
  background: #e2e2de !important;
  font-size: 13px !important;
  color: #777 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Inner-Bereich: Padding um das PDF */
.ok-pdf-inner {
  padding: 1rem !important;
  background: #ebebе7 !important;
  width: 100% !important;
}

/* Datei-Block */
.ok-pdf-inner .wp-block-file {
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
}

/* PDF-Einbettung responsiv */
.ok-pdf-inner .wp-block-file__embed {
  width: 100% !important;
  height: clamp(500px, 70vh, 780px) !important;
  aspect-ratio: unset !important;
  display: block !important;
  border: none !important;
}

/* Dateiname-Link über dem PDF ausblenden (steht schon im Header) */
.ok-pdf-inner .wp-block-file > a:not(.wp-block-file__button) {
  display: none !important;
}

/* Download-Button: grüner Pill */
.ok-pdf-inner .wp-block-file__button {
  display: block !important;
  width: fit-content !important;
  margin: 16px auto !important;
  background: #c7e986 !important;
  color: #5c7338 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 14px 32px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.ok-pdf-inner .wp-block-file__button:hover {
  background: #a7cf5d !important;
}

/* Responsive: kleiner auf Mobil */
@media (max-width: 600px) {
  .ok-pdf-inner {
    padding: 12px !important;
  }
  .ok-pdf-inner .wp-block-file__embed {
    height: 380px !important;
  }
  .ok-pdf-toolbar {
    padding: 10px 14px !important;
  }
}

/* ============================================================
   ÜBER UNS
   ============================================================ */

/* Sektion */
.ok-ueber-uns {
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

.ok-ueber-uns > .wp-block-group__inner-container > p,
.ok-ueber-uns > p {
  text-align: center;
}

/* Zweispalter-Reihen */
.ok-ueber-uns-row.wp-block-columns {
  align-items: center;
  gap: clamp(32px, 5vw, 72px) !important;
  margin-top: clamp(40px, 5vw, 72px) !important;
  margin-bottom: 0 !important;
}

/* Gespiegelte Reihe */
.ok-ueber-uns-row--reverse.wp-block-columns {
  flex-direction: row-reverse;
}

/* Organische Blob-Form für Bilder */
.ok-blob-image img {
  width: 100%;
  height: auto;
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

/* ---- Accordion (Details-Block) ---- */

.ok-accordion-item.wp-block-details {
  border: 1.5px solid #e8e4e0;
  border-radius: 14px;
  padding: 0 !important;
  margin-bottom: 12px !important;
  overflow: hidden;
  transition: border-color 0.2s ease;
  background: #fff;
}

/* Roter Rahmen wenn geöffnet */
.ok-accordion-item.wp-block-details[open] {
  border-color: var(--coral-500, #c0392b);
}

/* Summary = Kopfzeile */
.ok-accordion-item.wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-800, #3a3a3a);
  user-select: none;
}

/* Standard-Dreieck ausblenden */
.ok-accordion-item.wp-block-details > summary::-webkit-details-marker { display: none; }
.ok-accordion-item.wp-block-details > summary::marker { display: none; }

/* + / × Button rechts */
.ok-accordion-item.wp-block-details > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 20px;
  font-weight: 300;
  color: var(--coral-500, #c0392b);
  line-height: 1;
  transition: transform 0.2s ease;
}

.ok-accordion-item.wp-block-details[open] > summary::after {
  content: '×';
  font-size: 18px;
}

/* Icon-Bild in der Summary */
.ok-accordion-item.wp-block-details > summary img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--green-100, #eaf3d5);
  border-radius: 8px;
  padding: 5px;
}

/* Inhalt */
.ok-accordion-item.wp-block-details > *:not(summary) {
  padding: 0 20px 18px 62px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-600, #666);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .ok-ueber-uns-row--reverse.wp-block-columns {
    flex-direction: column !important;
  }
  .ok-blob-image img {
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================
   KONTAKT-CARD — Full-Bleed auf Mobile
   ============================================================ */

@media (max-width: 781px) {

  /* Globales Padding der Sektion seitlich entfernen */
  .wp-block-group.ok-contact-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Card über die volle Breite, ohne Rundung */
  .wp-block-columns.ok-contact-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  /* Innenabstände der beiden Spalten kompakter */
  .wp-block-columns.ok-contact-card > .wp-block-column.ok-contact-left,
  .wp-block-columns.ok-contact-card > .wp-block-column.ok-contact-right {
    padding: 40px 24px !important;
  }
}