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 69% 39%;             /* #a8741f Ocker, dunkler (07.10.2026; vorher #d39e46) */
    --secondary-light: 37 62% 48%;
    --secondary-lighter: 37 55% 78%;
    --secondary-dark: 37 70% 32%;
    --secondary-deep: 37 70% 30%;        /* Ocker als Textfarbe auf hellem Grund */
    --cta-band-line: 37 69% 39%;         /* 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: helle Flächen (Nachtrag 18, seit 25.09.2026 fest) ─────
     Marcels Rückmeldung vom 23.09.: die Creme-Flächen wirken altbacken. Tanne und
     Ocker aus dem Logo bleiben, nur die Flächen werden heller: Grund fast weiß,
     Karten weiß, Sektionswechsel in hellem Grau-Beige, Footer in Tanne. Die Werte
     in :root bleiben die Grundlage, die Immobilien-Welt erbt sie. */
  .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: 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. */
.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));
}

/* Auf dem dunklen Footer trägt Ocker in voller Stärke. */
.world-interior .section-footer .text-secondary {
  color: hsl(var(--secondary));
}

/* Abschlussband und Footer sind beide dunkel – eine helle Haarlinie trennt sie. */
.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%);
}

/* Der Interior-Footer ist dunkel, also das negative Logo statt des positiven. */
.footer-logo-dark {
  display: none;
}

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

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

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

/* Interior: EB Garamond wirkt bei gleicher Größe deutlich kleiner als IBM Plex Sans der
   Immobilien-Welt. Die kleinen Überschriften (h2/h3 mit text-xl, h4) bekommen deshalb hier eine
   Stufe mehr (07.10.2026); die Immobilien-Welt bleibt unverändert. */
.world-interior :is(h2, h3).text-xl {
  font-size: 1.5rem;
  line-height: 1.25;
}

.world-interior h4 {
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Slideshow-Punkte im Hero: die Glass-Flow-Regel für Buttons (Schatten, Anheben, Aufhellen) gilt
   hier nicht – der Button ist nur eine unsichtbare Klickfläche um den dünnen Balken. */
.variante-glass-flow button[data-hero-dot],
.variante-glass-flow button[data-hero-dot]:hover {
  box-shadow: none;
  transform: none;
  filter: none;
  overflow: visible;
}

/* Auf Ockerflächen wird `text-secondary` sonst zu Tanne (shared-styles.css) – in der weißen Box der
   Vision-Section (Startseite) trägt die Hervorhebung wieder Ocker. */
section.bg-secondary [data-vision-box] .text-secondary {
  color: hsl(var(--secondary));
}

/* Heroes der Interior-Welt (Startseite, Marken, Über uns, Kontakt): Rahmen als Goldverlauf
   (07.10.2026, Vorbild „Farbwelt und Stil“). Die Immobilien-Welt behält ihren Rahmen.
   Transparenter Rand, Fläche auf padding-box, Verlauf auf border-box – so folgt die Linie
   der Rundung ohne Pseudo-Element. Selektor schlägt die Glass-Flow-Regel für den Rahmen. */
.world-interior .variante-glass-flow div.hero-frame,
.world-interior div.hero-frame {
  border: 1.5px solid transparent;
  background:
    linear-gradient(to bottom right, hsl(40, 5.65%, 95.65%), hsl(40, 15.95%, 93.9%)) padding-box,
    linear-gradient(
      125deg,
      hsl(var(--secondary-lighter) / 0.9) 0%,
      hsl(var(--secondary-light) / 0.75) 22%,
      hsl(var(--secondary-lighter) / 0.45) 55%,
      hsl(var(--secondary-light) / 0.75) 82%,
      hsl(var(--secondary-lighter) / 0.9) 100%
    ) border-box;
}