/* ============================================
   seminar-huetten.at — Zentrale Stylesheet
   ============================================ */

    /* ============================================
       RESET & BASE
       ============================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 18px;
      line-height: 1.65;
      color: #3A2E26;
      background: #F8F4ED;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4 {
      font-family: 'Raleway', -apple-system, sans-serif;
      font-weight: 800;
      line-height: 1.2;
      color: #3A2E26;
      letter-spacing: -0.5px;
    }
    a { color: #2D4A3E; text-decoration: none; transition: color .2s; }
    a:hover { color: #E8A33D; }
    img { max-width: 100%; height: auto; display: block; }

    /* ============================================
       LAYOUT HELPERS
       ============================================ */
    .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .section { padding: 80px 0; }
    #leistungen { padding-bottom: 140px; }

    /* ============================================
       HINTERGRUND-BILDER PRO SEKTION (subtil)
       ============================================ */
    .section-with-bg {
      position: relative;
      overflow: hidden;
    }
    .section-with-bg > .container { position: relative; z-index: 2; }
    .section-with-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: 0;
    }
    /* Auf hellen Sektionen: Bild bleibt sichtbar mit leichter Tönung */
    .section-with-bg.bg-light::before { opacity: 0.18; }
    .section-with-bg.bg-medium::before { opacity: 0.30; }
    .section-with-bg.bg-strong::before { opacity: 0.45; }
    /* Auf dunklen Sektionen: Bild ist Teil des Looks, höhere Opazität */
    .section-with-bg.bg-dark::before { opacity: 0.30; mix-blend-mode: luminosity; }
    /* Mit Verlauf nach unten/unten stärker (für smoothen Übergang) */
    .section-with-bg.fade-bottom::before {
      mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    }
    .section-with-bg.fade-top::before {
      mask-image: linear-gradient(to top, black 60%, transparent 100%);
      -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
    }

    /* Spezifische Backgrounds pro Sektion */
    .bg-trust-bar::before { background-image: url('images/berge-nebel.jpg'); }
    .bg-usps::before { background-image: url('images/berge-sonnenuntergang.jpg'); }
    .bg-huette::before { background-image: url('images/hutte-schnee.jpg'); }
    .bg-erweiterungen::before { background-image: url('images/hutte-innen.jpg'); }
    .bg-kontakt::before { background-image: url('images/teamwork-berg.jpg'); }
    .bg-footer::before { background-image: url('images/canyon-abenteuer.jpg'); }
    .section-tight { padding: 50px 0; }
    .section-cream { background: #EFE5D2; }
    .section-dark { background: #3A2E26; color: #F8F4ED; }
    .section-dark h2, .section-dark h3 { color: #F8F4ED; }
    .text-center { text-align: center; }
    .eyebrow {
      display: inline-block;
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #E8A33D;
      margin-bottom: 14px;
    }

    /* ============================================
       HEADER
       ============================================ */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(248, 244, 237, 0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid #EFE5D2;
    }
    .site-header {
      transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
    }
    .site-header.scrolled {
      background: rgba(248, 244, 237, 0.98);
      box-shadow: 0 2px 12px rgba(58, 46, 38, 0.08);
    }
    .site-header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 0;
      padding-bottom: 0;
      transition: padding .3s ease;
    }
    .site-header.scrolled .container {
      padding-top: 0;
      padding-bottom: 0;
    }
    .logo-img {
      height: 100px;
      width: auto;
      transition: height .35s cubic-bezier(0.16, 1, 0.3, 1),
                  filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, filter;
    }
    .site-header.scrolled .logo-img {
      height: 76px;
    }
    /* Logo-Entrance-Animation beim Page-Load */
    @keyframes logoEntrance {
      0%   { opacity: 0; transform: translateX(-16px) scale(0.94); }
      100% { opacity: 1; transform: translateX(0) scale(1); }
    }
    /* Logo schwebt subtil — sichtbare Dauer-Animation */
    @keyframes logoFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-3px); }
    }
    .logo-link {
      position: relative;
      display: inline-block;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      animation: logoEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both;
      will-change: transform;
    }
    /* Shimmer / Licht-Sweep über das Logo */
    .logo-link::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 70%);
      transform: skewX(-20deg);
      pointer-events: none;
      animation: logoShimmer 6s ease-in-out 2s infinite;
      mix-blend-mode: soft-light;
    }
    @keyframes logoShimmer {
      0%, 60%, 100% { left: -100%; }
      80% { left: 200%; }
    }
    .logo-img {
      animation: logoFloat 4.5s ease-in-out 1.5s infinite;
    }
    .logo-link:hover {
      transform: scale(1.04);
    }
    .logo-link:hover .logo-img {
      filter: drop-shadow(0 6px 14px rgba(232, 163, 61, 0.35));
      animation-play-state: paused;
    }
    .header-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #E8A33D;
      color: #3A2E26;
      padding: 12px 24px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 15px;
      transition: all .2s;
    }
    .header-cta:hover { background: #d8901f; color: #3A2E26; transform: translateY(-1px); }

    /* ============================================
       HERO
       ============================================ */
    .hero {
      position: relative;
      min-height: 90vh;
      display: flex;
      align-items: center;
      background:
        linear-gradient(135deg, rgba(58,46,38,0.75) 0%, rgba(45,74,62,0.65) 100%),
        url('https://images.unsplash.com/photo-1551632811-561732d1e306?w=2000&q=80') center/cover;
      color: #F8F4ED;
      padding: 100px 0 80px;
    }
    .hero-content { max-width: 760px; }
    .hero h1 {
      color: #F8F4ED;
      font-size: clamp(36px, 5.5vw, 64px);
      margin-bottom: 24px;
    }
    .hero h1 .accent { color: #E8A33D; }
    .hero .sub {
      font-size: clamp(18px, 2vw, 22px);
      margin-bottom: 36px;
      opacity: 0.95;
      max-width: 620px;
    }
    .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 17px;
      font-family: 'Raleway', sans-serif;
      transition: all .2s;
      cursor: pointer;
      border: none;
    }
    .btn-primary {
      background: #E8A33D;
      color: #3A2E26;
      box-shadow: 0 4px 14px rgba(232,163,61,.35);
    }
    .btn-primary:hover { background: #d8901f; color: #3A2E26; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,163,61,.45); }
    .btn-secondary {
      background: transparent;
      color: #F8F4ED;
      border: 2px solid #F8F4ED;
    }
    .btn-secondary:hover { background: #F8F4ED; color: #3A2E26; }
    .hero-trust {
      margin-top: 32px;
      font-size: 15px;
      opacity: 0.85;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .hero-trust .dot { width: 6px; height: 6px; border-radius: 50%; background: #E8A33D; }

    /* ============================================
       USPs / TRUST BAR
       ============================================ */
    .trust-bar {
      background: #2D4A3E;
      color: #F8F4ED;
      padding: 30px 0;
    }
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
      text-align: center;
    }
    .trust-item .num {
      font-family: 'Raleway', sans-serif;
      font-weight: 800;
      font-size: 36px;
      color: #E8A33D;
      display: block;
    }
    .trust-item .label { font-size: 15px; opacity: 0.9; }

    /* ============================================
       USPs CARDS
       ============================================ */
    .usps { background: #F8F4ED; }
    .usps h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 50px; }
    .usps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 28px;
    }
    .usp-card {
      background: white;
      padding: 32px 28px;
      border-radius: 10px;
      border: 1px solid #EFE5D2;
      transition: all .25s;
    }
    .usp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(58,46,38,.10); border-color: #E8A33D; }
    .usp-icon {
      width: 56px;
      height: 56px;
      background: #E8A33D;
      color: #3A2E26;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-bottom: 20px;
    }
    .usp-card h3 { font-size: 20px; margin-bottom: 12px; }
    .usp-card p { color: #5a4e44; font-size: 16px; }

    /* ============================================
       SERVICES
       ============================================ */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      margin-top: 30px;
    }
    .service-card {
      background: white;
      padding: 32px 28px;
      border-radius: 10px;
      border-left: 4px solid #E8A33D;
      transition: all .25s;
    }
    .service-card:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(58,46,38,.10); }
    .service-card h3 { font-size: 22px; margin-bottom: 10px; color: #2D4A3E; }
    .service-card p { color: #5a4e44; font-size: 16px; margin-bottom: 16px; }
    .service-card .link {
      font-weight: 700;
      color: #E8A33D;
      font-size: 15px;
    }
    .service-card .link::after { content: ' →'; }

    /* ============================================
       ABLAUF — TIMELINE
       ============================================ */
    .ablauf-flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      position: relative;
      margin-top: 50px;
    }
    .ablauf-flow::before {
      content: '';
      position: absolute;
      top: 44px;
      left: 8%;
      right: 8%;
      height: 3px;
      background: linear-gradient(to right, #EFE5D2 0%, #EFE5D2 100%);
      z-index: 0;
    }
    .flow-step {
      text-align: center;
      position: relative;
      padding: 0 14px;
      z-index: 1;
    }
    .flow-icon {
      width: 88px;
      height: 88px;
      margin: 0 auto 24px;
      background: #F8F4ED;
      border: 3px solid #E8A33D;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      line-height: 1;
      position: relative;
      transition: all .3s ease;
      box-shadow: 0 4px 14px rgba(58,46,38,.06);
    }
    .flow-step:hover .flow-icon {
      background: #E8A33D;
      transform: scale(1.06) translateY(-2px);
      box-shadow: 0 10px 24px rgba(232,163,61,.35);
    }
    .flow-icon .step-num {
      position: absolute;
      top: -6px;
      right: -6px;
      background: #3A2E26;
      color: #F8F4ED;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      font-size: 13px;
      font-weight: 700;
      font-family: 'Raleway', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #F8F4ED;
    }
    .step-badge {
      display: inline-block;
      font-family: 'Raleway', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #E8A33D;
      margin-bottom: 10px;
    }
    .flow-step h3 {
      font-size: 19px;
      margin-bottom: 10px;
    }
    .flow-step p {
      font-size: 14px;
      color: #5a4e44;
      line-height: 1.55;
      max-width: 200px;
      margin: 0 auto;
    }
    @media (max-width: 960px) {
      .ablauf-flow {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 30px;
      }
      .ablauf-flow::before {
        top: 44px;
        bottom: 44px;
        left: 44px;
        right: auto;
        width: 3px;
        height: auto;
      }
      .flow-step {
        display: grid;
        grid-template-columns: 88px 1fr;
        gap: 24px;
        text-align: left;
        padding: 20px 0;
        align-items: start;
      }
      .flow-icon { margin: 0; }
      .step-content { padding-top: 16px; }
      .flow-step p { max-width: none; }
    }

    /* ============================================
       PREISE
       ============================================ */
    .preis-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 24px;
    }
    .preis-card {
      background: white;
      border-radius: 10px;
      padding: 32px 26px;
      border: 1px solid #EFE5D2;
      text-align: center;
    }
    .preis-card.featured { border-color: #E8A33D; border-width: 2px; position: relative; }
    .preis-card.featured::before {
      content: 'BELIEBT';
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: #E8A33D;
      color: #3A2E26;
      padding: 4px 14px;
      border-radius: 14px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1px;
    }
    .preis-card h3 { font-size: 18px; margin-bottom: 8px; }
    .preis-card .price {
      font-family: 'Raleway', sans-serif;
      font-weight: 800;
      font-size: 32px;
      color: #2D4A3E;
      margin: 14px 0;
    }
    .preis-card .price small { font-size: 14px; color: #8B8378; font-weight: 500; }
    .preis-card p { font-size: 14px; color: #5a4e44; }

    /* ============================================
       FORM
       ============================================ */
    .form-section {
      background: #2D4A3E;
      color: #F8F4ED;
    }
    /* Wenn .form-section als full-bleed Section genutzt wird (Startseite) */
    section.form-section { padding: 80px 0; }
    /* Wenn .form-section als Box in einem Container genutzt wird (Kontaktseite) */
    .form-section:not(section) {
      padding: 60px 64px;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(45,74,62,.25), 0 4px 16px rgba(0,0,0,.10);
      position: relative;
      overflow: hidden;
    }
    .form-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, #E8A33D 0%, #E8A33D 50%, transparent 100%);
    }
    .form-section h2 { color: #F8F4ED; font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
    .form-section .sub { color: #F8F4ED; opacity: 0.9; font-size: 18px; margin-bottom: 40px; }
    .form-section .text-center { text-align: center; max-width: 600px; margin: 0 auto 40px; }
    .form-section .text-center h2 { margin-bottom: 12px; }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 20px;
    }
    .form-group { display: flex; flex-direction: column; }
    .form-group.full { grid-column: 1 / -1; }
    .form-group label { font-size: 14px; font-weight: 600; margin-bottom: 8px; letter-spacing: .3px; }
    .form-group input, .form-group select, .form-group textarea {
      padding: 16px 20px;
      border: 1.5px solid rgba(248,244,237,.25);
      background: rgba(248,244,237,.08);
      color: #F8F4ED;
      border-radius: 8px;
      font-size: 16px;
      font-family: inherit;
      transition: all .2s;
    }
    .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(248,244,237,.5); }
    .form-group input:hover, .form-group select:hover, .form-group textarea:hover {
      background: rgba(248,244,237,.10);
      border-color: rgba(248,244,237,.35);
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      outline: none;
      background: rgba(248,244,237,.15);
      border-color: #E8A33D;
      box-shadow: 0 0 0 3px rgba(232,163,61,.2);
    }
    .form-group select option { background: #2D4A3E; color: #F8F4ED; }
    .form-group textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
    .form-consent {
      grid-column: 1 / -1;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 14px;
      opacity: 0.9;
      padding: 16px 18px;
      background: rgba(248,244,237,.05);
      border-radius: 8px;
      border: 1px solid rgba(248,244,237,.10);
    }
    .form-consent input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }
    .form-submit {
      grid-column: 1 / -1;
      margin-top: 8px;
    }
    .form-submit .btn {
      width: 100%;
      justify-content: center;
      padding: 18px 32px;
      font-size: 17px;
      box-shadow: 0 6px 20px rgba(232,163,61,.30);
    }
    .form-submit .btn:hover { box-shadow: 0 8px 28px rgba(232,163,61,.45); }
    .form-hint { font-size: 13px; opacity: 0.7; margin-top: 14px; text-align: center; }
    /* Form-Box Container (für Kontaktseite) */
    .form-box-wrap { max-width: 920px; margin: 0 auto; padding: 0 0 80px; }

    /* ============================================
       KONTAKT
       ============================================ */
    .kontakt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: start;
    }
    .kontakt-info { font-size: 17px; }
    .kontakt-info p { margin-bottom: 12px; }
    .kontakt-info strong { color: #2D4A3E; }
    .kontakt-info a { font-weight: 600; }

    /* ============================================
       FOOTER
       ============================================ */
    .site-footer {
      background: #2A221C;
      color: #F8F4ED;
      padding: 50px 0 24px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }
    .footer-col h4 { color: #F8F4ED; font-size: 16px; margin-bottom: 16px; font-weight: 700; }
    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 8px; }
    .footer-col a { color: #F8F4ED; opacity: 0.75; font-size: 15px; }
    .footer-col a:hover { color: #E8A33D; opacity: 1; }
    .footer-bottom {
      border-top: 1px solid rgba(248,244,237,.15);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 13px;
      opacity: 0.7;
    }
    .footer-bottom a { color: #F8F4ED; }

    /* ============================================
       MOBILE STICKY CTA
       ============================================ */
    .sticky-cta {
      position: fixed;
      bottom: 16px;
      left: 16px;
      right: 16px;
      z-index: 50;
      display: none;
    }
    .sticky-cta .btn { width: 100%; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 768px) {
      .section { padding: 60px 0; }
      .site-header .container { padding-top: 0; padding-bottom: 0; }
      .site-header.scrolled .container { padding-top: 0; padding-bottom: 0; }
      .logo-img { height: 70px; }
      .site-header.scrolled .logo-img { height: 58px; }
      .logo-link { animation: none; } /* Animation-Disable auf Mobile für Performance */
      .logo-link:hover { transform: none; }
      .header-cta { padding: 10px 16px; font-size: 14px; }
      .hero { min-height: auto; padding: 70px 0 60px; }
      .form-grid { grid-template-columns: 1fr; gap: 18px; }
      .form-section { padding: 36px 24px; }
      .form-section .sub { font-size: 16px; margin-bottom: 28px; }
      .kontakt-grid { grid-template-columns: 1fr; gap: 30px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
      .sticky-cta { display: block; }
      body { padding-bottom: 80px; }
    }
    @media (max-width: 480px) {
      .footer-grid { grid-template-columns: 1fr; }
      .hero-ctas .btn { width: 100%; justify-content: center; }
    }



/* ============================================
   NAVIGATION (Header & Mobile-Menü)
   ============================================ */

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #3A2E26;
  position: relative;
  padding: 8px 0;
  transition: color .2s;
}
.main-nav a:hover { color: #E8A33D; }
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #E8A33D;
  transition: width .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-nav a:hover::after { width: 100%; }
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 110;
}
.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #3A2E26;
  margin: 5px auto;
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #E8A33D; }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #E8A33D; }

@media (max-width: 960px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 360px;
    height: 100vh;
    background: #F8F4ED;
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 30px 30px;
    gap: 4px;
    transition: right .4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 24px rgba(58,46,38,.10);
    z-index: 105;
  }
  .main-nav.open { right: 0; }
  .main-nav a {
    font-size: 18px;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid #EFE5D2;
  }
  .main-nav a::after { display: none; }
  .mobile-toggle { display: block; }
  .header-cta { display: none; }
  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(58,46,38,.5);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }
  .mobile-overlay.open { opacity: 1; pointer-events: auto; }
}

/* ============================================
   PAGE HERO (für Unterseiten)
   ============================================ */
.page-hero {
  padding: 140px 0 60px;
  background: linear-gradient(135deg, #2D4A3E 0%, #3A2E26 100%);
  color: #F8F4ED;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(232,163,61,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(45,74,62,.3) 0%, transparent 50%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #F8F4ED; font-size: clamp(32px, 5vw, 56px); margin-bottom: 16px; }
.page-hero p { font-size: 18px; opacity: 0.92; max-width: 720px; }
.page-hero .breadcrumb {
  font-size: 14px;
  margin-bottom: 16px;
  opacity: 0.7;
}
.page-hero .breadcrumb a { color: #F8F4ED; opacity: 0.8; }
.page-hero .breadcrumb a:hover { color: #E8A33D; opacity: 1; }

/* ============================================
   CONTENT TYPOGRAFIE (für Artikel-Seiten)
   ============================================ */
.content-block { max-width: 760px; margin: 0 auto; }
.content-block h2 { font-size: 28px; margin: 40px 0 16px; }
.content-block h3 { font-size: 22px; margin: 32px 0 12px; color: #2D4A3E; }
.content-block p { margin-bottom: 16px; color: #3A2E26; font-size: 17px; }
.content-block ul, .content-block ol { margin: 16px 0 16px 24px; }
.content-block li { margin-bottom: 8px; }
.content-block a { color: #2D4A3E; font-weight: 600; border-bottom: 1px solid #E8A33D; }
.content-block a:hover { color: #E8A33D; }
.content-block blockquote {
  border-left: 4px solid #E8A33D;
  padding: 16px 24px;
  margin: 24px 0;
  background: #F8F4ED;
  font-style: italic;
}

/* ============================================
   CTA-BANNER (Seitenabschluss)
   ============================================ */
.cta-banner {
  background: #2D4A3E;
  color: #F8F4ED;
  padding: 70px 0;
  text-align: center;
}
.cta-banner h2 { color: #F8F4ED; font-size: clamp(26px, 4vw, 40px); margin-bottom: 14px; }
.cta-banner p { font-size: 18px; opacity: 0.9; max-width: 600px; margin: 0 auto 30px; }
.cta-banner .btn { display: inline-flex; }