/* =================================================
   Wurzel-Element mit CSS-Variablen
   ================================================= */
:root {
  /* Farben */
  --farbe-primaer: #EC5859;
  --farbe-hell: #fff;
  --farbe-dunkel: #000;
  --farbe-grau-hell: #f5f5f5;
  --farbe-overlay: rgba(0, 0, 0, 0.85);
  --farbe-btn-hintergrund: rgba(255, 255, 255, 0.95);

  /* Typografie */
  --font-display: 'Roboto Slab', serif;
  --font-standard: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schriftgroesse-gross: 28px;
  --schriftgroesse-card-front: 30px;
  --schriftgroesse-card-back: 19px;
  --schriftgroesse-mittel: 16px;
  --schriftgroesse-Popup: clamp(
    1.25rem,
    calc(1.25rem + (0.01001 * (100vw - 30.0625rem))),
    1.75rem
  );
  --schriftgroesse-klein: 15px;
  --schriftstaerke-xtra-leicht: 200;
  --schriftstaerke-leicht: 300;
  --schriftstaerke-normal: 400;
  --schriftstaerke-medium: 500;
  --schriftstaerke-fett: 600;
  --schriftstaerke-xtra-fett: 700;
  /* h2 bei Brizy mit clamp: 
     ab 481px = 28px, bei 1280px = 30px, dazwischen fluid */
  --brz-heading2fontsize: clamp(
    28px,
    calc(28px + ( (100vw - 481px) * (2) / (1280 - 481) )),
    30px
  );

  /* Abstände & Größen */
  --abstand-xs: 4px;
  --abstand-s: 6px;
  --abstand-m: 12px;
  --abstand-l: 18px;
  --abstand-xl: 64px;
  --abstand-xxl: 40px;
  --groesse-icon-btn: 44px;
  --groesse-close-btn: 36px;

  /* Radien */
  --radius-s: 12px;
  --radius-l: 30px;
  --radius-rund: 50%;

  /* Übergänge */
  --uebergang-langsam: transform 0.6s ease;
  --uebergang-schnell: transform .2s, box-shadow .2s;

  /* Schatten */
  --schatten-1: 0 4px 12px rgba(0,0,0,0.15);
  --schatten-2: 0 8px 20px rgba(0,0,0,0.2);
}

/* =================================================
   Flip Cards Gesamt-CSS für Typisch Banken
   (Container ist .flip-grid)
   ================================================= */

/* 0. Offline-Variable Font @font-face */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  /* alle Schriftschnitte von Thin(100) bis Black(900) */
  font-weight: 100 900;
  /* Variable-Font-Format */
  src: url('fonts/RobotoSlab-VariableFont_wght.ttf') format('truetype-variations');
  /* Fallback für Browser ohne Variable-Font-Support */
  unicode-range: U+000-5FF; /* Basic Latin + Latin-1 */
}

/* 1. Grid-Container */
.flip-grid {
  display: grid;
  gap: var(--abstand-l);
  padding: 0;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .flip-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 601px) and (max-width: 1120px) {
  .flip-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .flip-grid { grid-template-columns: repeat(3,1fr) !important; }
}
@media (min-width: 1281px) {
  .flip-grid { grid-template-columns: repeat(3,1fr) !important; }
}

/* 2. Flip-Card Grundstruktur */
.flip-card {
  position: relative;
  width: 100%;
  padding-top: 100%;        /* 1:1 Aspect Ratio */
  perspective: 1000px;
  box-sizing: border-box;
}
.flip-card-inner {
  position: absolute;
  inset: 0;
  transition: var(--uebergang-langsam);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card.active .flip-card-inner {
  transform: rotateY(180deg);
}

/* 3. Vorder- & Rückseite */
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0;
  overflow: hidden;
}
.flip-card-front {
  background: var(--farbe-hell);
  z-index: 2;
}
.flip-card-back {
  background: var(--farbe-primaer);
  color: var(--farbe-hell);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--abstand-xl);
  box-sizing: border-box;
  z-index: 3;
}

/* 4. Front-Bild & SVG-Overlay */
.flip-card-front .front-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.typisch-banken-on-top {
  position: absolute;
  top: 30%;
  left: var(--abstand-m);
  width: calc(100% - var(--abstand-xl));
  max-height: 30%;
  object-fit: contain;
  z-index: 4;
  pointer-events: none;
}

/* 5. Front-Textcontainer (flexible: centered by default, switches for multi-line) */
.flip-card-front .card-textbox {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translateX(-50%);
  width: min(78%, calc(100% - 2 * var(--abstand-m)));
  max-width: 78%;
  z-index: 3;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  display: block;
}

/* Each line is sized to its text. For multi-line they will stack; for single-line they remain inline */
.flip-card-front .card-textbox .card-line {
  display: inline-block;
  background: var(--farbe-hell);
  padding: 0 var(--abstand-s);
  margin: 0 var(--abstand-xs) var(--abstand-xs) 0;
  font-size: var(--schriftgroesse-gross);
  font-weight: var(--schriftstaerke-leicht);
  line-height: 1.2;
  color: var(--farbe-dunkel);
  break-inside: avoid;
}
/* Single-line cards: center the entire textbox & center the lines */
.flip-card.single-line .card-textbox {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.flip-card.single-line .card-line {
  display: inline-block;
}

/* Multi-line cards: left-align and allow lines to stack; each .card-line keeps width-fit */
.flip-card.multi-line .card-textbox {
  left: 22% !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  text-align: left;
  display: block;
}
.flip-card.multi-line .card-line {
  display: block;
  width: fit-content;
  margin-bottom: var(--abstand-xs);
}

/* Make sure the icon fallback button is not filled with white and behaves like a real button */
.flip-card-back .popup-btn--icon {
  background: none; /* keep transparent */
  box-shadow: var(--schatten-1);
}

/* 6. Rückseiten-Text & Button */
.flip-card-back .back-text {
  margin: 0 0 var(--abstand-xl);
  font-size: var(--schriftgroesse-card-back);
  line-height: 1.4;
  font-weight: var(--schriftstaerke-medium);
  text-align: left;
}
/* Text-Button */
.flip-card-back .popup-btn {
  background: var(--farbe-btn-hintergrund);
  color: var(--farbe-primaer);
  border: none;
  padding: var(--abstand-m) 28px;
  border-radius: var(--radius-l);
  font-size: var(--schriftgroesse-klein);
  font-weight: var(--schriftstaerke-xtra-fett);
  cursor: pointer;
  box-shadow: var(--schatten-1);
  transition: var(--uebergang-schnell);
}
.flip-card-back .popup-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-2);
}
/* Icon-Button (ab Werk gesetzt, nicht erst beim Hover) */
.flip-card-back .popup-btn--icon {
  background: none;
  box-shadow: var(--schatten-1);
  padding: 0;
  width: var(--groesse-icon-btn);
  height: var(--groesse-icon-btn);
  border-radius: var(--radius-rund);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--uebergang-schnell);
}
.flip-card-back .popup-btn--icon:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-2);
}
.flip-card-back .popup-btn--icon img {
  width: var(--abstand-xl);
  height: var(--abstand-xl);
}

/* 7. Popup Modal */
.flip-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--farbe-overlay);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.flip-popup.active {
  display: flex;
}
.popup-content {
  background: var(--farbe-hell);
  padding: var(--abstand-xxl);
  border-radius: var(--radius-s);
  max-width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

@media (min-width: 1281px) {
  .popup-content {
    max-width: 1280px;
  }
}
.popup-close {
  position: absolute;
  top: 3%;
  right: 2%;
  width: var(--groesse-close-btn);
  height: var(--groesse-close-btn);
  padding: 0;
  border: none;
  background: var(--farbe-primaer);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--groesse-close-btn) * 0.5);
  line-height: 1;
  text-align: center;
  color: var(--farbe-hell);
  border-radius: var(--radius-rund);
  cursor: pointer !important;
  transition: transform .2s, background-color .2s, color .2s;
  will-change: transform, background-color, color;
}
.popup-close .close-icon {
  display: inline-block;
  transition: transform .2s;
  transform-origin: center center;
}
.popup-close:hover {
  background: var(--farbe-primaer);
  color: var(--farbe-hell);
}
/* .popup-close:hover .close-icon {
  transform: rotate(90deg);
} */
.popup-body {
  margin-top: 20px;
  font-size: var(--schriftgroesse-Popup);
  line-height: 1.7;
}
/* Ensure close-icon remains perfectly centered and rotates around its center */
.popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.popup-close .close-icon {
  display: inline-block;
  transform-origin: center center;
}

/* Minor accessibility: prevent body scroll when popup open (reinforce) */
.flip-popup.active { overflow: auto; }

/* ------------------------------------------------
   8. Spezifische Fonts pro Text-Bereich
   ------------------------------------------------ */
/* Titel (mehrzeilig) und Kurztext-Teaser */
.flip-card-front .card-textbox .card-line,
.flip-card-back .back-text {
  font-family: var(--font-display);
}
/* Popup-Details: system-sans oder Theme-Default */
.popup-body {
  font-family: var(--font-standard);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner,
  .popup-content,
  .popup-btn,
  .popup-close {
    transition: none !important;
  }
}

/* Brizy specific */
.brz-container h2,
.brz-container .brz-heading2,
h2.brz-heading2 {
  font-size: var(--brz-heading2fontsize) !important;
  line-height: 1.2 !important;
}

/* ======= Compatibility helpers: single-line / multi-line behavior ======= */





/* End of file */