/* ==========================================================================
   0. CUSTOM PROPERTIES (Design-Tokens)
   ========================================================================== */
:root {
  /* ── Farben (8 statt 17 – konsolidiert) ── */
  --color-bg:            #eedfc8;          /* Seiten-Hintergrund */
  --color-surface:       #faf5ee;          /* Helle Flächen (Nav-Panel, Buttons) */
  --color-surface-warm:  #f0e8dc;          /* Warme Blasen & Karten */
  --color-accent:        #705643;          /* Logo-Braun – DIE Hauptfarbe für alles */
  --color-dark:          #3d3733;          /* Nur für Button-Hintergründe */
  --color-muted:         #a69585;          /* Dezente Labels, Badges, Nav-Punkte */
  --color-border:        rgba(166, 149, 133, 0.15);  /* Feine Trennlinien */
  --color-border-frame:  #968771;          /* Bild-Rahmen */

  /* ── Schatten ── */
  --shadow-soft:         0 10px 25px rgba(61, 55, 51, 0.05);
  --shadow-medium:       0 15px 30px rgba(97, 88, 82, 0.08);
  --shadow-strong:       0 15px 35px rgba(61, 55, 51, 0.04);
  --shadow-btn:          0 10px 20px rgba(61, 55, 51, 0.12);
  --shadow-panel:        0 30px 60px rgba(61, 55, 51, 0.25);
  --shadow-text:         4px 4px 7px #b4a48d;

  /* ── Organische Border-Radien ── */
  --radius-organic-1:    55% 45% 60% 40% / 40% 52% 48% 60%;
  --radius-organic-2:    45% 55% 40% 60% / 50% 45% 55% 50%;
  --radius-organic-3:    28px 36px 32px 40px / 34px 28px 38px 32px;
  --radius-organic-btn:  50px 35px 55px 40px / 40px 50px 35px 55px;
  --radius-organic-nav:  35% 65% 40% 60% / 50% 40% 60% 50%;

  /* ── Schriften ── */
  --font-hand:           "Patrick Hand", "Comic Sans MS", Georgia, serif;
  --font-system:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         Helvetica, Arial, sans-serif;

  /* ── Übergänge ── */
  --ease-organic:        cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:     0.2s ease;
  --transition-medium:   0.3s ease;
  --transition-slow:     0.5s ease;

  /* ── Abstände ── */
  --page-max-width:      1200px;
  --page-padding:        20px;
  --section-padding:     40px;
}

/* ==========================================================================
   1. SCHRIFTEN & RESET
   ========================================================================== */
@font-face {
  font-display: swap;
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/patrick-hand-v25-latin-regular.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/patrick-hand-v25-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/patrick-hand-v25-latin-regular.woff2")
      format("woff2"),
    url("../fonts/patrick-hand-v25-latin-regular.woff") format("woff"),
    url("../fonts/patrick-hand-v25-latin-regular.ttf") format("truetype"),
    url("../fonts/patrick-hand-v25-latin-regular.svg#PatrickHand")
      format("svg");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   2. GLOBALE BASIS-STYLES
   ========================================================================== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  background-color: var(--color-bg);
  color: var(--color-accent);
  font-family: var(--font-system);
}

/* --- Client-Side Language Toggle --- */
html.lang-de .lang-en { display: none !important; }
html.lang-en .lang-de { display: none !important; }

/* Custom scrollbar styling for desktop/PCs to match organic theme */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-bg);
}

/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-accent);
  border-radius: 10px;
  border: 3px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-muted);
}

/* Handschrift für Akzent-Elemente */
.brand-name,
.welcome-title,
.welcome-badge,
.section-subtitle,
.blessing-text,
.teaser-info h3,
.teaser-poetry-text,
.teaser-section-title {
  font-family: var(--font-hand);
}

/* Text-Schatten für Überschriften & Akzente */
.brand-name,
.section-subtitle,
.teaser-section-title,
.teaser-info h3,
.blessing-text,
.contact-organic-title,
.organic-detail-value.artist-name {
  text-shadow: var(--shadow-text);
}

/* ==========================================================================
   3. HINTERGRUND-ELEMENTE (Organische Lichtflecke)
   ========================================================================== */
.organic-bg-shape {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  filter: blur(40px);
  width: 70vw;
  height: 70vw;
  max-width: 650px;
  max-height: 650px;
}

.shape-one {
  top: -2%;
  right: -15%;
  background: radial-gradient(
    circle,
    rgba(235, 225, 209, 0.85) 0%,
    rgba(250, 245, 238, 0) 70%
  );
}

.shape-two {
  top: 35%;
  left: -25%;
  background: radial-gradient(
    circle,
    rgba(227, 215, 196, 0.7) 0%,
    rgba(250, 245, 238, 0) 70%
  );
}

/* ==========================================================================
   4. LAYOUT & STRUKTUR (Mobile-First, bis 849px)
   ========================================================================== */
.page-wrapper {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 max(var(--page-padding), env(safe-area-inset-right, 0px))
           0 max(var(--page-padding), env(safe-area-inset-left, 0px));
  position: relative;
}

/* ==========================================================================
   5. HEADER & BRANDING
   ========================================================================== */
.main-header {
  padding: var(--page-padding) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-wrap img {
  max-width: 60px;
  height: auto;
  background-color: var(--color-accent);
  padding: 6px 12px;
  border-radius: 50% 40% 45% 52% / 40% 45% 50% 55%;
}

.brand-name {
  font-size: 22px;
  letter-spacing: 1.5px;
  color: var(--color-accent);
  font-weight: bold;
}

/* --- Sprachumschaltung (Mobile-First) --- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  z-index: 2001;
  font-family: var(--font-system);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2px;
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
}

.header-lang {
  display: none !important; /* Hide in header on mobile */
}

.menu-lang {
  margin: 35px auto 0 auto; /* Center at bottom of mobile nav menu */
  opacity: 0;
  transform: translateY(15px);
  transition:
    transform 0.4s var(--ease-organic),
    opacity 0.4s ease;
  transition-delay: 0.42s; /* Delayed fade in after the last nav link */
}

.main-nav.open .menu-lang {
  opacity: 1;
  transform: translateY(0);
}

.lang-btn {
  color: var(--color-muted);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 20px;
  transition: all var(--transition-fast);
  line-height: 1;
}

.lang-btn.active {
  background-color: var(--color-accent);
  color: var(--color-surface);
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(112, 86, 67, 0.25);
}

.lang-btn:hover:not(.active) {
  color: var(--color-accent);
  background-color: var(--color-surface-warm);
}

.lang-divider {
  display: none;
}

/* ==========================================================================
   6. NAVIGATION – Hamburger, X-Animation & Organisches Mobil-Popup
   ========================================================================== */

/* --- Hamburger-Button --- */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2000;
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
  transition: transform var(--transition-medium);
}

/* Fixiert, wenn Menü offen */
.menu-toggle.active {
  position: fixed;
  top: max(32px, env(safe-area-inset-top, 0px));
  right: max(25px, env(safe-area-inset-right, 0px));
}

.menu-toggle .bar {
  width: 100%;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 2px;
  transition:
    transform 0.3s var(--ease-organic),
    opacity var(--transition-medium),
    background-color var(--transition-medium);
}

/* Verwandlung zum X */
.menu-toggle.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.active .bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* --- Vollbild-Navigation (Overlay) --- */
.main-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available; /* iOS Safari Fix */
  background-color: rgba(61, 55, 51, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1999;
}

/* Organisches Panel hinter den Links */
.main-nav::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  background-color: var(--color-surface);
  border: 1px solid rgba(166, 149, 133, 0.2);
  border-radius: var(--radius-organic-nav);
  box-shadow: var(--shadow-panel);
  transform: scale(0.9) rotate(1.5deg);
  transition:
    transform 0.4s var(--ease-organic),
    border-radius var(--transition-slow);
  z-index: -1;
}

/* Offener Zustand */
.main-nav.open {
  opacity: 1;
  pointer-events: auto;
}

.main-nav.open::before {
  transform: scale(1) rotate(0deg);
  border-radius: 42% 58% 45% 55% / 48% 52% 52% 48%;
}

/* --- Nav-Links --- */
.nav-link {
  font-family: var(--font-hand);
  font-size: 28px;
  text-decoration: none;
  color: var(--color-accent);
  letter-spacing: 1.5px;
  text-transform: none;
  padding: 10px 24px;
  transform: translateY(15px);
  opacity: 0;
  transition:
    color var(--transition-fast),
    transform 0.4s var(--ease-organic),
    opacity 0.4s ease;
}

/* Staggered Fade-In */
.main-nav.open .nav-link                { opacity: 1; transform: translateY(0); }
.main-nav.open .nav-link:nth-child(1)   { transition-delay: 0.10s; }
.main-nav.open .nav-link:nth-child(2)   { transition-delay: 0.18s; }
.main-nav.open .nav-link:nth-child(3)   { transition-delay: 0.26s; }
.main-nav.open .nav-link:nth-child(4)   { transition-delay: 0.34s; }
.main-nav.open .nav-link:nth-child(5)   { transition-delay: 0.42s; }

.nav-link.active {
  color: var(--color-accent);
  font-weight: bold;
  border-bottom: 2px dashed var(--color-muted);
}

.nav-link:active {
  transform: scale(0.95);
  color: var(--color-accent);
}

/* ==========================================================================
   7. WELCOME-SECTION (Einleitung / Hero)
   ========================================================================== */
.welcome-section {
  padding: var(--section-padding) 0;
  text-align: center;
}

.welcome-badge {
  font-size: 15px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  display: inline-block;
}

.welcome-title {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 16px;
  line-height: 1.2;
}

.welcome-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-accent);
  font-style: italic;
  font-weight: bold;
}

/* ==========================================================================
   8. ABOUT-SECTION (Über mich)
   ========================================================================== */
.about-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--color-border);
}

.about-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-image-side {
  width: 100%;
}

.profile-frame {
  display: flex;
  justify-content: center;
}

.profile-img-organic {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius-organic-1);
  box-shadow: var(--shadow-medium);
  border: 6px solid var(--color-border-frame);
  -webkit-transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  outline: 1px solid transparent;
  transition:
    transform var(--transition-slow),
    border-radius var(--transition-slow),
    box-shadow var(--transition-slow);
}

.about-text-side {
  width: 100%;
}

.section-subtitle {
  font-size: 28px;
  color: var(--color-accent);
  margin-bottom: 16px;
  text-align: center;
}

.about-text-side p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.lead-para {
  font-size: 16px !important;
  color: var(--color-accent) !important;
  font-weight: bold;
}

.highlight-text {
  font-size: 16px !important;
  font-style: italic;
  color: var(--color-accent) !important;
  border-left: 3px solid #d4c5b3;
  padding-left: 12px;
  margin: 24px 0 !important;
  font-weight: bold;
}

.blessing-text {
  font-size: 26px;
  color: var(--color-accent);
  line-height: 1.4;
  margin-top: 24px;
  text-align: center;
}

/* ==========================================================================
   9. TEASER-SECTION (Galerievorschau)
   ========================================================================== */
.teaser-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.teaser-section-title {
  font-size: 28px;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.teaser-section-subtitle {
  font-size: 14px;
  color: var(--color-accent);
  margin-bottom: 32px;
}

.teaser-stream {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.teaser-item {
  width: 100%;
}

.teaser-card {
  width: 100%;
  display: block;
}

.teaser-image-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-organic-3);
  border: 6px solid var(--color-border-frame);
}

.teaser-image-organic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow-soft);
}

.teaser-info {
  padding: 12px 4px 0 4px;
  text-align: left;
}

.teaser-info h3 {
  font-size: 20px;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.teaser-info p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-accent);
}

/* --- Poesie-Blase --- */
.teaser-poetry-bubble {
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-organic-2);
  padding: 45px 25px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(61, 55, 51, 0.03);
  -webkit-transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  outline: 1px solid transparent;
  transition:
    transform var(--transition-slow),
    background-color var(--transition-slow),
    border-radius var(--transition-slow),
    box-shadow var(--transition-slow);
}

.teaser-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-muted);
  margin-bottom: 8px;
  display: block;
}

.teaser-poetry-text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-accent);
  white-space: pre-line;
}

/* Zwei Poesie-Blasen unter den Teasern */
.poetry-duo-stream {
  margin-top: var(--section-padding);
  gap: 64px;
}

/* Galerie & Seminare: quadratische Bildvorschau (Zuschnitt statt Quetschen) */
.galerie-page .teaser-image-container,
.seminare-page .teaser-image-container {
  aspect-ratio: 1 / 1;
}

.galerie-page .teaser-image-organic,
.seminare-page .teaser-image-organic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
}

.galerie-page .teaser-image-organic.loaded,
.seminare-page .teaser-image-organic.loaded {
  min-height: 0;
}

/* ==========================================================================
   10. CTA-BUTTON (Globaler organischer Button)
   ========================================================================== */
.center-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--section-padding);
}

.organic-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-surface);
  background-color: var(--color-dark);
  padding: 16px 32px;
  font-size: 15px;
  border-radius: var(--radius-organic-btn);
  box-shadow: var(--shadow-btn);
  -webkit-transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  outline: 1px solid transparent;
  transition:
    transform 0.3s var(--ease-organic),
    background-color var(--transition-medium),
    border-radius var(--transition-medium),
    box-shadow var(--transition-medium);
}

.organic-btn svg {
  transition: transform var(--transition-medium);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.organic-btn:active {
  transform: scale(0.97);
  background-color: var(--color-accent);
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.main-footer {
  margin-top: 80px;
  padding: var(--section-padding) 0;
  border-top: 1px solid rgba(166, 149, 133, 0.25);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.footer-copyright {
  font-size: 14px;
  color: var(--color-muted);
}

.footer-developed {
  font-size: 14px;
  color: var(--color-muted);
  font-weight: 500;
  text-align: center;
  margin: 5px 0;
}

.footer-developed a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted var(--color-accent);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

@media (hover: hover) {
  .footer-developed a:hover {
    color: var(--color-muted);
    border-bottom-color: var(--color-muted);
  }
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-link {
  font-size: 14px;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* ==========================================================================
   12. BILD-PLACEHOLDER & LADEANIMATION
   ========================================================================== */
.profile-img-organic,
.teaser-image-organic {
  background-color: #e0d7cb;
  animation: pulse-placeholder 1.5s infinite ease-in-out;
  min-height: 250px;
}

.profile-img-organic.loaded,
.teaser-image-organic.loaded {
  animation: none;
  background-color: transparent;
  min-height: 0;
}

@keyframes pulse-placeholder {
  0%   { background-color: #e3d7c4; }
  50%  { background-color: #d6caa1; }
  100% { background-color: #e3d7c4; }
}

/* ==========================================================================
   13. KONTAKT-SEITE
   ========================================================================== */
.contact-organic-section {
  padding: var(--section-padding) 0;
}

.contact-organic-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-organic-text {
  width: 100%;
}

.contact-profile-img-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (min-width: 850px) {
  .contact-profile-img-wrap {
    justify-content: flex-start;
  }
}

.contact-organic-title {
  font-family: var(--font-hand);
  font-size: 38px;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.contact-organic-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-accent);
  font-style: italic;
}

.organic-detail-value:not(.artist-name) {
  font-size: 17px;
  color: var(--color-accent);
  font-weight: 500;
}

/* Die organische Kontakt-Blase */
.contact-organic-card-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.contact-organic-bubble {
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-organic-2);
  padding: 50px 40px;
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  outline: 1px solid transparent;
  transition:
    transform var(--transition-slow),
    background-color var(--transition-slow),
    border-radius var(--transition-slow),
    box-shadow var(--transition-slow);
}

.organic-detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.organic-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-muted);
}

.organic-detail-value.artist-name {
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--color-accent);
}

.organic-detail-link {
  font-size: 18px;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed rgba(166, 149, 133, 0.5);
  padding-bottom: 2px;
  transition:
    color var(--transition-fast),
    border-bottom-color var(--transition-fast);
}

.telegram-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.telegram-link svg {
  transition: transform var(--transition-medium);
}

/* ==========================================================================
   14. QUALIFIKATIONEN-SECTION
   ========================================================================== */
.qualifications-organic-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
}

.qualifications-organic-bubble {
  background-color: var(--color-surface-warm);
  border: none;
  border-radius: var(--radius-organic-2);
  padding: 50px 40px;
  width: 100%;
  max-width: 650px;
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  outline: 1px solid transparent;
  transition:
    transform var(--transition-slow),
    background-color var(--transition-slow),
    border-radius var(--transition-slow),
    box-shadow var(--transition-slow);
}

.qualifications-organic-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-muted);
}

.qualifications-organic-title {
  font-family: var(--font-hand);
  font-size: 38px;
  color: var(--color-accent);
  margin-bottom: 8px;
  text-shadow: var(--shadow-text);
}

.qualifications-placeholder-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-accent);
  font-style: italic;
}

/* ==========================================================================
   15. GALERIE LIVE-FILTER BUTTONS
   ========================================================================== */
.gallery-filter-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin: -10px auto 40px auto;
  max-width: none;
  padding: 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gallery-filter-wrap::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  background-color: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-muted);
  padding: 8px 18px;
  font-family: var(--font-hand);
  font-size: 18px;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: 30px 20px 40px 25px / 20px 30px 25px 35px;
  transition: all 0.3s var(--ease-organic);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  white-space: nowrap;
}

.filter-btn.active {
  background-color: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 4px 10px rgba(61, 55, 51, 0.1);
  border-radius: 20px 35px 25px 40px / 30px 25px 35px 20px;
}

@media (hover: hover) {
  .filter-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 4px 10px rgba(61, 55, 51, 0.1);
    border-radius: 20px 35px 25px 40px / 30px 25px 35px 20px;
  }
}

.filter-btn:active {
  transform: scale(0.96);
}

/* Flüssiger Wechsel beim Filtern */
.teaser-stream .teaser-item {
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.teaser-stream .teaser-item.is-hidden {
  display: none;
}

/* ==========================================================================
   16. FOOTER HOVER (Nur echte Maus)
   ========================================================================== */
@media (hover: hover) {
  .footer-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* ==========================================================================
   17. RESPONSIVE – TABLETS (Ab 600px)
   ========================================================================== */
@media (min-width: 600px) {
  .welcome-title {
    font-size: 42px;
  }

  .section-subtitle {
    font-size: 34px;
  }

  .profile-img-organic {
    max-width: 320px;
  }

  .poetry-duo-stream {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  .poetry-duo-stream .teaser-item {
    width: 100%;
  }

  /* Teaser im 2er-Grid (Startseite; Galerie/Seminare bleiben kompakt bis 849px) */
  .teaser-stream {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .galerie-page .teaser-stream,
  .seminare-page .teaser-stream {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .teaser-item.spacer-top {
    grid-column: span 2;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   18. RESPONSIVE – DESKTOP (Ab 850px)
   ========================================================================== */
@media (min-width: 850px) {
  /* Layout */
  .page-wrapper {
    padding: 0 40px;
  }

  /* Header */
  .main-header {
    padding: 40px 0;
  }

  .logo-wrap img {
    max-width: 85px;
    padding: 8px 14px;
  }

  .brand-name {
    font-size: 26px;
  }

  /* Navigation: Hamburger aus, horizontale Nav ein */
  .menu-toggle,
  .menu-toggle.active {
    display: none;
    position: relative;
    top: auto;
    right: auto;
  }

  .main-nav {
    display: flex !important;
    flex-direction: row;
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    gap: 35px;
    padding: 0;
    transition: none;
    margin-left: auto; /* Pushes navigation to the right */
  }

  .main-nav::before {
    display: none;
  }

  /* Footer nebeneinander ab Desktop */
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .header-lang {
    display: flex !important; /* Show in header on desktop */
    margin-left: 30px;
    margin-right: 0;
    padding: 4px;
    font-size: 13px;
    gap: 4px;
  }

  .header-lang .lang-btn {
    padding: 6px 12px;
  }

  .menu-lang {
    display: none !important; /* Hide in navigation on desktop */
  }

  .nav-link {
    font-family: var(--font-system);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-muted);
    padding: 12px 4px;
    width: auto;
    opacity: 1 !important;
    transform: none !important;
    transition: color var(--transition-fast);
  }

  .nav-link.active {
    color: var(--color-accent);
    border-bottom: none;
  }

  /* Hintergrund-Lichter */
  .organic-bg-shape {
    width: 500px;
    height: 500px;
  }

  .shape-one {
    right: -5%;
    top: -5%;
  }

  .shape-two {
    left: -10%;
    top: 40%;
  }

  /* Welcome */
  .welcome-section {
    padding: 60px 0;
  }

  .detail-section {
    padding-top: 60px;
  }

  .welcome-title {
    font-size: 54px;
  }

  /* Über mich: 2-spaltig */
  .about-container {
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
  }

  .about-image-side {
    flex: 1;
    position: sticky;
    top: 40px;
  }

  .about-text-side {
    flex: 1.3;
  }

  .profile-img-organic {
    max-width: 380px;
    }

  .section-subtitle,
  .blessing-text {
    text-align: left;
  }

  /* Teaser: 3-spaltig */
  .teaser-section {
    padding: 60px 0 100px 0;
  }

  .teaser-section-title {
    font-size: 42px;
  }

  .teaser-stream {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
  }

  .teaser-item {
    width: 31%;
  }

  .galerie-page .teaser-stream,
  .seminare-page .teaser-stream {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .galerie-page .teaser-item,
  .seminare-page .teaser-item {
    width: 100%;
  }

  .teaser-item.spacer-top {
    margin-top: 60px;
    grid-column: auto;
    max-width: none;
  }

  .teaser-image-organic {
    transition: transform 0.6s var(--ease-organic);
  }

  .teaser-poetry-bubble {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition:
      transform var(--transition-slow),
      background-color var(--transition-slow),
      border-radius var(--transition-slow),
      box-shadow var(--transition-slow);
  }
  

  .poetry-duo-stream {
    justify-content: center;
    max-width: none;
    gap: 64px;
  }

  .poetry-duo-stream .teaser-item {
    width: 31%;
    max-width: 380px;
  }

  /* Kontakt: 2-spaltig */
  .contact-organic-container {
    flex-direction: row;
    gap: 80px;
    align-items: center;
    padding: 60px 0;
  }

  .contact-organic-text {
    flex: 1;
  }

  .contact-organic-card-wrap {
    flex: 1;
    justify-content: flex-end;
  }

  .contact-organic-title {
    font-size: 54px;
  }

  .contact-organic-bubble {
    padding: 60px;
  }

  /* Qualifikationen */
  .qualifications-organic-section {
    padding: 60px 0;
  }

  .qualifications-organic-title {
    font-size: 46px;
  }

  .qualifications-organic-bubble {
    padding: 60px;
  }

  /* ==========================================================================
     19. HOVER-EFFEKTE – Nur echte Maus (innerhalb 850px)
     ========================================================================== */
  @media (hover: hover) {
    /* Nav-Punkte */
    .nav-link {
      position: relative;
    }

    .nav-link:hover {
      color: var(--color-accent);
    }

    .nav-link.active::after,
    .nav-link:hover::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      background-color: var(--color-muted);
      border-radius: 50% 40% 60% 45%;
      display: block;
    }

    /* Profilbild verformt sich sanft */
    .profile-img-organic:hover {
      border-radius: 45% 55% 40% 60% / 52% 40% 60% 48%;
    }

    /* Teaser-Bilder zoomen leicht */
    .teaser-card:hover .teaser-image-organic {
      transform: scale(1.04) rotate(0.5deg);
    }

    /* Poesie-Blase bewegt sich */
    .teaser-poetry-bubble:hover {
      transform: scale(1.03) rotate(-0.5deg);
      border-radius: 40% 60% 45% 55% / 55% 45% 50% 45%;
      box-shadow: 0 15px 30px rgba(61, 55, 51, 0.08);
    }
    

    /* CTA-Button */
    .organic-btn:hover {
      background-color: var(--color-accent);
      transform: scale(1.04) translateY(-2px) translateZ(0);
      box-shadow: 0 15px 25px rgba(61, 55, 51, 0.18);
      border-radius: 40px 50px 35px 55px / 45px 40px 55px 40px;
    }
    

    .organic-btn:hover svg {
      transform: translateX(6px) translateZ(0);
    }

    /* Kontakt-Blase */
    .contact-organic-bubble:hover {
      transform: scale(1.025) rotate(0.5deg);
      border-radius: 50% 50% 45% 55% / 45% 55% 40% 60%;
      box-shadow: 0 15px 35px rgba(61, 55, 51, 0.08);
    }
    

    .organic-detail-link:hover {
      color: var(--color-accent);
      border-bottom-color: var(--color-accent);
    }

    .telegram-link:hover svg {
      transform: translate(3px, -1px) rotate(-45deg);
    }

    /* Qualifikationen-Blase */
    .qualifications-organic-bubble:hover {
      transform: scale(1.025) rotate(0.5deg);
      background-color: #eae1d3;
      border-radius: 50% 50% 45% 55% / 45% 55% 40% 60%;
      box-shadow: 0 15px 35px rgba(61, 55, 51, 0.08);
    }
    
  }
}

/* ==========================================================================
   18b. RESPONSIVE – ENGE DESKTOP-NAV (850–1024px)
   ========================================================================== */
@media (min-width: 850px) and (max-width: 1024px) {
  .main-nav {
    gap: 16px;
  }

  .header-lang {
    margin-left: 14px;
    font-size: 12px;
  }

  .header-lang .lang-btn {
    padding: 5px 8px;
  }

  .nav-link {
    font-size: 11px;
    letter-spacing: 0.6px;
    padding: 12px 2px;
  }
}

.detail-title {
  font-size: 42px;
  margin-bottom: 24px;
}

.detail-meta-box {
  background-color: var(--color-surface-warm);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 24px;
  font-size: 15px;
  color: #5c534c;
}

.detail-meta-box > div {
  margin-bottom: 8px;
}

.detail-meta-box > div:last-child {
  margin-bottom: 0;
}

.detail-body-text {
  line-height: 1.7;
  color: #5c534c;
  font-size: 16px;
  white-space: pre-line;
}

.detail-actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.organic-btn-outline {
  background-color: transparent !important;
  border: 2px solid var(--color-dark);
  color: var(--color-dark) !important;
}

/* ==========================================================================
   20. RESPONSIVE – GALERIE & SEMINARE KOMPAKT (Bis 849px)
   ========================================================================== */
@media (max-width: 849px) {
  /* Kompaktes 2-Spalten-Grid bis zur Desktop-Stufe (vermeidet Sprung bei 600px) */
  .galerie-page .teaser-section .teaser-stream,
  .seminare-page .teaser-section .teaser-stream {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 4px;
  }

  .galerie-page .teaser-section .teaser-item,
  .seminare-page .teaser-section .teaser-item {
    width: 100%;
  }

  .galerie-page .teaser-section .teaser-image-container,
  .seminare-page .teaser-section .teaser-image-container {
    border-radius: 16px 24px 18px 28px / 22px 16px 26px 20px;
    border-width: 4px;
  }

  .galerie-page .teaser-section .teaser-info,
  .seminare-page .teaser-section .teaser-info {
    padding: 8px 2px 0 2px;
  }

  .galerie-page .teaser-section .teaser-info h3,
  .seminare-page .teaser-section .teaser-info h3 {
    font-size: 16px;
    margin-bottom: 2px;
    line-height: 1.2;
  }

  .galerie-page .teaser-section .teaser-info p,
  .seminare-page .teaser-section .teaser-info p {
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .galerie-page .teaser-section .teaser-category,
  .galerie-page .teaser-section .organic-btn,
  .seminare-page .teaser-section .teaser-category,
  .seminare-page .teaser-section .organic-btn {
    display: none !important;
  }

  .gallery-filter-wrap {
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 24px;
    padding: 0 8px;
  }

  .filter-btn {
    padding: 6px 14px;
    font-size: 16px;
  }
}

/* ==========================================================================
   20b. RESPONSIVE – MOBIL FEIN (Bis 599px)
   ========================================================================== */
@media (max-width: 599px) {
  /* Kontakt & Qualifikationen: weniger Padding */
  .contact-organic-bubble,
  .qualifications-organic-bubble {
    padding: 36px 24px;
  }

  .contact-organic-title {
    font-size: clamp(28px, 8vw, 38px);
  }

  .qualifications-organic-title {
    font-size: clamp(28px, 8vw, 38px);
  }

  /* Detail-Seiten */
  .detail-section {
    padding-top: 24px !important;
  }

  .detail-title {
    font-size: clamp(26px, 7vw, 42px) !important;
    line-height: 1.2;
    text-align: center;
  }

  .detail-section .about-text-side .welcome-badge {
    display: block;
    text-align: center;
  }

  .detail-meta-box {
    padding: 16px !important;
    font-size: 14px !important;
  }

  .detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-actions .organic-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Login-Formular */
  .login-bubble {
    padding: 32px 20px;
  }

  .login-title {
    font-size: clamp(28px, 8vw, 36px);
  }

  /* Footer-Links umbrechen */
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  /* Hintergrund-Lichter kleiner halten */
  .organic-bg-shape {
    width: 90vw;
    height: 90vw;
  }
}

/* Scroll-Sperre bei offenem Menü – bis Tablet (Hamburger bis 849px) */
@media (max-width: 849px) {
  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

/* ==========================================================================
   21. ADMIN LOGIN
   ========================================================================== */
.login-section {
  padding: var(--section-padding) 0 80px 0;
}

.login-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

.login-text-side {
  text-align: center;
}

.login-title {
  font-size: 36px;
  color: var(--color-accent);
  margin: 12px 0 16px 0;
}

.login-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 520px;
  margin: 0 auto;
}

.login-card-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.login-bubble {
  width: 100%;
  max-width: 520px;
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-organic-2);
  padding: 48px 40px;
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

.login-field {
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
  min-width: 0;
}

.login-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.login-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: 16px 22px 18px 24px / 20px 16px 24px 18px;
  background-color: var(--color-surface);
  color: var(--color-accent);
  font-family: var(--font-system);
  font-size: 15px;
  transition: border-color var(--transition-fast);
}

.login-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.login-submit,
.login-bubble .organic-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.login-submit {
  margin-top: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-hand);
  font-size: 18px;
}

.login-error {
  background-color: #f8ece8;
  color: #8a4b43;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}

@media (min-width: 850px) {
  .login-container {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }

  .login-text-side {
    flex: 1;
    text-align: left;
  }

  .login-intro {
    margin: 0;
  }

  .login-card-wrap {
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
  }

  .login-bubble {
    padding: 52px 48px;
  }

  .login-title {
    font-size: 48px;
  }
}

/* Hover-Animation für den Login-Zurück-Button */
@media (min-width: 850px) and (hover: hover) {
  .login-back-btn:hover svg {
    transform: translateX(-6px) rotate(180deg) !important;
  }
}

/* Styling & Hover-Effekt für den Zurück-Button auf der Login-Seite */
.login-back-btn {
  transition: transform var(--transition-medium), opacity var(--transition-fast), background-color var(--transition-fast) !important;
}

@media (min-width: 850px) and (hover: hover) {
  .login-back-btn:hover {
    opacity: 1 !important;
  }
  .login-back-btn:hover svg {
    transform: translateX(-6px) rotate(180deg) !important;
  }
}

/* ==========================================================================
   22. ADMIN-BEREICH
   ========================================================================== */
/* Organically curved but bounded pixel radii for the admin pages and login forms to prevent overflow while staying hand-drawn/organic */
.admin-page,
.login-section {
  --radius-organic-1: 30px 45px 35px 50px / 40px 30px 50px 35px;
  --radius-organic-2: 40px 60px 45px 55px / 50px 40px 55px 45px;
  --radius-organic-3: 25px 35px 30px 45px / 35px 25px 40px 30px;
  --radius-organic-btn: 50px 35px 55px 40px / 40px 50px 35px 55px;
  --radius-organic-nav: 35% 65% 40% 60% / 50% 40% 60% 50%;
}

.admin-page .login-input,
.login-section .login-input {
  border-radius: 12px 16px 14px 18px / 16px 12px 18px 14px !important;
}

.admin-page .admin-list-thumb {
  border-radius: 12px 16px 14px 18px / 16px 12px 18px 14px !important;
}

.admin-section {
  padding: var(--section-padding) 0 80px 0;
}

.admin-section-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.admin-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-btn-compact {
  padding: 12px 20px !important;
  font-size: 14px !important;
  width: auto !important;
  max-width: none !important;
}

.admin-btn-danger {
  background-color: #8a4b43 !important;
  border: none;
}

.admin-btn-danger:active {
  background-color: #6f3a34 !important;
}

.admin-flash {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.5;
}

.admin-flash--success {
  background-color: #e8f2e8;
  color: #3d5c3d;
}

.admin-flash--error {
  background-color: #f8ece8;
  color: #8a4b43;
}

.admin-empty-state {
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-organic-2);
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-list-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-organic-3);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.admin-list-thumb-wrap {
  width: 100%;
  max-width: 120px;
}

.admin-list-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px 22px 18px 24px / 20px 16px 24px 18px;
  border: 3px solid var(--color-border-frame);
  display: block;
}

.admin-list-content {
  flex: 1;
  min-width: 0;
}

.admin-list-title {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.admin-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--color-muted);
}

.admin-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-inline-form {
  display: inline;
}

.admin-form-bubble {
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-organic-2);
  padding: 32px 24px;
  box-shadow: var(--shadow-strong);
  max-width: 820px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.admin-textarea {
  resize: vertical;
  min-height: 100px;
}

.admin-file-input {
  padding: 10px 12px !important;
}

.admin-current-image {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.admin-dashboard-card {
  width: 100%;
}

.admin-card-title {
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--color-accent);
  margin-bottom: 20px;
  text-align: center;
}

.admin-dashboard-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 700px) {
  .admin-section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .admin-list-item {
    flex-direction: row;
    align-items: center;
  }

  .admin-list-actions {
    margin-left: auto;
    flex-shrink: 0;
  }

  .admin-form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
}

@media (max-width: 599px) {
  .admin-header-actions .organic-btn,
  .admin-list-actions .organic-btn,
  .admin-form-actions .organic-btn {
    width: 100%;
    justify-content: center;
  }

  .admin-inline-form {
    display: block;
    width: 100%;
  }

  .admin-inline-form .organic-btn {
    width: 100%;
  }
}

/* ==========================================================================
   COOKIE-CONSENT-BANNER
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 0 max(var(--page-padding), env(safe-area-inset-right, 0px))
           max(12px, env(safe-area-inset-bottom, 0px))
           max(var(--page-padding), env(safe-area-inset-left, 0px));
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s var(--ease-organic), opacity 0.4s ease;
  pointer-events: none;
}

.cookie-banner-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cookie-banner-content {
  max-width: var(--page-max-width);
  margin: 0 auto 20px;
  background: var(--color-surface);
  border: 1px solid rgba(166, 149, 133, 0.3);
  border-radius: 20px 20px 24px 18px / 18px 22px 20px 24px;
  padding: 24px 28px;
  box-shadow: 0 -4px 30px rgba(112, 86, 67, 0.12), 0 0 0 1px rgba(112, 86, 67, 0.04);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  backdrop-filter: blur(10px);
}

.cookie-banner-main-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.cookie-banner-text {
  flex: 1;
  min-width: 250px;
}

.cookie-banner-title {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--color-accent);
  margin: 0 0 6px;
}

.cookie-banner-desc {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0;
}

.cookie-banner-desc strong {
  color: var(--color-accent);
  font-weight: 600;
}

.cookie-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
}

.cookie-btn-accept {
  white-space: nowrap;
  padding: 12px 28px !important;
  font-size: 0.95rem !important;
}

@media (max-width: 700px) {
  .cookie-banner-content {
    padding: 20px;
    margin-bottom: 0;
  }

  .cookie-banner-main-row {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-btn-accept {
    width: 100%;
    justify-content: center;
  }
}