/* Container mit 3D-Perspektive */
.flip-card {
    background-color: transparent;
    /*position:relative;*/
    aspect-ratio: 1 / 1;
    width: 100%;
    /*height: 300px;*/
    min-width:300px;
    min-height:300px;
    /*padding-bottom:100%;*/ /* gewährleistet quadratisches Format */
    perspective: 1000px; /* Erzeugt den 3D-Raum */
    transform-style: preserve-3d;
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Innerer Container, der beide Seiten enthält */
  .flip-card-inner {
    position: relative;
    text-align:center;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; /* Damit alle Kinder in 3D angezeigt werden */
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Bei Hover wird die Karte um 180° auf der Y-Achse gedreht */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(-180deg);
  }
  
  /* Vorder- und Rückseiten */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius:25px;
    overflow: hidden;
    /* Verhindert, dass beim Drehen die Rückseite sichtbar wird */
    backface-visibility: hidden;
  }
  
  /* Hintergrundebene (Platzhalter für Farbe/Bild) */
  .flip-card-front .background,
  .flip-card-back .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Beispiel: Hintergrundfarbe, kann auch ein Bild sein */
    background-color: #ccc;
    z-index: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto; /* Bild wird auf die Breite skaliert */
  }
  
  /* Textebene – wird in Z-Richtung vorgerückt */
  .flip-card-front .text,
  .flip-card-back .text {
    position: relative;
    z-index: 2; /* Stellt sicher, dass der Text über dem Hintergrund liegt */
    transform: translateZ(30px);
    /* Optional: für besseren 3D-Effekt kann auch ein leichter Textschatten helfen */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  
  /* Rückseite: Wird zusätzlich um 180° gedreht, damit sie in der Normalansicht nicht sichtbar ist */
  .flip-card-back {
    transform: rotateY(180deg);
  }
  
  
  /* Beispielweise könnte der Text bei Hover leicht ausgeblendet oder verändert werden */
  .flip-card:hover .flip-card-front .text {
    /*opacity: 0;*/  /* Der Text auf der Vorderseite verschwindet ggf. später als die Drehung beginnt */
    transition: opacity 0.6s ease-out 0.3s;
  }
  
  .flip-card:hover .flip-card-back .text {
    opacity: 1;  /* Der Text auf der Rückseite erscheint ggf. mit Verzögerung */
  }
  
  .flip-card-container {
    display: flex;
    justify-content: space-around; /* Oder z. B. space-between */
    gap: 20px; /* Optional, um Abstände zu definieren */
  }
  

  .flip-card.blur-enabled .background {
    /* Wende den Blur-Effekt auf die Hintergrundebene an */
    filter: blur(1px)  brightness(0.9);
    background-color: rgba(0, 73, 153, 0.2); /* bläuliche Färbung mit Transparenz */
    backdrop-filter: blur(2px) brightness(0.9); /* leichtes verschwimmen und Abdunkeln */
    -webkit-backdrop-filter: blur(2px) brightness(0.9); /* für Safari */
  }

  /* Text zentrieren */
  .flip-card .text {
    /*display: flex;*/               /* Aktiviert Flexbox */
    justify-content: center;     /* Horizontale Zentrierung */
    align-items: center;         /* Vertikale Zentrierung */
    text-align: center;          /* Textzentrierung innerhalb der Box */
    color: #fff !important;    /* Weißer Text */
    /*background-color: rgba(0, 0, 0, 0.5);*/  /* Mattierter, halbtransparenter Hintergrund */
    padding: 15px;               /* Optional: Innenabstand */
    box-sizing: border-box;      /* Damit Padding zur Gesamtbreite dazu gerechnet wird */
  }

  /* Text der H3 in der Flipcard einfärben in weiß und groß schreiben */
  .flip-card .flip-card-inner .text h1,
  .flip-card .flip-card-inner .text h2,
  .flip-card .flip-card-inner .text h3,
  .flip-card .flip-card-inner .text h4,
  .flip-card .flip-card-inner .text h5,
  .flip-card .flip-card-inner .text h6,
  .flip-card .flip-card-inner .text strong,
  .flip-card .flip-card-inner .text p,
  .flip-card .flip-card-inner .text {
    color: #fff !important;
  }

  /* Gemeinsames Regelwerk für Flip‑Cards */
  /* Fließtext innerhalb der Karten */
  .flip-card .flip-card-inner .text {
    /* Schriftgröße passt sich zwischen 1.2rem und 42px an, je nach Viewport */
    font-size: clamp(1.2rem, 4vw, 42px);
    /* Zeilenhöhe analog skalierend zwischen 1.5rem und 56px */
    line-height: clamp(1.5rem, 4vw, 56px);
    /* Schriftart festlegen */
    font-family: 'cormorant garamond', Helvetica, Arial, sans-serif;
  }
  
  /* Einheitliches Verhalten für alle Überschriften h1–h6 */
  .flip-card .flip-card-inner .text h1 {
    line-height: 1.1;
    margin-top: 0.2em;
  }
  .flip-card .flip-card-inner .text h2 {
    line-height: 1.1;
    margin-top: 0.2em;
  }
  .flip-card .flip-card-inner .text h3 {
    line-height: 1.1;
    margin-top: 0.2em;
  }
  .flip-card .flip-card-inner .text h4 {
    line-height: 1.1;
    margin-top: 0.2em;
  }
  .flip-card .flip-card-inner .text h5 {
    line-height: 1.1;
    margin-top: 0.2em;
  }
  .flip-card .flip-card-inner .text h6 {
    line-height: 1.1;
    margin-top: 0.2em;
  }
  /* Einheitliches Clamp‑Gerüst für Überschriften */
  .flip-card .flip-card-inner .text h1 {
    font-size: clamp(var(--h1-min), var(--h1-vw), var(--h1-max));
  }
  .flip-card .flip-card-inner .text h2 {
    font-size: clamp(var(--h2-min), var(--h2-vw), var(--h2-max));
  }
  .flip-card .flip-card-inner .text h3 {
    font-size: clamp(var(--h3-min), var(--h3-vw), var(--h3-max));
  }
  .flip-card .flip-card-inner .text h4 {
    font-size: clamp(var(--h4-min), var(--h4-vw), var(--h4-max));
  }
  .flip-card .flip-card-inner .text h5 {
    font-size: clamp(var(--h5-min), var(--h5-vw), var(--h5-max));
  }
  .flip-card .flip-card-inner .text h6 {
    font-size: clamp(var(--h6-min), var(--h6-vw), var(--h6-max));
  }
  /* Gemeinsames Clamp-Gerüst für Fließtext */
  .flip-card .flip-card-inner .text {
    /* Schriftgröße skaliert zwischen --text-min und --text-max */
    font-size: clamp(var(--text-min), var(--text-vw), var(--text-max));
    /* Zeilenhöhe skaliert zwischen --lh-min und --lh-max */
    line-height: clamp(var(--lh-min), var(--lh-vw), var(--lh-max));
  }

/* Schriftarten in den verschiedenen Größen anpassen */
  /* 1/1 Rahmen av_one_full */
  /* 4/5 Rahmen av_four_fifth */
  /* 3/4 Rahmen av_three_fourth */
  /* 2/3 Rahmen av_two_third */
  /* 3/5 Rahmen av_three_fifth */
  /* 1/2 Rahmen av_one_half */
  /* 2/5‑Rahmen .av_two_fifth — erst Überschriften, dann Fließtext */
  .av_one_full,
  .av_four_fifth,
  .av_three_fourth,
  .av_two_third,
  .av_three_fifth,
  .av_one_half,
  .av_two_fifth {
    /* Überschriften etwas größer als bei 1/3 */
    --h1-min: 100px;  --h1-vw:  9vw;  --h1-max: 110px;
    --h2-min:  98px;  --h2-vw:  8vw;  --h2-max: 106px;
    --h3-min:  96px;  --h3-vw:  7vw;  --h3-max: 102px;
    --h4-min:  94px;  --h4-vw:  6vw;  --h4-max:  98px;
    --h5-min:  92px;  --h5-vw:  5vw;  --h5-max:  94px;
    --h6-min:  90px;  --h6-vw:  4vw;  --h6-max:  90px;
  
    /* Fließtext etwas üppiger skaliert */
    --text-min: 1.3rem;
    --text-vw:  5vw;
    --text-max: 48px;
  
    --lh-min: 1.6rem;
    --lh-vw:  5vw;
    --lh-max: 60px;
  }

  /* 1/3 Rahmen av_one_third, erst Überschriften, dann die Texte */
  .av_one_third {
    --h1-min: 90px;  --h1-vw:  8vw;  --h1-max: 100px;
    --h2-min: 88px;  --h2-vw:  7vw;  --h2-max:  96px;
    --h3-min: 86px;  --h3-vw:  6vw;  --h3-max:  92px;
    --h4-min: 84px;  --h4-vw:  5vw;  --h4-max:  88px;
    --h5-min: 82px;  --h5-vw:  4vw;  --h5-max:  84px;
    --h6-min: 80px;  --h6-vw:  3vw;  --h6-max:  80px;
  }
    /* Deutlich kleinere Fließtext‑Skalierung für 1/3 und 1/4 und 1/5 */
  .av_one_third,
  .av_one_fourth,
  .av_one_fifth {
    --text-min: 0.7rem;    /* deutlich unter 0.9rem */
    --text-vw:  2vw;       /* reduziert gegenüber 2.5vw */
    --text-max: 24px;      /* statt 28px */
  
    --lh-min: 1rem;        /* statt 1.2rem */
    --lh-vw: 2vw;          /* statt 2.5vw */
    --lh-max: 28px;        /* statt 36px */
  }
  /* 1/4 Rahmen av_one_fourth, nur die Überschriften, die Texte sind oben schon definiert für 1/3, 1/4 und 1/5 gleich groß */
  /* 1/5 Rahmen av_one_fifth */
  .av_one_fourth, .av_one_fifth {
    --h1-min: 36px;   --h1-vw: 2vw;    --h1-max: 36px;
    --h2-min: 34px;   --h2-vw: 1.75vw; --h2-max: 34px;
    --h3-min: 32px;   --h3-vw: 1.5vw;  --h3-max: 32px;
    --h4-min: 30px;   --h4-vw: 1.25vw; --h4-max: 30px;
    --h5-min: 28px;   --h5-vw: 1vw;    --h5-max: 28px;
    --h6-min: 26px;   --h6-vw: 0.75vw; --h6-max: 26px;
  }
  
  /* Floaten des Texts verhindern, die sollen untereinander kommen nicht nebeneinander: */
  .text h3,
  .text p {
  display: block; /* Erzwingt Block-Verhalten */
  float: none; /* Deaktiviert Floats */
  }

  /* Flip Cards sollen auf der Rückseite eine blaue Schimerfolie erhalten */
  /* 2.1 Sicherstellen, dass .flip-card-back position:relative hat */
.flip-card-back {
    position: relative;
  }
  
  /* 2.2 Blur nur auf das Hintergrundbild der Rückseite */
  .flip-card-front.blur-enabled .background,
  .flip-card-back.blur-enabled .background {
    filter: blur(2px);              /* Intensität nach Bedarf anpassen */
    transform: scale(1.05);         /* optional: verhindert Ränder beim Blurren */
  }
  
  /* 2.3 Blaue, teiltransparente Folie */
  .flip-card-front .overlay,
  .flip-card-back .overlay {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 73, 153, 0.5);
    pointer-events: none;           /* damit darunter klickbar bleibt */
    z-index: 1;                     /* unterhalb des .text-Containers */
  }
  
  /* 2.4 Sicherstellen, dass Text über der Folie liegt */
  .flip-card-back .text {
    position: relative;
    z-index: 2;
  }
  
  /* 2.5 Optional: damit .background und .overlay exakt die ganze Fläche abdecken */
  .flip-card-back .background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
  }

  /* Flip‑Card‑Seiten als Flex‑Container definieren */
.flip-card-front,
.flip-card-back {
  display: flex;
  justify-content: center;  /* horizontal zentrieren */
  align-items: center;      /* vertical zentrieren */
  text-align: center;       /* Textzeilen mittig */
}

/* Text-Element nur noch zurück in die 3D‑Ebene heben */
.flip-card-front .text,
.flip-card-back .text {
  position: relative;       /* bleibt im Flow des Flex‑Containers */
  transform: translateZ(30px);
  width: 100%;              /* volle Breite, Padding bleibt erhalten */
  padding: 15px;            /* deine bestehenden Abstände */
  box-sizing: border-box;
}