/* ======================================
   Centered Block - Erweitert mit Appearance-Funktionen
   ====================================== */

/* ==========================================================================
   Original Centered Block Styling (beibehalten)
   ========================================================================== */

/* Centered Block Header */
.cb-header {
  color: #00304a;
  font-family: 'Notes', sans-serif;
  font-size: 3rem;
  line-height: 1;
}

/* Centered Block Subheader */
.cb-subheader {
  color: #AB0033;
  font-family: 'Notes', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* ==========================================================================
   TYPO3 Appearance Framework Integration
   ========================================================================== */

/* Frame Basis-Klasse */
.frame {
  position: relative;
}

/* Content Block Wrapper */
.centered-block-wrapper {
  position: relative;
}

/* Content Text Styling */
.content-text {
  font-family: 'OpenSans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1rem;
}

.content-text p {
  margin-bottom: 1rem;
}

.content-text p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Frame-Klassen (Rahmen-Optionen)
   ========================================================================== */

/* Frame: None (Standard) */
.frame-none {
  /* Keine zusätzlichen Änderungen */
}

/* Frame: Ruler Before - Linie vor dem Content Block */
.frame-ruler-before::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00304a, transparent);
  margin-bottom: 2rem;
  width: 100%;
}

/* Frame: Ruler After - Linie nach dem Content Block */
.frame-ruler-after::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00304a, transparent);
  margin-top: 2rem;
  width: 100%;
}

/* Frame: Indent - Einrückung links und rechts */
.frame-indent {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Frame: Indent Left - Nur links einrücken */
.frame-indent-left {
  padding-left: 2rem;
}

/* Frame: Indent Right - Nur rechts einrücken */
.frame-indent-right {
  padding-right: 2rem;
}

/* ==========================================================================
   Layout-Varianten
   ========================================================================== */

/* Layout 1: Standard (Original Design) */
.frame-layout-1 {
  /* Standard Layout - Original beibehalten */
}

/* Layout 2: Hervorgehoben mit Hintergrund */
.frame-layout-2 {
  background-color: #f8f9fa;
  padding: 2rem;
  border-radius: 0.5rem;
  border-left: 4px solid #00304a;
}

.frame-layout-2 .cb-header {
  color: #00304a;
}

.frame-layout-2 .cb-subheader {
  color: #AB0033;
}

/* Layout 3: Box mit Schatten */
.frame-layout-3 {
  background-color: #fff;
  padding: 2rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Layout 4: Dunkler Hintergrund */
.frame-layout-4 {
  background-color: #00304a;
  padding: 2rem;
  border-radius: 0.5rem;
  color: #fff;
}

.frame-layout-4 .cb-header {
  color: #fff;
}

.frame-layout-4 .cb-subheader {
  color: #AB0033;
}

.frame-layout-4 .content-text {
  color: #fff;
}

/* Layout 5: Akzent-Hintergrund */
.frame-layout-5 {
  background-color: #AB0033;
  padding: 2rem;
  border-radius: 0.5rem;
  color: #fff;
}

.frame-layout-5 .cb-header {
  color: #fff;
}

.frame-layout-5 .cb-subheader {
  color: #fff;
  opacity: 0.9;
}

.frame-layout-5 .content-text {
  color: #fff;
}

/* ==========================================================================
   Abstände (Space Before/After)
   ========================================================================== */

/* Space Before - Abstände vor dem Element */
.frame-space-before-extra-small {
  margin-top: 0.5rem;
}

.frame-space-before-small {
  margin-top: 1rem;
}

.frame-space-before-medium {
  margin-top: 2rem;
}

.frame-space-before-large {
  margin-top: 3rem;
}

.frame-space-before-extra-large {
  margin-top: 4rem;
}

/* Space After - Abstände nach dem Element */
.frame-space-after-extra-small {
  margin-bottom: 0.5rem;
}

.frame-space-after-small {
  margin-bottom: 1rem;
}

.frame-space-after-medium {
  margin-bottom: 2rem;
}

.frame-space-after-large {
  margin-bottom: 3rem;
}

.frame-space-after-extra-large {
  margin-bottom: 4rem;
}

/* ==========================================================================
   Links-Styling (aus Links-Palette)
   ========================================================================== */

.cb-link-wrapper {
  text-align: center;
  margin-top: 2rem;
}

.cb-link {
  display: inline-block;
  background-color: #00304a;
  color: #fff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 0.25rem;
  font-family: 'Notes', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.cb-link:hover {
  background-color: #AB0033;
  color: #fff;
  text-decoration: none;
}

/* Links in dunklen Layouts */
.frame-layout-4 .cb-link {
  background-color: #AB0033;
}

.frame-layout-4 .cb-link:hover {
  background-color: #fff;
  color: #00304a;
}

.frame-layout-5 .cb-link {
  background-color: #00304a;
}

.frame-layout-5 .cb-link:hover {
  background-color: #fff;
  color: #AB0033;
}

/* ==========================================================================
   Responsive Anpassungen (Original + Erweiterungen)
   ========================================================================== */

/* Small to medium (Original beibehalten und erweitert) */
@media (max-width: 767.98px) {
  .cb-header { 
    font-size: 2.5rem; 
  }
  
  .cb-subheader { 
    font-size: 1rem; 
  }
  
  .hero-overlay {
    max-width: 90%;
    margin: 15px auto;
    padding: 1rem;
    backdrop-filter: blur(3px);
  }
  
  /* Frame Indents auf mobilen Geräten reduzieren */
  .frame-indent,
  .frame-indent-left,
  .frame-indent-right {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Layout-Padding auf mobil reduzieren */
  .frame-layout-2,
  .frame-layout-3,
  .frame-layout-4,
  .frame-layout-5 {
    padding: 1.5rem;
  }
  
  /* Abstände auf mobilen Geräten anpassen */
  .frame-space-before-large,
  .frame-space-before-extra-large {
    margin-top: 2rem;
  }
  
  .frame-space-after-large,
  .frame-space-after-extra-large {
    margin-bottom: 2rem;
  }
  
  /* Link-Button auf mobil */
  .cb-link {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* Sehr kleine Bildschirme */
@media (max-width: 480px) {
  .cb-header {
    font-size: 2rem;
  }
  
  .cb-subheader {
    font-size: 0.9rem;
  }
  
  .frame-layout-2,
  .frame-layout-3,
  .frame-layout-4,
  .frame-layout-5 {
    padding: 1rem;
  }
}

/* ==========================================================================
   Accessibility & Focus States
   ========================================================================== */

/* Fokus-Styling für Barrierefreiheit */
.frame:focus-within {
  outline: 2px solid #00304a;
  outline-offset: 2px;
}

/* Link-Focus */
.cb-link:focus {
  outline: 2px solid #AB0033;
  outline-offset: 2px;
}

/* ==========================================================================
   Print-Styles
   ========================================================================== */

@media print {
  .frame-layout-2,
  .frame-layout-3,
  .frame-layout-4,
  .frame-layout-5 {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 1px solid #ccc;
  }
  
  .frame-layout-4 .cb-header,
  .frame-layout-4 .cb-subheader,
  .frame-layout-4 .content-text,
  .frame-layout-5 .cb-header,
  .frame-layout-5 .cb-subheader,
  .frame-layout-5 .content-text {
    color: #000 !important;
  }
  
  .frame-ruler-before::before,
  .frame-ruler-after::after {
    background: #000 !important;
  }
  
  .cb-link {
    background-color: transparent !important;
    color: #000 !important;
    border: 1px solid #000;
  }
}