/* ==========================================================================
   SURFERS PARADISE DESIGN SYSTEM
   ==========================================================================

   Diese Datei enthält ausschließlich das neue Designsystem.

   style.css = Legacy

   Neue Komponenten niemals mehr in style.css entwickeln.

   ==========================================================================
   INHALTSVERZEICHNIS
    1. Primitives
    2. Semantics (Design-Tokens)
    3. Globale Typografie & Silbentrennung
    4. Hero-Banner (Front-Page & Unterseiten)
    5. Bild-Reset
    6. Mobil-Navigation
    7. Content Container Alignment
   ========================================================================== */

/* ==========================================================================
   1. PRIMITIVES
   ========================================================================== */
:root {
  --_p-color-brand: oklch(0.522 0.177 256); /* oklch(62.4% 0.206 255.5) #0a84ff - Blau #004b8d = oklch(0.4025 0.1402 244.38) */
  --_p-red: oklch(60% 0.25 28); /* SP rot #df0610 */
  --_p-blue: oklch(15% 0.07 265); /* #0B2545 */
  --_p-orange: oklch(52.5% 0.218 39.4); /* oklch(56.7% 0.198 35.2) oklch(68% 0.19 40) #ff6500 */
  --_p-navy-900: oklch(21% 0.06 260); /* #001f3f */
  --_p-navy-700: oklch(36% 0.16 260); /* #004b8d */
  --_p-navy-400: oklch(61% 0.11 255); /* #4a7fb5 */
  --_p-navy-100: oklch(92% 0.03 250); /* #e8f0fb */
  --_p-white: oklch(100% 0 0); /* #ffffff */
  --_p-green-whatsapp: oklch(75.5% 0.222 142.5); /* WhatsApp grün */

  /* Gray-Skala */
  --_p-gray-900: oklch(17% 0.02 260); /* #1d1d1f */
  --_p-gray-600: oklch(36% 0.01 270); /* #48484a */
  --_p-gray-400: oklch(58% 0.01 270); /* #8e8e93 */
  --_p-gray-100: oklch(97.1% 0.003 286.4); /* #f5f5f7 */

  --_p-green: oklch(50% 0.15 145); /* #080 */
  --_p-green-ok: oklch(75% 0.15 145); /* #34c759 */
  --_p-green-badge: oklch(55% 0.12 140); /* #2e7d32 */
  --_p-red-alert: oklch(65% 0.22 30); /* #ff3b30 */
  --_p-yellow: oklch(0.93 0.19 98);

  --_p-r-sm: 8px;
  --_p-r-md: 14px;
  --_p-r-lg: 20px;
  --_p-r-pill: 980px;

  --_p-1: 0.25rem;
  --_p-2: 0.5rem;
  --_p-3: 0.75rem;
  --_p-4: 1rem;
  --_p-5: 1.25rem;
  --_p-6: 1.5rem;
  --_p-7: 1.75rem;
  --_p-8: 2rem;

  --_p-br-rest: oklch(0% 0 0 / 0.08);
  --_p-br-hover: oklch(0% 0 0 / 0.14);
  --_p-br-line: oklch(0% 0 0 / 0.06);
  --_p-sh-xs: oklch(0% 0 0 / 0.03);
  --_p-sh-sm: oklch(0% 0 0 / 0.05);

  --_p-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --_p-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --_p-dur-fast: 150ms;
  --_p-dur-base: 200ms;
  --_p-dur-slow: 300ms;
  --_p-opacity-hover: 0.84;
  --_p-scale-hover: 1.03;

  /* Container-Breiten – neu als Primitive statt Magic Number im Selektor */
  --_p-container-max: 1290px;
  --_p-container-wide: 1400px; /* für breite Bildsektionen, falls benötigt */
  --_p-content-measure: 65ch;  /* für Fließtext-Spalten */

/* ==========================================================================
   2. SEMANTICS (Design-Tokens)
   ========================================================================== */
  --sp-red: var(--_p-red);
  --sp-accent: var(--_p-color-brand);
  --sp-color-brand: var(--_p-color-brand);
  --sp-color-heading: var(--_p-gray-900);
  --sp-color-text-primary: var(--_p-gray-900);
  --sp-color-text-secondary: var(--_p-gray-600);
  --sp-color-text-link: var(--_p-color-brand);
  --sp-color-danger: var(--_p-red);
  --sp-white: var(--_p-white);
  --sp-yellow: var(--_p-yellow);
  --sp-orange: var(--_p-orange);  
  --sp-whatsapp: var(--_p-green-whatsapp);
  
  --sp-text-xs: 0.78rem;
  --sp-text-base: 1rem;
  --sp-text-xl: 1.55rem;
  --sp-text-display: clamp(1.8rem, 5vw, 2.8rem);
  --sp-text-headline: clamp(1.5rem, 4vw, 2rem);

  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-semibold: 600;
  --sp-weight-bold: 700;
  --sp-ls-eyebrow: 0.07em;

  --sp-font-body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
   /* Spacing */
  --sp-space-3xs: var(--_p-1); /* 0.25rem */
  --sp-space-2xs: var(--_p-2); /* 0.5rem  */
  --sp-space-xs:  var(--_p-3); /* 0.75rem */
  --sp-space-sm:  var(--_p-4); /* 1.0rem  */
  --sp-space-md:  var(--_p-5); /* 1.25rem */
  --sp-space-lg:  var(--_p-6); /* 1.5rem  */
  --sp-space-xl:  var(--_p-7); /* 1.75rem */
  --sp-space-2xl: var(--_p-8); /* 2.0rem  */

  /* Container – referenziert die Primitives, nirgends mehr hart verdrahtet */
  --sp-container: var(--_p-container-max);
  --sp-container-wide: var(--_p-container-wide);
  --sp-content-measure: var(--_p-content-measure);
  
  /* Tabs */
  --sp-tabs-bg: var(--_p-gray-600);  

  /* Cards */
  --sp-card-bg: var(--_p-gray-100);
  --sp-card-radius: var(--_p-r-lg);
  --sp-card-border-color: var(--_p-br-rest);
  --sp-card-border-color-hover: var(--_p-br-hover);
  --sp-card-shadow: 0 1px 2px var(--_p-sh-xs), 0 2px 6px var(--_p-sh-sm);
  --sp-card-shadow-hover: 0 1px 2px var(--_p-sh-xs), 0 3px 10px var(--_p-sh-sm);
  --sp-card-pad-inline: var(--_p-6);
  --sp-card-pad-block: var(--_p-5);
  --sp-card-gap: var(--_p-3);
  --sp-card-img-ratio: 16 / 9;
  --sp-card-dur: var(--_p-dur-base);
  --sp-card-ease: var(--_p-ease);
  --sp-card-lift: 0px;

  /* Heading-Skala (fluid, für h1–h6 UND Card-Elemente gleichermaßen) */
  --sp-text-h1: clamp(1.35rem, 5vw, 1.75rem);
  --sp-text-h2: clamp(1.25rem, 4vw, 1.5rem);
  --sp-text-h3: clamp(1.15rem, 3vw, 1.3rem);
  --sp-text-h4: clamp(1rem, 1vw + 0.9rem, 1.125rem);
  --sp-text-eyebrow: 0.8rem;
  --sp-text-sub: 1.1rem;

  /* Buttons – Basis-Werte */
  --sp-btn-bg: var(--_p-color-brand); /* #004b8d */
  --sp-btn-orange-bg: var(--_p-orange); /* #ff6500 */
  --sp-btn-text: var(--_p-white); /* #ffffff */
  --sp-btn-pad-y: 1px;
  --sp-btn-pad-x: 14px;
  --sp-btn-radius: 24px;
  --sp-btn-border-width: 2px;
  --sp-btn-font-size: 1rem;
  --sp-btn-font-weight: 400;
  --sp-btn-dur: 0.2s;

  /* Buttons – Interaktions-Logik */
  --sp-btn-hover-mix: 90%, black;
  --sp-btn-active-mix: 90%, white;

  /* Buttons – spezielle Varianten */
  --sp-btn-wa-bg: var(--_p-green);
  --sp-btn-wa-fg: var(--_p-white);
  --sp-btn-info-fg: var(--_p-gray-600);
  --sp-btn-info-brd: var(--_p-gray-400);

  /* Stationen-Akzente */
  --sp-akz-stein: var(--_p-red);
  --sp-akz-kiel: var(--_p-blue);
  --sp-akz-dk: var(--_p-orange);

  /* Cards – Icons & Detail-Elemente */
  --sp-icon-size: 20px;
  --sp-icon-color: var(--sp-color-brand);
  --sp-icon-top-align: 2px;
  --sp-icon-gap: 0.375rem;
  --sp-tel-offset: -0.7em;
  --sp-chevron-size: 24px;
  --sp-chevron-icon-size: 16px;
  --sp-divider-color: var(--_p-br-line);

  /* Carousel */
  --sp-carousel-card-w: min(82vw, 360px);
  --sp-carousel-gap: 0.75rem;
  --sp-carousel-pad: 1rem;
  --sp-arrow-size: 32px;
  --sp-arrow-bg: oklch(0% 0 0 / 0.04);
  --sp-arrow-border: 1px solid oklch(0% 0 0 / 0.10);
  --sp-arrow-color: var(--_p-gray-400);
}

@media (min-width: 640px) {
  :root {
    --sp-carousel-pad: clamp(1.5rem, 4vw, 0);
  }
}

/* ==========================================================================
   3. GLOBALE TYPOGRAFIE & SILBENTRENNUNG & Farben
   ========================================================================== */

/* 3.1 Basis-Einstellungen
   Hinweis: font-size !important bleibt vorerst bestehen, da Twenty Seventeen /
   style.css sonst mit höherer Spezifität überschreibt. Langfristig sauberer:
   Spezifität in style.css senken statt hier mit !important zu kontern. */
body {
  color: var(--sp-color-text-primary) !important;
  font-family: var(--sp-font-body);
  font-size: 1.125rem !important;
  font-weight: var(--sp-weight-regular);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3.2 Fließtext-Optimierung: Silbentrennung aktiv, kein "pretty" (verhindert Lücken) */
p,
li,
blockquote {
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: wrap;
}

/* figcaption profitiert von pretty, da kurze Texte */
figcaption {
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Überschriften gleichmäßig verteilen */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* 3.3 Cards: Aggressiverer Umbruch für deutsche Komposita
   overflow-wrap: anywhere erlaubt Umbruch auch in kürzeren Wörtern */
.sp-cards__body,
.sp-cards__sub,
.sp-cards__lead,
.sp-cards__list-item span,
.sp-cards__list--plain li {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
  hyphenate-limit-chars: 5 2 2; /* Progressiver Enhancement */
}

/* 3.4 Mobile: Feinere Steuerung bei wenig Platz */
@media (max-width: 850px) {
  p,
  li,
  blockquote {
    hyphenate-limit-chars: 4 2 2; /* Kürzere Wörter dürfen getrennt werden */
  }
  
  /* Cards auf Mobile noch aggressiver */
  .sp-cards__body,
  .sp-cards__sub,
  .sp-cards__lead {
    hyphenate-limit-chars: 4 2 2;
  }
}

/* 3.5 UI-Elemente: Umbruch verhindern, aber Overflow schützen */
button,
.wpb_button,
.sp-btn,
input,
select,
.badge,
.tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3.6 Links & Code: Lange Strings zwingend umbrechen */
a,
code,
pre,
.url {
  overflow-wrap: break-word;
  word-break: break-all; /* Für URLs und Code */
}


/* Saubere Listen mit hängendem Einzug – nur für Content-Listen, nicht fürs Menü */
.sp-list,
.entry-content ul,
.entry-content ol {
    margin-left: 0;
    padding-left: 1.3em;
    list-style-position: outside;
}

.sp-list li,
.entry-content ul li,
.entry-content ol li {
    padding-left: 0.01em;
    margin-bottom: 0.45em;
}

/* Für verschachtelte Listen */
.sp-list ul, .sp-list ol,
.entry-content ul ul,
.entry-content ol ul,
.entry-content ul ol,
.entry-content ol ol {
    padding-left: 1.2em;
}

/* ---- Farben ---- */
#page .isorange {
   color: var(--sp-orange) !important;
}

/* ==========================================================================
   4. HERO-BANNER – Front-Page: Höhe reduziert, Parallax bleibt erhalten
   ========================================================================== */    

@media screen and (min-width: 48em) {
  /* Front-Page */
  .has-header-image.twentyseventeen-front-page .custom-header {
    max-height: 88vh !important;
  }
  .has-header-image.twentyseventeen-front-page .custom-header-media {
    height: 88vh !important;
    max-height: 88vh !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }
  .has-header-image.twentyseventeen-front-page .custom-header-media img,
  .has-header-image.twentyseventeen-front-page .custom-header-media video {
    height: 100% !important;
    width: 100% !important;
    max-height: 88vh !important;
    object-fit: cover;
    object-position: center;
  }

  /* Unterseiten */
  body:not(.twentyseventeen-front-page) .custom-header {
    max-height: 80vh !important;
  }
  body:not(.twentyseventeen-front-page) .custom-header-media {
    height: 80vh !important;
    max-height: 80vh !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }
  body:not(.twentyseventeen-front-page) .custom-header-media img,
  body:not(.twentyseventeen-front-page) .custom-header-media video {
    height: 100% !important;
    width: 100% !important;
    max-height: 80vh !important;
    object-fit: cover;
    object-position: center;
  }
}
     

/* ==========================================================================
   5. BILD-RESET
   ========================================================================== */
#main .entry-content a img,
.comment-content a img,
.widget a img {
  -webkit-box-shadow: none;
}


/* ==========================================================================
   6. MOBIL-NAVIGATION
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* Body-Kontext erhöht die Spezifität gegenüber Theme-Defaults */
  body.colors-custom .navigation-top,
  body .navigation-top {
    background: transparent !important;
    border: none;
  }
  .site-branding-text {
    display: none;
  }
}


/* ==========================================================================
   7. CONTENT CONTAINER ALIGNMENT
   ========================================================================== */
.entry-header,
.page-header,
.entry-content,
.site-main,
.panel-content .entry-header,
.panel-content .entry-content {
  width: 100%;
  max-width: var(--sp-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 3px !important;
  padding-right: 3px !important;
  box-sizing: border-box;
}


/* ==========================================================================
   7. LOGO
   ========================================================================== */
/* Platz für das Logo sofort zu reservieren */
.custom-logo-link img {
    width: 450px !important;
    height: 141px !important; 
    object-fit: contain;
}

.custom-logo-link img {
    max-height: 141px !important;
}  

.custom-logo-link img {
    margin-top: 1.5em;
}

/* ==========================================================================
   7. SITE TITLE
   ========================================================================== */
body:not(.twentyseventeen-front-page) .entry-header {
    padding-top: 1rem;
}

/* Site Title ausblenden moboil */
@media screen and (max-width: 767px) {
  .custom-header .site-branding .site-title {
    display: none;
  }
  .custom-header .custom-logo-link img {
    margin-top: 0.5rem;
  }
  .site-header .custom-header {
    height: 70vh !important;
  }
}


/* =====================================================
   1. ÜBERSCHRIFTEN – BASIS & RESETS
   ===================================================== */
/* Subline über der H1 */
.topline {
  font-size: var(--sp-text-eyebrow); /* 0.8rem */
  font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-ls-eyebrow); /* 0.07em */
  text-transform: uppercase;
  color: var(--sp-color-text-secondary);
  margin-top: var(--sp-space-2xl) !important;
  margin-bottom: 0 !important;
}

@media screen and (max-width: 47.9375em) {
    #page .entry-content>.sp-mobile-content-logo+.topline {
        margin-top: 2rem !important;
    }
}

#page h1,
#page h2,
#page h3,
#page h4,
#page h5,
#page h6,
#page .entry-title,
#page .page-title,
#page .wp-block-heading {
  clear: both;
  text-transform: none;
  text-wrap: balance;
  hyphens: none;
  -webkit-hyphens: none;
  color: var(--sp-color-heading) !important;
  font-weight: var(--sp-weight-bold) !important; 
}

/* =====================================================
   2. TYPOGRAFIE – GRÖSSEN, LINE-HEIGHT & LETTER-SPACING
   (Hinweis: Margins wurden entfernt, siehe Block 3)
   ===================================================== */
#page h1,
#page .entry-title,
#page .page-title,
#page h1.wp-block-heading {
  font-size: var(--sp-text-h1) !important;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-top: var(--sp-space-2xs) !important;
  margin-bottom: var(--sp-space-xl) !important;
}

#page h2,
#page h2.wp-block-heading {
  font-size: var(--sp-text-h2) !important;
  letter-spacing: -0.028em;
  line-height: 1.2;
}

#page h3,
#page h3.wp-block-heading {
  font-size: var(--sp-text-h3) !important;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

#page h4,
#page h5,
#page h6 {
  font-size: var(--sp-text-h4) !important;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* =====================================================
   3. EINHEITLICHE ABSTÄNDE & LAYOUT-RESETS
   für Hauptseite, Unterseiten & Subsites
   ===================================================== */

/* Einheitliche Margins für alle Überschriften */
#page h2,
#page h3,
#page h4,
#page h5,
#page h6,
#page .entry-title,
#page .page-title,
#page .wp-block-heading,
.entry-header .entry-title {
  padding-top: 0 !important;
  margin: var(--sp-space-lg) 0 !important; 
}

/* Padding-Resets für umliegende Container */
.entry-header {
  padding: 0 !important;
}

.site-content {
  padding-top: 0 !important;
}

.panel-content .wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#content {
  padding-bottom: 0 !important;
}

/* Sonderfall weiße Überschriften */
#page .iswhiteblue h3 {
  font-size: var(--sp-text-h4) !important;
  font-weight: var(--sp-weight-bold) !important;
  color: var(--sp-white) !important;
  letter-spacing: -0.02em;
}

/* =====================================================
   MOBILE FIX: h3 (und alle Überschriften) zum Umbrechen zwingen
   !important nötig, da spätere Regeln (hyphens: none) sonst gewinnen
   ===================================================== */
@media (max-width: 850px) {
  #page h1,
  #page h2,
  #page h3,
  #page h4,
  #page h5,
  #page h6,
  #page .entry-title,
  #page .page-title,
  #page .wp-block-heading {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    text-wrap: wrap !important; /* überschreibt text-wrap: balance */
  }
}


/* =====================================================
   Highlighter – mit var(--sp-orange), mobil + desktop sicher
   ===================================================== */
#page h1 mark,
#page h2 mark,
#page h3 mark,
#page .entry-title mark,
#page .page-title mark,
#page h1.wp-block-heading mark,
#page h2.wp-block-heading mark,
#page h3.wp-block-heading mark,
.colors-custom #page h1 mark,
.colors-custom #page h2 mark,
.colors-custom #page h3 mark {
  background: none !important;
  background-color: transparent !important;
  color: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  text-decoration: none !important;
  padding: 0 0.04em;
  position: relative;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  /* Linie zur Hälfte hinter dem Text */
  background-image: linear-gradient(
    to top,
    transparent 0%,
    transparent 0.08em,
    var(--sp-yellow) 0.08em,
    var(--sp-yellow) 0.42em,
    transparent 0.42em
  ) !important;
  background-repeat: no-repeat !important;
}

/* Mobile: etwas dünner */
@media (max-width: 767px) {
  #page h1 mark,
  #page h2 mark,
  #page h3 mark,
  #page .entry-title mark,
  #page .page-title mark,
  #page h1.wp-block-heading mark,
  #page h2.wp-block-heading mark,
  #page h3.wp-block-heading mark {
    background-image: linear-gradient(
      to top,
      transparent 0%,
      transparent 0.08em,
      var(--sp-yellow) 0.08em,
      var(--sp-yellow) 0.36em,
      transparent 0.36em
    ) !important;
  }
}


/* ==========================================================================
   Footer
   ========================================================================== */
#page h2.widget-title {
  color: #ffffff!important;
  font-size: 1rem!important;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: none; 
  text-shadow: none!important;
  hyphens: none;
  margin: 0 0 .4em 0 !important;
  text-align: left!important;
}

#Page.site-footer h2.widget_text a  {
  color: #fff!important;
}
   
.colors-custom .widget ul li {
border:none
}

.widget-title {
text-transform: none!important
}

.site-footer .wrap {
padding-bottom:1em
}

.widget {
padding-bottom:1em
}

#content .site-footer {
	background-color: #004b8d;
}

.colors-custom .site-footer {
border-top-color:#000!important
}

.site-footer .widget-area {
	padding-bottom:0;
	padding-top:0
}

.colors-custom .site-info a:hover {
	color:#000!important;
	text-decoration:none!important
}

.site-footer .widget-area a {
	color:#004b8d;
}

.site-footer .widget-area .icon {
	color:#fff
}

.site-footer .widget_text {
	color:#fff !important;
}

.site-footer .widget_text a {
	color:#fff !important;
}

.site-footer .search-form button.search-submit {
	background: #fff !important;
}

.site-footer .widget-area .icon {
    color: #004b8d !important;
}

/* --- Suchleiste --- */

.search-form .search-submit {
border:1px solid #000
}

.search-form .search-submit .icon {
top:-4px
}

.search-submit .icon {
color:#fff!important
}



/* ==================================== Deaktiviert ========================================================== */  
   @media not all {   
           
/* ==========================================================================
   Blauer Kontakt Container
   ========================================================================== */
/* Kompakter Fix für Telefon-Links */
a[href^="tel:"] {
    display: inline-block;
    padding: 6px 0;  /* Weniger Abstand, aber genug für den Daumen */
    margin-bottom: 2px; /* Nur ein minimaler Abstand nach unten */
    line-height: 1.2;   /* Hält die Zeilen eng zusammen */
    min-width: 44px;    /* Mindestbreite, damit es klickbar bleibt */
}

/* Erzeugt den perfekten Abstand nach oben UND zentriert den Button mittig */
.contact-block .wpb_button_border {
  /*  display: table !important;  Sorgt dafür, dass margin: auto die exakte Button-Breite berechnet */
    margin: 10px auto 10px auto !important; /* Oben 0px, Rechts/Links auto (Zentrierung), Unten 0 */
}

/* Kontaktliste mit minimal zulässigem vertikalen Abstand */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px Abstand zwischen den Einträgen */
}

/* Einzelne Kontaktzeile */
.contact-item {
  display: flex;
  align-items: center;
  min-height: 44px; /* Mindesthöhe für Touch-Bedienung */
  margin-bottom: 8px; /* zusätzliche Sicherheits-Anpassung (ohne doppelten Abstand) */
}

/* Link in der Kontaktzeile */
.contact-item a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem; /* Möglichst kompaktes, aber berührungsfreundliches Ziel */
  text-decoration: none;
  color: #ffffff !important; /* guter Kontrast auf dunklem Grund */
}

/* Absoluter Fix: Erzwingt Weiß und Unterstreichung beim Hovern, egal was das Theme sagt */
.iswhiteblue.contact-block .contact-list .contact-item a:hover,
.iswhiteblue .contact-item a:hover,
.contact-item a:hover * {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Sichtbarer Fokus-Stil für Tastaturnavigation */
.contact-item a:focus,
.wpb_button_border:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.iswhiteblue {
   background-color: var(--sp-color-brand) !important;
   color: #fff!important;
   padding: 1em 1.5em!important;
   line-height: 1.4;
   border-radius: 16px; 
  
   /* DAS GEHEIMNIS: Der Container wird exakt so schmal wie der längste Inhalt */
   width: max-content !important; 
   max-width: 100% !important; /* Verhindert, dass er auf Handys breiter als der Bildschirm wird */
   
   /* Zentriert den gesamten blauen Block in seiner Spalte */
   margin: 0 auto !important; 
}

.iswhiteblue td {
    padding: 0 .8em .5em 0;
}
  /* blaue Infobox-Spalte */
@media (max-width: 1100px) {
  .wp-block-columns.is-layout-flex {
    flex-direction: column !important;
  }
  /* Nur die Infobox-Spalte schmal halten */
  .infobox-spalte {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    white-space: normal;
  }
  /* Optional: Abstand nach oben, damit die Box nicht direkt am Text klebt */
  .infobox-spalte {
    margin-top: 0 !important;
  }
}
     
   }
/* ==================================== Deaktiviert ========================================================== */     



/* ==========================================================================
   KURS-CARD-BLOCK – Konsolidiert
   Alle .course-card / .courses-grid-Regeln in einem Block
   ========================================================================== */
/* --- 1. GRID CONTAINER --- */
.entry-content .courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
    gap: 1rem !important;
    justify-items: stretch;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}
 @media (max-width: 800px) {
    .entry-content .courses-grid {
        gap: 1rem;
        padding: 1rem 0.2rem;
    }
}

/*--- 2. CARD BASE --- */
.entry-content .course-card {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.02);
    border-radius: clamp(0.75rem, 2vw, 1.25rem);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px rgba(0, 0, 0, 0.03);
    padding: clamp(1rem, 4vw, 1.75rem); 
    width: 100%;
    min-width: 300px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    transition: box-shadow 200ms ease, filter 200ms ease;
    margin: 0 !important;
}
.entry-content .course-card:hover {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.05);
      transform: none;
}
/* --- Hover --- */
@media (hover: hover) {
.entry-content .course-card:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.05);
    }
}
/* --- 4. NESTED ELEMENTS --- */
.entry-content .course-title {
    font-size: 1.05rem;
    font-weight: 700;
    text-wrap: nowrap !important;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: #004b8d !important;
    white-space: nowrap;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}
.entry-content .course-description {
    font-size: 1rem;
    color: #444;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
}
.entry-content .course-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
}
.entry-content .course-bottom .wpb_button {
    overflow: visible;
    text-overflow: unset;
    width: fit-content;
    flex-shrink: 0;
}

.entry-content .course-price {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
}

/* --- 5. RESPONSIVE BREAKPOINTS --- */
/* Spaltenanzahl wird bereits durch auto-fit/minmax in Block 1 geregelt.
   Hier nur noch Spacing-Anpassungen für kleine Screens. */
@media (max-width: 800px) {
    .entry-content .courses-grid {
        gap: 1rem;
        padding: 1rem 0.2rem;
    }
    .entry-content .entry-content .course-card {
        max-width: 100%;
        min-width: 0;
        padding: 1.2rem 0.7rem;
    }
    .entry-content .course-title {
        white-space: normal;
    }
}

/* --- 6. MOBILE SWIPE (Optional - falls benötigt) --- */
@media (max-width: 767px) {
    .entry-content .courses-grid-swipe {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 8px 16px 12px 16px;
    }
    .entry-content .courses-grid-swipe .courses-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        padding: 4px 16px 4px 4px;
        width: auto;
    }
    .entry-content .courses-grid-swipe .course-card {
        scroll-snap-align: start;
        width: 260px;
        min-width: 260px;
        max-width: 260px;
        flex-shrink: 0;
    }
}


/* =========================================================
8. BRANDING / HERO TITLE
========================================================= */
.site-branding {
  text-align: center; /* Geändert: von left → center */
  padding: clamp(1rem, 3vw, 2rem) 1rem; /* Geändert: weniger oben/unten, mehr seitlich */
}

.site-branding .site-title {
  display: inline-block;
  margin: 0;
  padding: 0.3125rem 0.625rem 0.75rem; /* Geändert: mehr Padding unten (ragt nach unten) */
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.25rem;
}

.site-branding .site-title a {
  color: #fff;
  font-size: clamp(1rem, 4vw, 1.55rem);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}



/* =========================================================
   Mobil Bildschirm verbreitern
========================================================= */
@media (max-width: 767px) {
    .panel-content .wrap {
       padding-left: 0.3em !important;
       padding-right: 0.1em !important;
}
}


/* =========================================================
    Galerie 3-Spalten mobile: Dynamische Größe mit aspect-ratio
========================================================= */
@media (max-width: 600px) {

    /* Galerie-Container: Flex auf Grid umstellen */
    figure.wp-block-gallery.is-layout-flex,
    .wp-block-gallery {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Gutenberg setzt hier flex-basis und max-width – beides killen */
    figure.wp-block-gallery.is-layout-flex > figure.wp-block-image,
    .wp-block-gallery > .wp-block-image {
        flex-basis: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* <a> muss das figure ausfüllen */
    figure.wp-block-gallery .wp-block-image a,
    .wp-block-gallery .wp-block-image a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Bild selbst */
    figure.wp-block-gallery .wp-block-image img,
    .wp-block-gallery .wp-block-image img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* figure-Tag innerhalb */
    figure.wp-block-gallery .wp-block-image figure,
    .wp-block-gallery .wp-block-image figure {
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }
}

/* Galerie – Desktop (E-Foil) nebeneinander */
.wp-block-gallery-1 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin-bottom: 2.5em;
}

.wp-block-gallery-1 .wp-block-image {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

.wp-block-gallery-1 .wp-block-image img {
    height: 250px !important;
    width: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}




/* Buttons – konsolidiert
------------------------------------------- */
.colors-custom .booking-button {
    padding: .3rem .8rem !important;
}
.colors-custom .booking-button hover{
    border: 1px solid var(--sp-color-brand) !important;
}
.colors-custom .booking-button:hover,
.colors-custom .booking-button:focus {
    outline: none;
}

/* ------------------------------------------------------------
   1) NATIVE THEME-BUTTONS (Twenty Seventeen: <button>, input[type=button/submit])
   -> EINE Quelle der Wahrheit, nicht mehr 3x widersprüchlich definiert
------------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"] {
    appearance: none;
    background-color: var(--sp-color-brand) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: #fff !important;
    color: var(--sp-color-brand) !important;
    border: 1px solid var(--sp-color-brand) !important;
}

input + button,
input + input[type="button"],
input + input[type="submit"] {
    padding: 0.5em 1em;
    vertical-align: middle;
    background-color: var(--sp-color-brand) !important;
}

/* ------------------------------------------------------------
   2) .colors-custom KONTEXT (Kadence Color-Palette Wrapper)
   -> nur noch EIN Block statt zwei widersprüchlichen
------------------------------------------------------------- */
.colors-custom button,
.colors-custom input[type="button"],
.colors-custom input[type="submit"],
.colors-custom .entry-footer .edit-link a.post-edit-link {
    vertical-align: middle;
    text-decoration: none !important;
    margin: 2px 4px 0 0 !important;
    background: var(--sp-color-brand) !important;
    color: #fff !important;
    border: 1px solid var(--sp-color-brand) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    border-radius: 10px;
    padding: 5px 10px;
    display: inline-block;
    transition: background 0.3s ease-in-out;
}

/* WICHTIG: :hover ergänzt, damit edit-link nicht dauerhaft gestylt ist */
.colors-custom button:hover,
.colors-custom input[type="button"]:hover,
.colors-custom input[type="submit"]:hover,
.colors-custom .entry-footer .edit-link a.post-edit-link:hover {
    background: #fff !important;
    color: var(--sp-color-brand) !important;
    border: 1px solid var(--sp-color-brand) !important;
}

.colors-custom button.secondary:hover,
.colors-custom hr {
    background: #fff;
}

.back-button {
    float: right;
}

.ssttbutton-background {
    color: #808080;
}

/* ------------------------------------------------------------
   3) .wpb_button KOMPONENTE (eigener Namespace – bewusst getrennt
   von den nativen Button-Regeln oben, damit sie sich NICHT mehr
   gegenseitig überschreiben)
------------------------------------------------------------- */
.wpb_button {
    vertical-align: middle;
    text-decoration: none;
    margin: 5px 5px 5px 0;
    background: var(--sp-color-brand) !important;
    color: #ffffff;
    border: 1px solid #004b8d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    border-radius: 10px;
    padding: 5px 10px;
    display: inline-block;
    transition: background 0.3s ease-in-out;
}

.wpb_button:hover,
a.wpb_button:hover {
    background: #ffffff !important;
    color: var(--sp-color-brand) !important;
    border: 1px solid #004b8d;
}

.wpb_button + br {
    display: none;
}

.wpb_button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.wpb_button_info {
    background: #fff !important;
    padding: 3px 7px;
    border: 1px #444 solid !important;
    font-size: 1rem;
}

.wpb_button_border {
    text-decoration: none !important;
    padding: 5px 10px;
    margin: 0;
    background: var(--sp-color-brand) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    border-radius: 10px;
}

.entry-content a.wpb_button_border {
    text-decoration: none !important;
    color: #ffffff !important;
}

a.wpb_button_border:hover,
.entry-content a.wpb_button_border:hover,
.panel-content .entry-content a.wpb_button_border:hover {
    background: #ffffff !important;
    color: var(--sp-color-text-primary) !important;
    border: 1px solid #004b8d !important;
}

.site-footer .widget-area a.wpb_button_border:hover {
    background: #fff !important;
    color: #004b8d !important;
    border: 1px solid #004b8d !important;
    font-weight: 500 !important;
}


/* ------------------------------------------------------------
   Mobile Optimierung
------------------------------------------------------------- */
@media (width <= 600px) {
    .wpb_button {
        width: 95%;
        text-align: center;
        margin: 5px 0 !important;
    }
}

.product-list-row .leao-product-price input[type=submit]:hover, .product-list-row .leao-product-price .submit:hover {
    background: #fff !important;
}


/* =========================================================
    Img Rahmen 
========================================================= */
.border {
    padding: 0;
    border:  none;
    margin:  1em;    
    transform: rotate(2deg);
    background: none;
    box-shadow: none;
}

.border-left {
    padding: 1em;
    border: 1px solid silver;
    margin:  2em;    
    transform: rotate(-2deg);
    background: #fff;
    box-shadow: rgb(0 0 0 / 12%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 2px;
}






/* Tabs optimiert */
.tab-wrap {
  border-radius: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background-color: #fff;
  margin: 0 0 20px !important;
  border: none;
  overflow: hidden;
  /* Wichtig für einen weichen Übergang */
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
  box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.tab-wrap:hover {
  transform: translateY(-1px); /* Subtiler Lift-Effekt */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 
              0 1px 8px rgba(0, 0, 0, 0.04);
}

/* -------------------------------------------------------------------
   Radio-Inputs verstecken
   ------------------------------------------------------------------- */
.tab {
  display: none;
}

/* -------------------------------------------------------------------
   Sichtbarer Tab-Inhalt, wenn entsprechender Radio-Button selected ist
   ------------------------------------------------------------------- */
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1),
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2),
.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3),
.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4),
.tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5),
.tab:checked:nth-of-type(6) ~ .tab__content:nth-of-type(6) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  transform: translateY(0);
}

/* -------------------------------------------------------------------
   Tab-Buttons (Labels)
   ------------------------------------------------------------------- */
.tab + label {
  box-shadow: 0 -1px 0 #eee inset;
  border-radius: 0 !important; /* "none" ist ungültig, 0 verwenden */
  cursor: pointer;
  
  /* WICHTIGSTE ÄNDERUNG: flex statt block */
  display: flex !important;
  align-items: center;      /* Vertikal mittig */
  justify-content: center;  /* Horizontal mittig */
  
  text-decoration: none;
  color: #fff;
  flex-grow: 3;
  text-align: center;
  background-color: var(--sp-tabs-bg); 
  user-select: none;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px; /* Ein kleiner Puffer seitlich schadet nie */
  margin: 0 0.1px;
}


/* Hover-Zustand ohne Verkleinerung */
.tab + label:hover {
  background-color: #000 !important;
  color: #fff !important;
  /* Wir entfernen den Inset-Schatten, falls dieser optisch quetscht */
  box-shadow: none !important; 
  /* Wir erzwingen, dass die Größe gleich bleibt */
  transform: none !important;
  scale: 1 !important;
  /* Wir stellen sicher, dass das Padding nicht überschrieben wird */
  padding: 0 10px !important; 
}

/* Entfernen des Abstands des ersten und letzten Tabs */
.tab:first-of-type + label {
  margin-left: 0;  /* Kein Abstand am linken Rand */
}

.tab:last-of-type + label {
  margin-right: 0; /* Kein Abstand am rechten Rand */
}

/* -------------------------------------------------------------------
   Aktiver Tab-Button (Gelb)
   ------------------------------------------------------------------- */
.tab:checked + label {
  background-color: var(--sp-yellow); 
  color: #000 !important;
  cursor: default;
}
.tab:checked + label:hover {
  background-color: var(--sp-yellow) !important;
  color: #000 !important;
}

/* -------------------------------------------------------------------
   Tab-Inhalte
   ------------------------------------------------------------------- */
.tab__content {
  padding: 10px 25px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  transform: translateY(-3px);
  border-radius: 0;
  box-sizing: border-box;
}

.tab__content img {
  margin-bottom: 2em !important;
}