@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
:root{ --cab: "Cabin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* Startseite: Header-Logo kleiner machen */
.home .custom-logo,
.home .custom-logo-link img,
.home .site-logo img,
.home .site-branding img,
.home .navbar-brand img,
.home .wp-block-site-logo img {
  width: 100px !important;   /* ⬅ gewünschte Breite (z.B. 140–180 px testen) */
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
}

/* Falls das Logo als Bildblock im Header eingefügt ist (kein Site-Logo): */
.home .site-header .wp-block-image img {
  max-height: 64px !important;  /* alternativ per Höhe begrenzen */
  height: auto !important;
  width: auto !important;
}

/* Header-Zeile etwas kompakter (optional) */
.home .site-header,
.home .header,
.home .header-main,
.home .site-header .navbar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/* 1) Kompakte Hintergrund-Plakette für Überschriften/Einstreuungen */
.text-bg{
  background: rgba(0,0,0,.55);           /* dunkel, gute Lesbarkeit */
  color:#fff;
  padding: .2em .6em;
  border-radius: .5em;
  display:inline;                         /* nur so groß wie der Text */
  -webkit-box-decoration-break: clone;    /* mehrere Zeilen sauber */
  box-decoration-break: clone;
}

/* 2) Box für ganze Textbereiche (Überschrift + Absätze + Buttons) */
.text-panel{
  background: rgba(0,0,0,.55);            /* dunkler Overlay-Hintergrund */
  color:#fff;
  padding: 18px 22px;
  border-radius: 14px;
  max-width: 880px;                        /* bei Bedarf anpassen */
}
.text-panel h1,.text-panel h2,.text-panel h3{ margin-top:0; }
.text-panel p{ margin: 0 0 10px; }
@media (max-width: 782px){
  .text-panel{ padding:14px 16px; max-width: 100%; }
}

/* 3) Alternative Farben – passend zu deinem Design */
.text-panel--light{                         /* zartes Altrosa */
  background: rgba(250,238,241,.92);
  color:#2C2C2C;
}
.text-panel--turq{                          /* neon-türkiser Schimmer */
  background: rgba(0,245,255,.18);
  color:#2C2C2C;
  backdrop-filter: blur(2px);               /* leichter „Frosted“-Effekt */
}

/* 4) Optional: nur die Headline als „Chip“ */
.heading-chip{
  display:inline;
  background: rgba(0,0,0,.6);
  color:#fff;
  padding:.25em .7em;
  border-radius:9999px;
}
/* === Logo kleiner (Desktop) === */
header .site-logo img,
header .site-branding img,
header .navbar-brand img,
.custom-logo,
.custom-logo-link img,
.site-header .wp-block-site-logo img,
.wp-block-site-logo img {
  max-height: 88px !important;  /* <- Desktop-Höhe hier anpassen */
  height: auto !important;
  width: auto !important;
}

/* Headerzeile nicht zu hoch halten */
.site-header,
.header-main,
.site-branding,
.site-header .wp-block-group {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: unset !important;
}

/* === Logo kleiner (Mobile) === */
@media (max-width: 782px) {
  header .site-logo img,
  header .site-branding img,
  header .navbar-brand img,
  .custom-logo,
  .custom-logo-link img,
  .site-header .wp-block-site-logo img,
  .wp-block-site-logo img {
    max-height: 48px !important; /* <- Mobile-Höhe hier anpassen */
  }
}

/* Falls NUR die Startseite zu groß ist */
.home .custom-logo,
.home .custom-logo-link img,
.home .wp-block-site-logo img {
  max-height: 58px !important;
}

.panel-box {
  background: rgba(255,255,255,0.88);
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Sanfter Puls-Effekt */
.fly-in-1,
.fly-in-2 {
    animation: pulse 2.5s ease-in-out infinite;
    transform-origin: center center;
}

/* Puls-Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04); /* leichtes Vergrößern */
    }
    100% {
        transform: scale(1);
    }
}

/* Optional: das zweite Bild pulsiert leicht versetzt */
.fly-in-2 {
    animation-delay: 0.4s;
}

/* Leichte Hinweis-Box */
.hinweis-box {
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 20px 24px;
  max-width: 700px;
}

/* Navigation standardmäßig aus (Desktop) */
.mobile-only-nav {
  display: none !important;
}

/* Auf Mobil anzeigen */
@media (max-width: 768px) {
  .mobile-only-nav {
    display: block !important;
  }
}

/* Standard: ausblenden (Desktop) */
.mobile-only {
  display: none !important;
}

/* Nur auf Mobil anzeigen */
@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
}