b2in/resources/css/web/theme-b2in.css

@import "tailwindcss";

/* B2in – zwei Farbwelten auf einem Themensystem (Arbeitsplan September 2026, Punkt 1.1).

   Standard ist die Interior-Welt: Tanne, Creme, Sand, Ocker, Clay, Anthrazit.
   Die Immobilien-Welt behält das bestehende Blau; sie greift, sobald das Layout
   `world-immobilien` an den Body setzt (siehe b2in_world() in app/helpers.php).
   Welche Logo-Variante dazu erscheint, entscheidet ThemeHelper::getLogoPath().

   Alle Werte sind HSL-Tripel ohne Funktionsaufruf, damit `hsl(var(--x) / 0.5)`
   in shared-styles.css und in den Tailwind-Utilities funktioniert. */

@layer base {
  :root {
    /* ── Interior-Welt ─────────────────────────────────────────────── */

    /* Grundflächen */
    --background: 38 33% 95%;            /* #f7f4ef Creme – Hintergrund */
    --foreground: 26 8% 16%;             /* #2d2926 Anthrazit – Text */

    /* Karten eine Stufe heller als Creme, damit sie sich vom Grund abheben */
    --card: 40 43% 98%;                  /* #fbf9f5 */
    --card-foreground: 26 8% 16%;
    --popover: 40 43% 98%;
    --popover-foreground: 26 8% 16%;

    /* Hauptton dunkel: Wortmarke, Buttons, dunkle Sektionen */
    --primary: 175 16% 15%;              /* #202c2b Tanne */
    --primary-light: 175 13% 22%;
    --primary-lighter: 175 8% 82%;
    --primary-dark: 175 18% 11%;
    --primary-foreground: 38 33% 95%;    /* Creme auf Tanne */

    /* Akzent: Logo-Bogen, Hervorhebungen, Icons, aktive Navigation */
    --secondary: 37 62% 55%;             /* #d39e46 Ocker */
    --secondary-light: 37 66% 63%;
    --secondary-lighter: 37 60% 80%;
    --secondary-dark: 37 55% 45%;
    --secondary-deep: 37 50% 36%;        /* Ocker als Textfarbe auf hellem Grund */
    --cta-band-line: 37 62% 55%;         /* Haarlinie am Abschlussband in Ocker */
    --secondary-foreground: 38 33% 95%;

    /* Sekundärton für Produkte und ruhige Beschriftungen */
    --clay: 24 15% 57%;                  /* #a38f82 Clay */

    /* Ruhige Flächen und Fließtext in gedämpfter Farbe */
    --muted: 30 24% 90%;                 /* helles Sand */
    --muted-foreground: 24 12% 40%;      /* abgedunkelter Clay – lesbar auf Creme */

    /* Sektionswechsel: Sand als Fläche */
    --accent: 28 25% 80%;                /* #d9cbbf Sand */
    --accent-dark: 28 25% 74%;
    --accent-foreground: 26 8% 16%;

    /* Dunkle Sektionen */
    --dark-bg: 175 16% 15%;              /* Tanne */
    --dark-text: 38 33% 95%;
    --dark-muted: 38 20% 76%;

    /* Footer: Sand mit Tanne (laut Farbwelt „Sand – Flächen, Footer“) */
    --footer-bg: 28 25% 80%;
    --footer-fg: 175 16% 15%;
    --footer-muted: 24 12% 40%;
    --footer-line: 175 16% 15%;

    /* Abschlussband: Ton in Ton von dunklem Tannengrün in ein helleres, kein Ocker im
       Verlauf – Grün zu Ocker wirkte unharmonisch. Ocker bleibt Akzent für Wörter und Linien. */
    --cta-band-end: 175 12% 26%;

    /* Interaktion */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 28 20% 84%;
    --input: 40 40% 98%;
    --ring: 175 16% 15%;

    --radius: 0.75rem;

    /* Bühne des Hero-Bereichs */
    --hero-container: 30 28% 89%;
    --hero-container-dark: 28 25% 83%;
    --hero-container-light: 36 32% 93%;

    /* Schatten */
    --shadow-warm: 0 10px 30px -15px hsl(var(--foreground) / 0.1);
    --shadow-card: 0 4px 20px -8px hsl(var(--foreground) / 0.08);
    --shadow-elevated: 0 20px 40px -20px hsl(var(--foreground) / 0.15);
    --shadow-accent-glow: 0 0 30px hsl(var(--secondary) / 0.3);

    /* Übergänge */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Schriften: Inter für Fließtext, eine Serife für Überschriften – der Ton der
       Shop-Entwürfe. EB Garamond liegt bereits lokal vor (public/fonts/eb-garamond). */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-secondary: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
  }

  /* ── Immobilien-Welt: das bisherige Blau ───────────────────────── */
  .world-immobilien {
    --background: 32 20% 97%;            /* #f5f4f2 helles Beige */
    --foreground: 20 14% 16%;            /* #2a2a2a */

    --card: 0 25% 96%;
    --card-foreground: 20 14% 16%;
    --popover: 0 25% 96%;
    --popover-foreground: 20 14% 16%;

    --primary: 209 32% 25%;              /* #2b3f51 Anthracite */
    --primary-light: 209 32% 35%;
    --primary-lighter: 209 32% 85%;
    --primary-dark: 209 32% 20%;
    --primary-foreground: 0 25% 96%;

    --secondary: 199 74% 49%;            /* #20a0da Dynamic Blue */
    --secondary-light: 199 74% 56%;
    --secondary-lighter: 199 74% 75%;
    --secondary-dark: 199 74% 42%;
    --secondary-deep: 199 74% 36%;
    --secondary-foreground: 0 25% 96%;

    --clay: 199 50% 35%;

    --muted: 0 0% 92%;
    --muted-foreground: 199 50% 35%;     /* #4a8bb5 */

    --accent: 210 0% 90%;
    --accent-dark: 210 0% 85%;
    --accent-foreground: 20 14% 16%;

    --dark-bg: 209 32% 25%;
    --dark-text: 0 0% 100%;
    --dark-muted: 0 0% 80%;

    --footer-bg: 209 32% 25%;
    --footer-fg: 0 0% 100%;
    --footer-muted: 0 0% 80%;
    --footer-line: 0 0% 80%;

    --cta-band-end: 199 74% 42%;

    --border: 0 0% 80%;
    --input: 0 0% 92%;
    --ring: 20 14% 16%;

    --hero-container: 0 0% 93%;
    --hero-container-dark: 0 0% 85%;
    --hero-container-light: 0 0% 95%;

    --font-secondary: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
  }

  /* ── Interior, Variante „Modern“ (Nachtrag 18) ──────────────────────
     Marcels Rückmeldung vom 23.09.: die Creme-Flächen wirken altbacken. Diese
     Variante lässt Tanne und Ocker aus dem Logo unangetastet und hellt nur die
     Flächen auf: Grund fast weiß, Karten weiß, Sektionswechsel in hellem Grau-
     Beige, Footer in Tanne. Aktiv, sobald der Farb-Schalter (palette-switch)
     `palette-modern` an <html> setzt; die Wahl liegt im localStorage. */
  .palette-modern .world-interior {
    --background: 40 25% 98%;            /* #fbfaf8 fast weiß, leicht warm */
    --card: 0 0% 100%;                   /* Karten reinweiß */
    --popover: 0 0% 100%;

    --muted: 40 12% 94%;                 /* #f2f0ed */
    --muted-foreground: 24 8% 38%;

    --accent: 36 14% 93%;                /* #efece7 Sektionswechsel, klar statt Sand */
    --accent-dark: 36 14% 88%;

    --border: 36 12% 88%;                /* #e6e2dc */
    --input: 0 0% 100%;

    --hero-container: 40 14% 95%;
    --hero-container-dark: 40 12% 90%;
    --hero-container-light: 40 25% 98%;

    /* Footer dunkel in Tanne – gibt der hellen Seite unten einen klaren Abschluss */
    --footer-bg: 175 16% 15%;
    --footer-fg: 38 33% 95%;
    --footer-muted: 38 20% 76%;
    --footer-line: 38 20% 76%;

    /* Karten sind jetzt weiß auf fast weiß: etwas mehr Schatten, damit sie sich lösen */
    --shadow-card: 0 6px 24px -10px hsl(var(--foreground) / 0.14);
    --shadow-elevated: 0 24px 48px -20px hsl(var(--foreground) / 0.2);
  }

  /* ── Interior, Entwurf „Greige“ (Nachtrag 19, Briefing Marcel 24.09.) ─────
     Heller, leicht kühler Grundton (Greige statt Creme), deutlich präsenteres
     Tannengrün, Gold nur als feine Linie. Liegt als Klasse am <body> der
     Entwurfsseite /entwurf – nicht am <html> wie der Browser-Schalter, damit
     sich beide nicht überlagern. */
  .world-interior.palette-greige {
    --background: 45 14% 93%;            /* #f0eeeb Greige, Off-White */
    --foreground: 166 25% 13%;           /* Tannengrau für Text */

    --card: 40 20% 97%;                  /* #f8f7f4 – hell, aber kein steriles Weiß */
    --card-foreground: 166 25% 13%;
    --popover: 40 20% 97%;
    --popover-foreground: 166 25% 13%;

    --primary: 165 44% 14%;              /* #14342c Tannengrün, klar und dunkel */
    --primary-light: 165 32% 22%;
    --primary-lighter: 165 12% 82%;
    --primary-dark: 165 50% 10%;
    --primary-foreground: 45 20% 95%;

    --secondary: 38 45% 46%;             /* #aa8341 gedecktes Gold */
    --secondary-light: 38 45% 56%;
    --secondary-lighter: 40 40% 80%;
    --secondary-dark: 38 48% 38%;
    --secondary-deep: 38 55% 34%;        /* Gold als Textfarbe auf hellem Grund */
    --cta-band-line: 38 45% 46%;
    --secondary-foreground: 45 20% 95%;

    --clay: 30 8% 50%;

    --muted: 45 12% 90%;
    --muted-foreground: 160 8% 36%;

    --accent: 45 12% 89%;                /* #e8e6e0 Sektionswechsel */
    --accent-dark: 45 12% 84%;
    --accent-foreground: 166 25% 13%;

    --dark-bg: 165 44% 14%;
    --dark-text: 45 20% 95%;
    --dark-muted: 45 15% 78%;

    /* Footer in Tannengrün, Haarlinie in Gold */
    --footer-bg: 165 44% 14%;
    --footer-fg: 45 20% 95%;
    --footer-muted: 45 15% 78%;
    --footer-line: 38 45% 46%;

    --cta-band-end: 165 30% 22%;

    --border: 40 10% 84%;
    --input: 40 20% 98%;
    --ring: 165 44% 14%;

    --hero-container: 40 20% 97%;
    --hero-container-dark: 45 12% 90%;
    --hero-container-light: 40 25% 98%;

    --shadow-card: 0 6px 24px -10px hsl(var(--foreground) / 0.14);
    --shadow-elevated: 0 30px 60px -28px hsl(var(--primary) / 0.35);
  }
}

/* Interior: Ocker ist Akzent, kein Flächenton unter Text – Creme auf Ocker erreicht
   keinen ausreichenden Kontrast. Der zweite Hero-Button wird deshalb zur Kontur in
   Tanne, und Ocker-Text auf Sand (Footer) nutzt die tiefe Stufe. */
.world-interior .btn-secondary-accent {
  background: transparent !important;
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.55);
  box-shadow: none;
}

.world-interior .btn-secondary-accent:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.world-interior .section-footer .text-secondary {
  color: hsl(var(--secondary-deep));
}

/* Variante „Modern“: auf dem dunklen Footer trägt Ocker in voller Stärke. */
.palette-modern .world-interior .section-footer .text-secondary {
  color: hsl(var(--secondary));
}

/* Variante „Modern“: Abschlussband und Footer sind beide dunkel – eine helle Haarlinie trennt sie. */
.palette-modern .world-interior .section-footer {
  border-top: 1px solid hsl(var(--footer-muted) / 0.35);
}

/* Der schwebende Termin-Button liegt über Bildern und weißen Karten: er bekommt eine
   Fläche in Kartenfarbe, damit die Kontur nicht im Hintergrund verschwindet. */
.world-interior .appointment-toggle.btn-secondary-accent {
  background: hsl(var(--card)) !important;
}

.world-interior .appointment-toggle.btn-secondary-accent:hover {
  background: hsl(var(--primary)) !important;
}

/* Cookie-Manager (acme/cookie-consent) in der Interior-Welt: die Paketfarben aus
   config/cookie-consent.php sind das Blau der Immobilien-Welt. Hier folgt der schwebende
   Button dem Akzent-Button der Seite (Tanne, Hover heller), Icon, Schalter und Link-Hover
   tragen Ocker, „Speichern“ liegt in Tanne. Die Immobilien-Welt behält ihr Blau. */
.world-interior .cookie-consent-wrapper {
  --cc-primary: hsl(var(--secondary));
  --cc-primary-hover: hsl(var(--secondary-dark));
  --cc-save: hsl(var(--primary));
  --cc-save-hover: hsl(var(--primary-light));
  --cc-button-bg: hsl(var(--primary));
  --cc-button-hover: hsl(var(--primary-light));
}

.world-interior .cookie-consent-wrapper .cc-floating-btn {
  --tw-ring-color: hsl(var(--secondary)) !important;
  color: hsl(var(--primary-foreground));
  background: linear-gradient(145deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
}

.world-interior .cookie-consent-wrapper .cc-floating-btn:hover {
  background: linear-gradient(145deg, hsl(var(--primary-light)) 0%, hsl(var(--primary)) 100%);
}

/* Variante „Modern“: der Footer ist dunkel, also das negative Logo statt des positiven. */
.footer-logo-dark {
  display: none;
}

.palette-modern .world-interior .footer-logo-light {
  display: none;
}

.palette-modern .world-interior .footer-logo-dark {
  display: block;
}

@import "./shared-styles.css";

/* ── Entwurf „Greige“: Footer dunkel mit Goldlinie und negativem Logo ─────── */
.world-interior.palette-greige .section-footer {
  border-top: 1px solid hsl(var(--secondary) / 0.6);
}

.world-interior.palette-greige .section-footer .text-secondary {
  color: hsl(var(--secondary));
}

.world-interior.palette-greige .footer-logo-light {
  display: none;
}

.world-interior.palette-greige .footer-logo-dark {
  display: block;
}

/* ── Hero des Entwurfs: Rahmen mit Goldkante, grüne Flanken, Slider ────────
   Goldkanten als Verlaufs-Border: transparenter Rand, Fläche auf padding-box,
   Goldverlauf auf border-box. Kein Pseudo-Rand mit Maske mehr – der ließ an
   der gerundeten Kante eine helle Linie durchscheinen. Die grünen Flanken sind
   Inline-SVGs (components/web/hero-flank-*), skaliert über die Rahmenhöhe. */
.hero-draft .hero-frame {
  border: 1.5px solid transparent;
  background:
    linear-gradient(hsl(var(--hero-container)), hsl(var(--hero-container))) padding-box,
    linear-gradient(
      125deg,
      hsl(var(--secondary-light)) 0%,
      hsl(var(--secondary)) 28%,
      hsl(var(--secondary) / 0.35) 62%,
      hsl(var(--secondary-light)) 100%
    ) border-box;
  box-shadow: var(--shadow-elevated);
  isolation: isolate;
}

.hero-draft .hero-flank {
  position: absolute;
  z-index: 0;
  width: auto;
}

.hero-draft .hero-flank-right {
  top: 0;
  right: 0;
  height: 100%;
}

.hero-draft .hero-flank-left {
  left: 0;
  bottom: 0;
  height: 46%;
}

.hero-draft .hero-image {
  position: relative;
  z-index: 1;
}

/* Goldkante um das Bild, gleiche Technik wie am Rahmen */
.hero-draft .hero-image-frame {
  border: 1.5px solid transparent;
  border-radius: 1.25rem;
  background:
    linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
    linear-gradient(
      135deg,
      hsl(var(--secondary-light)) 0%,
      hsl(var(--secondary)) 40%,
      hsl(var(--secondary) / 0.4) 100%
    ) border-box;
  box-shadow: var(--shadow-elevated);
}

.hero-draft .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.hero-draft .hero-eyebrow::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: hsl(var(--secondary));
}

.hero-draft .hero-title {
  font-family: var(--font-secondary);
  font-size: clamp(2rem, 3.1vw, 3.3rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: hsl(var(--primary));
}

.hero-draft .hero-title em {
  font-style: normal;
  color: hsl(var(--secondary-deep));
}

/* Button: Goldrand rundum, unten kräftiger, Pfeil in Gold */
.hero-draft .btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border-radius: 0.75rem;
  font-weight: 500;
  color: hsl(var(--primary-foreground));
  background: linear-gradient(145deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
  border: 1px solid hsl(var(--secondary));
  border-bottom-width: 3px;
  box-shadow: 0 14px 30px -14px hsl(var(--primary) / 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-draft .btn-hero svg {
  color: hsl(var(--secondary-light));
}

.hero-draft .btn-hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -14px hsl(var(--primary) / 0.7);
}

.hero-draft .hero-slide {
  transition: opacity 1.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .hero-draft .hero-slide {
    transition: none;
  }
}