/* styles.css (optimiert) – Duplikate entfernt, einheitlich formatiert. Visuell unverändert. */

/* ========== Design-Variablen & Basis ========== */
:root{
  --brand-50:#eaf5f8; --brand-100:#d6ecf2; --brand-200:#add9e6; --brand-300:#85c6d9;
  --brand-400:#5db3cc; --brand-500:#3399b3; --brand-600:#006699; --brand-700:#00577f;
  --brand-800:#004766; --brand-900:#00384d;
  --accent-600:#E95F24; --accent-700:#CC541F;
  --text:#1f2937; --muted:#f5f5f4; --muted-2:#fafaf9; --border:#e5e7eb;
  --surface:#ffffff; --invert:#ffffff;
  --ff-base:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --ff-logo:'Blinker', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --ff-scribble:'Grape Nuts', cursive;
  --text-xs:.8125rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-6xl:3.75rem;
  --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem;
  --radius:.75rem; --radius-xl:1rem; --shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --container:80rem;
}

/* Sanftes Scrollen für Anker-Links */
html {
  scroll-behavior: smooth;
}

/* Barrierefrei: Wenn Nutzer reduzierte Bewegungen wünschen, kein Smooth-Scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--ff-base); color:var(--text); background:var(--surface);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }

/* Typo */
h1{ line-height:1.15; }
h2{ font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height:1.2; }
h3{ font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height:1.26; }
h4{ font-size: 1.125rem; line-height:1.35; }
.subhead{ font-weight:600; letter-spacing:.01em; margin-top:.4rem; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height:1.35; color:#334155; }
.subhead.light{ color:#ffffff; text-shadow: 0 1px 0 rgba(0,0,0,.12); }

/* Layout-Helfer */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px){ .container{ padding-inline:1.5rem; } }
@media (min-width:1024px){ .container{ padding-inline:2rem; } }
.center{ text-align:center; }
.narrow{ max-width:48rem; margin-inline:auto; }
.soft{ background: var(--muted-2); }
.grid{ display:grid; gap:2rem; }
.grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
@media (min-width:768px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}

/* ========== Header & Navigation ========== */
.site-header{ position:sticky; top:0; z-index:30; background:rgba(255,255,255,.8); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }

.mobile-menu{
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 40;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; }
.brand-logo{ height:2.25rem; width:auto; }
.brand-name{ font-family:var(--ff-logo); font-weight:400; font-size:1.5rem; }
@media (min-width:768px){ .brand-logo{ height:2.5rem; } }

.nav{ display:flex; align-items:center; gap:1rem; }
.nav-toggle{ appearance:none; background:transparent; border:0; display:inline-flex; flex-direction:column; gap:0; padding:8px; border-radius:8px; cursor:pointer; }
.nav-toggle .bar{ width:22px; height:2px; background:#1c1917; display:block; }
.nav-list{ display:none; gap:1.5rem; list-style:none; padding:0; margin:0; }
.header-cta{ display:none; gap:1rem; align-items:center; }
.header-cta .phone{ color:#444; text-decoration:none; font-size:var(--text-sm); }
@media (min-width:768px){ .nav-toggle{ display:none; } .nav-list{ display:flex; } .header-cta{ display:flex; } }

.mobile-menu{ border-top:1px solid var(--border); background:rgba(255,255,255,.95); backdrop-filter:blur(8px); padding:1rem; }
.mobile-menu a{ display:block; padding:.5rem 0; text-decoration:none; }

.nav-list a{ color:#111 !important; text-decoration:none; font-weight:500; font-size: clamp(1rem, 1.2vw, 1.125rem); }
.nav-list a:hover{ color:var(--accent-600) !important; }
.mobile-menu a{ color:#111 !important; font-weight:500; text-decoration:none; }
.mobile-menu a:hover{ color:var(--accent-600) !important; }
.nav-list a:focus-visible,
.mobile-menu a:focus-visible{ outline:2px solid var(--accent-600); outline-offset:2px; border-radius:.35rem; }



.mobile-menu a{
  font-size: 1.0625rem; /* ~17px für bessere Lesbarkeit mobil */
}



/* Mobile Header-Layout (2-zeilig) */
@media (max-width:767px){
  .site-header .header-inner{
    display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
    align-items:center; gap:.3rem .75rem; height:auto; padding:.5rem 1rem;
  }
  .site-header .brand{ grid-column:1; grid-row:1; }
  .site-header .nav{ grid-column:2; grid-row:1; }
  .site-header .header-cta{
    grid-column:1 / 3; grid-row:2; display:flex !important;
    align-items:center; justify-content:space-between; gap:.75rem;
  }
  .site-header .header-cta .btn{ padding:.42rem .9rem; line-height:1.15; display:inline-flex; align-items:center; }
  .site-header .header-cta .phone{ display:inline-flex; align-items:center; line-height:1.15; color:#111; font-weight:500; font-size:.95rem; }
}

/* ========== Buttons & Links ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.5rem 1rem; border-radius:.75rem; border:1px solid transparent;
  font-weight:500; font-size:var(--text-sm); text-decoration:none; cursor:pointer; transition:.2s ease;
}
.btn-lg{ padding:.75rem 1.5rem; font-size:var(--text-base); }
.btn-accent{ background:var(--accent-600); color:var(--invert); }
.btn-accent:hover{ background:var(--accent-700); }
.btn-outline{ background:transparent; color:#fff; border:2px solid #fff; }
.btn-outline:hover{ background:rgba(255,255,255,.12); }
.btn-outline:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.link{ color:var(--accent-600); text-decoration:underline; }

/* ========== Hero & Parallax ========== */
.hero{ position:relative; min-height:100svh; overflow:hidden; color:#fff; display:grid; align-items:center; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:translateZ(0); }
.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.hero-content{ position:relative; z-index:1; padding-block:var(--space-20); }
.hero h1{ margin:0; font-weight:800; font-size:clamp(var(--text-4xl), 6vw, var(--text-6xl)); }
.hero .lead{ margin-top:1rem; max-width:42rem; font-size:clamp(var(--text-lg), 2.5vw, var(--text-xl)); }
.hero-actions{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }

.parallax-section{ position:relative; min-height:70svh; overflow:hidden; color:#fff; }
.parallax-bg{
  position:absolute; inset:0; background-image:var(--bg);
  background-size:cover; background-position:center; background-attachment:fixed;
  filter:saturate(.9) brightness(.95);
}
.parallax-section::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.5) 40%, rgba(0,0,0,.55));
  pointer-events:none;
}
.parallax-inner{ position:relative; z-index:1; padding-block:var(--space-20); padding-top:var(--space-6); }
.parallax-inner.wide{ max-width:72rem; }
@media (prefers-reduced-motion:reduce){ .hero-video{ display:none !important; } .parallax-bg{ background-attachment:scroll !important; } }
@media (max-width:1024px){ .parallax-bg{ background-attachment:scroll; } }
/* iOS/iPadOS Fix + Touch */
@supports (-webkit-touch-callout:none){ .parallax-bg{ background-attachment:scroll !important; } }
@media (hover:none) and (pointer:coarse){ .parallax-bg{ background-attachment:scroll !important; } }

/* ========== Sektionen, Karten, Kacheln ========== */
.section{ padding-block:var(--space-20); padding-top:var(--space-6); }
.maxw-3xl{ max-width:48rem; }

.feature-grid{ list-style:none; margin:var(--space-10) 0 0 0; padding:0; display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .feature-grid{ grid-template-columns:repeat(4,1fr); } }

.card{
  background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:.75rem; padding:1.25rem; color:#1c1917; box-shadow:var(--shadow);
}
.card h3{ margin:0; }
.card p{ margin-top:0; color:#57534e; }

.tile{
  background:#fff; padding:1.25rem; border-radius:.75rem; border:1px solid var(--border);
  box-shadow:var(--shadow); transition:transform .15s ease;
}

.tile-plain{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.tile:hover{ transform:translateY(-2px); }



/* Kleine runde Badges (z. B. „Formulare“, „Kalender“, „Mitgliederbereich“) */
.badge-row, .chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.badge, .chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  border: 1px solid #bcdbe6;
  color: #0b4a5f;
  font-size: .8125rem;
  line-height: 1;
  white-space: nowrap;
  background: #fff;
}


.icon-circle{
  width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-inline:auto; margin-bottom:.75rem; background:#d6ecf2; color:#00577f; transition: background .2s ease,color .2s ease,transform .2s ease;
}
.icon-circle svg{ width:48px; height:48px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-circle.no-border{ border:none; box-shadow:none; }
.tile:hover .icon-circle{ background:var(--brand-200); color:#004766; transform:translateY(-2px) scale(1.03); }

/* Zitate */
.quotes .light{ color:#fff; }
.quotes .scribble{ font-size:1.4rem; line-height:1.33; }
@media (min-width:640px){ .quotes .scribble{ font-size:1.6rem; } }
.scribble{ font-family:var(--ff-scribble); }
.scribble.big{ font-size:1.75rem; }
.scribble.small{ font-size:1.125rem; color:#d6d3d1; }

.quotes-grid{ margin-top:var(--space-10); display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .quotes-grid{ grid-template-columns:1fr 1fr; gap:1.25rem; } }
@media (min-width:1024px){ .quotes-grid{ gap:1.5rem; } }
.quote-card{
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; padding:1.25rem; margin:0;
}
.quote-card blockquote{ margin:0; line-height:1.55; }
.quotes figure{ margin:0; }

/* Über mich */
.about{ grid-template-columns:1fr; align-items:start; }
.portrait{ width:192px; height:192px; margin-inline:auto; border-radius:50%; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); border:1px solid var(--border); }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.about-right p{ color:#57534e; }
@media (min-width:900px){ .about{ grid-template-columns:2fr 3fr; gap:2rem; } .about-left{ text-align:center; } }

/* === Checkliste final: ohne Rahmen, größerer Haken, top-aligned = .62em ====== */
.checklist{
  list-style:none; margin:.75rem 0 0 0; padding:0; gap:.4rem;
}
.checklist li{
  position:relative; background:transparent; border:0; box-shadow:none;
  padding:0 0 0 2.6rem; line-height:1.55; font-size:inherit; letter-spacing:.005em;
}
.checklist li::before{
  content:""; position:absolute; left:.4rem; top:.10em;  /* an 1. Zeile ankern */
  width:1.10rem; height:1.10rem; border-radius:50%;     /* kleinerer Kreis */
  background: transparent;
  border: 2px solid var(--brand-600);                   /* CI-Blau */
  box-shadow: none;                                     /* transform entfernt */
}
.checklist li::after{
  content:""; position:absolute;
  left: 1.1rem; top:.72em;             /* zur 1. Zeile & Kreis-Zentrum */
  width:.55rem; height:.32rem;
  border: 2px solid var(--brand-600);               /* CI-Blau (gleich wie Kreis) */
  border-bottom:0; border-left:0;
  transform: translate(-50%, -50%) rotate(130deg);  /* Haken drehen: langer Teil → rechts (zum Text) */
  box-sizing: border-box;
}


/* Schritte / Timeline */
.steps .step-card{ background:transparent; border:0; box-shadow:none; padding:0; }
.steps .illu{ width:128px; height:128px; margin-inline:auto; margin-bottom:.75rem; }
.steps .illu img{ width:100%; height:100%; object-fit:contain; }

.timeline{ position:relative; margin-top:1.5rem; display:grid; gap:2rem; }
.timeline .step{ text-align:center; padding-inline:.5rem; }
.step-number{
  width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#d6ecf2; color:#00577f; font-weight:700; font-size:2rem; margin-inline:auto; box-shadow:var(--shadow); position:relative; z-index:1;
}
@media (min-width:768px){
  .timeline{ grid-template-columns:repeat(3,1fr); align-items:start; }
  .timeline::before{ content:""; position:absolute; top:42px; left:0; right:0; height:3px; background:var(--border); }
}
@media (max-width:767px){
  .timeline{ grid-template-columns:1fr; }
  .timeline::before{ content:""; position:absolute; left:calc(50% - 1.5px); top:42px; bottom:42px; width:3px; background:var(--border); }
  .timeline .step{ position:relative; }
}

/* Blog / Post-Karten */
.post{
  background:#fff; padding:1.25rem; border-radius:.75rem; border:1px solid var(--border); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.post p{ color:#57534e; }
.post .link{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:#E95F24; text-decoration:none;
  border-bottom:1px solid rgba(233,95,36,.35); padding-bottom:2px;
  margin-top:auto !important; align-self:flex-start;
}
.post .link:hover{ border-bottom-color:rgba(233,95,36,.6); }
.post .link::after{
  content:""; display:inline-block; width:1em; height:1em; background-color:currentColor;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:100% 100%; mask-size:100% 100%;
  transition:transform .2s ease; transform:translateX(0) scale(.96);
}
.post:hover .link::after{ transform:translateX(3px) scale(.96); }

/* Footer */
.site-footer{ background:#0c0a09; color:#a8a29e; padding-block:.5rem 2rem; }
.footer-grid{ display:grid; gap:1rem 2rem; align-items:stretch; }
.footer-left{ font-size:.95rem; }
.footer-left p{ margin-top:0.2rem!important;}
.footer-left .link{ color:#e7e5e4; text-decoration:underline; }
.footer-right{ text-align:right; }
.footer-right .scribble{ color:#e7e5e4; margin:0; font-family:'Grape Nuts',cursive; font-size:1.25rem; line-height:1.4; }
.footer-right .scribble.small{ color:#a8a29e; font-size:1.125rem; }
.brand-footer{ font-family:'Blinker',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight:600; letter-spacing:.01em; color:#e7e5e4; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:minmax(0,1fr) auto; } }
@media (max-width:767px){ .footer-left,.footer-right{ text-align:center; } }
.footer-grid > *{ height:100%; }
.footer-left,.footer-right{ justify-content:center; }

/* ========== Kontakt-Formular ========== */
.section-kontakt{ background:#006699; color:#fff; padding-block:5rem; padding-top:var(--space-10); }
.section-kontakt .text-on-brand a{ color:#fff; text-decoration:underline; }
.section .container.narrow{ max-width:48rem; }
.section .container.center{ text-align:center; }
.section .container.center .form{ text-align:left; }
.section .lead{ margin-top:.75rem; opacity:.92; }

.form{ margin-top:1.5rem; display:grid; gap:1rem; max-width:48rem; margin-left:auto; margin-right:auto; text-align:left; }
.form-field label{ display:block; font-weight:600; font-size:.95rem; }
.form-field input,.form-field textarea{
  width:100%; margin-top:.5rem; border-radius:.6rem; border:0; padding:.75rem 1rem; color:#111; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06); outline:0; transition:box-shadow .15s ease,border-color .15s ease;
  font-family:var(--ff-base); font-size:var(--text-base); line-height:1.4;
}
.form-field input::placeholder,.form-field textarea::placeholder{ color:#78716c; }

.form-consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; }
.form-consent input[type="checkbox"]{
  width:1.05rem; height:1.05rem; margin-top:.15rem; border-radius:.25rem; border:2px solid rgba(255,255,255,.85); background:#fff;
}

.form-actions{ text-align:center; margin-top:.5rem; }
.btn-contrast{ background:#fff; color:#B94E1D; border:1px solid #fff; border-radius:.9rem; padding:.75rem 1.25rem; font-weight:600; text-decoration:none; }
.btn-contrast:hover{ background:#f3f4f6; }
.link-invert{ color:#fff; text-decoration:underline; }

/* Fokus */
.form-field input:focus,.form-field textarea:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.7); }
.form-consent input:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Meldungen (Fehler/Erfolg) – schlank */
.tile[role="alert"]{
  background:transparent; box-shadow:none; border:0; padding:.85rem 0; margin:1rem 0 1.25rem;
  border-top:2px solid #E95F24; border-bottom:2px solid #E95F24; border-radius:0 !important;
}
.tile[role="alert"] h2{ margin:0 0 .5rem 0; font-weight:700; }
.tile[role="alert"] ul{ list-style:none; margin:0; padding:0; }
.tile[role="alert"] li{ position:relative; padding-left:1.2rem; margin:.35rem 0; line-height:1.5; }
.tile[role="status"]{
  background:transparent; box-shadow:none; border:0; padding:.85rem 0; margin:1rem 0 1.25rem;
  border-top:2px solid #2e9f6b; border-bottom:2px solid #2e9f6b;
}

/* ========== Leistungen / Teaser ========== */
.teaser{ position:relative; color:#fff; }
.teaser .teaser-media{ position:relative; height:clamp(360px, 30vw, 560px); overflow:hidden; }
.teaser .teaser-img{ width:100%; height:100%; object-fit:cover; object-position:right center; display:block; }
.teaser .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.42); z-index:1; }
.teaser .teaser-hero-content{ position:absolute; inset:0; z-index:2; display:grid; align-items:center; }
.teaser .teaser-hero-content .container{ padding-block:var(--space-20); }
.teaser h1{ margin:0; font-weight:800; font-size:clamp(var(--text-4xl), 6vw, var(--text-6xl)); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.teaser .lead{ margin-top:1rem; max-width:42rem; font-size:clamp(var(--text-lg), 2.5vw, var(--text-xl)); color:#fff; opacity:.98; }
@media (min-width:1400px){
  .teaser .teaser-media{ height:clamp(400px, 26vw, 600px); }
  .teaser .teaser-img{ object-position:right bottom; }
}

.section h1{ margin:0; font-weight:800; font-size:clamp(var(--text-2xl), 4vw, var(--text-4xl)); color:#000;  }

/* Pakete – feste Medien-Spalte, Bild wächst auf volle Höhe */
.packages-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:960px){ .packages-grid{ grid-template-columns:repeat(3,1fr); } }

.package-card{
  --media-w:112px; --thumb:112px;
  display:grid; grid-template-columns:var(--media-w) 1fr; align-items:stretch; min-height:280px;
  border:1px solid var(--border); overflow:hidden; position:relative; padding:0;
}
.pkg-media{
  width:100%; height:var(--thumb); border-right:1px solid var(--border); overflow:hidden; position:relative;
  transition:height .5s cubic-bezier(.2,.7,.2,1), border-radius .45s ease; background:var(--muted-2);
  border-radius:14px 0 14px 0;
}
.pkg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform .6s ease; }
.pkg-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(0,102,153,.50) 0%, rgba(93,179,204,.30) 70%);
  mix-blend-mode:multiply; opacity:.9; transition:opacity .35s ease;
}
.pkg-content{ padding:1.05rem 1.15rem 1.15rem; display:flex; flex-direction:column; justify-content:center; gap:.55rem; }
.package-card:hover .pkg-media{ height:100%; border-radius:14px 0 0 14px; }
.package-card:hover .pkg-img{ transform:scale(1.08); }
.package-card:hover .pkg-media::after{ opacity:.85; }
.package-card.featured .pkg-media::before{
  content:""; position:absolute; inset:-10%;
  background:radial-gradient(80% 60% at 25% 30%, rgba(233,95,36,.18), transparent 60%);
  opacity:0; transition:opacity .45s ease;
}
.package-card.featured:hover .pkg-media::before{ opacity:1; }
@media (hover:none){ .pkg-media{ height:var(--thumb); border-radius:14px 0 14px 0; } }

/* Paket-CTA unten fixiert + SVG-Chevron */
.pkg-footer{ margin-top:auto; padding-top:.85rem; }
.pkg-link{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:#E95F24; text-decoration:none;
  border-bottom:1px solid rgba(233,95,36,.35); padding-bottom:2px;
}
.pkg-link:hover{ border-bottom-color:rgba(233,95,36,.6); }
.pkg-link::after{
  content:""; display:inline-block; width:1em; height:1em; background-color:currentColor;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:100% 100%; mask-size:100% 100%;
  transition:transform .2s ease; transform:translateX(0) scale(.96);
}
.package-card:hover .pkg-link::after{ transform:translateX(3px) scale(.96); }

/* Feintuning Pakete */
.pkg-content h3 + .muted-text{ margin-top:-.55rem; }
.package-card.tile:hover, .packages-grid .package-card:hover{ transform:none !important; }

/* ========== Reveal ========== */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease-out, transform .6s ease-out; will-change:opacity, transform; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal p {margin-top:0!important;}
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }




/* Layout: Kontaktbereich – Formular breit, Info schmal */
.grid-contact {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem;
}

/* Mobil: einspaltig stapeln */
@media (max-width: 768px) {
  .grid-contact {
    grid-template-columns: 1fr;
  }
}

/* Kontakt-Karte (Adresse/E-Mail) – klarer Kasten statt weiß auf weiß */
.contact-card {
  /* Farben: gern an deine Design-Tokens anpassen, falls vorhanden */
  background: #f7f8fb;            /* leichtes Grau statt reinem Weiß */
  color: inherit;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  margin-top: 3rem;

  padding: 0.5rem 0.5rem 0.5rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  line-height: 1.6;
}

.contact-card address {
  font-style: normal;
  margin: 0 0 .75rem 0;
}

/* Links im Kasten sollen klar erkennbar sein */
.contact-card a {
  text-decoration: underline;
}

/* Buttons im Kasten etwas kompakter */
.contact-card .btn {
  margin-left: .5rem;
  padding: .4rem .65rem;
  font-size: .9rem;
  border-radius: 10px;
}

/* Falls der Bereich vor farbigem Hintergrund (Brand) steht, Kontrast sichern */
.section-kontakt .contact-card {
  /* Optional: auf dunklem Brand-Hintergrund etwas heller machen */
  background: rgba(255,255,255,0.1);
  border-color: rgba(0,0,0,.08);
}


/* 2) Sticky nur ab Tablet/Desktop aktivieren */
@media (min-width: 769px) {
  .grid-contact .contact-card {
    position: sticky;
    top: 5rem;         /* Abstand zum Viewport oben */
    align-self: start; /* verhindert Stretching */
  }
  .btn-kontakt {
    text-align: left;
  }
}


/* 4) Falls der Kasten mal zu hoch wird: scrollbar im Kasten zulassen */
@media (min-width: 769px) {
  .grid-contact .contact-card {
    max-height: calc(100vh - 4rem);
    overflow: auto;
  }
}

/* Blog: Meta-Zeile (Datum/Autor) */
.meta {
  font-size: .95rem;
  opacity: .85;
}
.meta a { text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Tabellen-Checkliste */
.tbl-checklist {
  width: 100%;
  border-collapse: collapse;
  margin-top: .5rem;
}
.tbl-checklist th,
.tbl-checklist td {
  padding: .5rem .6rem;
  vertical-align: top;
  text-align: center;             /* Standard: zentriert */
}

/* 1. Spalte: linksbündig */
.tbl-checklist th:first-child,
.tbl-checklist td:first-child {
  text-align: left;
}

/* JA/NEIN – Icons als Pseudo-Elemente (ohne Umrandung) */
.tbl-checklist .yes, .tbl-checklist .no {
  position: relative;
  font-weight: 600;
}

/* Check (JA) – CI-Blau (brand-600) */
.tbl-checklist .yes::before {
  content: "";
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  margin-right: .25rem;
  background-color: var(--brand-600);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23000" d="M8.143 13.314l-3.6-3.6L3 11.257l5.143 5.143L17 7.543l-1.543-1.6z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23000" d="M8.143 13.314l-3.6-3.6L3 11.257l5.143 5.143L17 7.543l-1.543-1.6z"/></svg>');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  vertical-align: -2px;
}

/* Kreuz (NEIN) – Orange wie Kontakt-Button aus override/a11y (#C8511E) */
.tbl-checklist .no::before {
  content: "";
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  margin-right: .25rem;
  background-color: #C8511E; /* entspricht deinem Button (a11y-overrides) */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23000" d="M14.348 5.652l-3.348 3.348-3.348-3.348-1.652 1.652 3.348 3.348-3.348 3.348 1.652 1.652 3.348-3.348 3.348 3.348 1.652-1.652-3.348-3.348 3.348-3.348z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23000" d="M14.348 5.652l-3.348 3.348-3.348-3.348-1.652 1.652 3.348 3.348-3.348 3.348 1.652 1.652 3.348-3.348 3.348 3.348 1.652-1.652-3.348-3.348 3.348-3.348z"/></svg>');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  vertical-align: -2px;
}

/* Quellen inline & dezent */
.prose ul.sources-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: .5rem;
  padding-left: 0;
  list-style: none;
  font-size: .95rem;
  opacity: .85;
}
.prose ul.sources-inline li::marker { content: none; }

/* Externe Links – kleines "arrow-up-right"-Symbol */
.ext-link {
  position: relative;
  text-decoration: underline;
}
.ext-link::after {
  content:"";
  display:inline-block;
  width: .95em; height: .95em;
  margin-left: .25em;
  background-color: currentColor;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z"/></svg>');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  vertical-align: -2px;
  opacity: .9;
}

/* Globaler Link im Stil von .post .link (orange, Unterlinie, Chevron) */
.link-post{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
  color:#E95F24; text-decoration:none;
  border-bottom:1px solid rgba(233,95,36,.35); padding-bottom:2px;
}
.link-post:hover{ border-bottom-color:rgba(233,95,36,.6); }

/* Variante: Back-Link – Pfeil links, vor dem Text */
.link-post--back::before{
  content:""; display:inline-block; width:1em; height:1em; background-color:currentColor;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M15.41 7.41 10.83 12l4.58 4.59L14 18l-6-6 6-6z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M15.41 7.41 10.83 12l4.58 4.59L14 18l-6-6 6-6z"/></svg>');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  transform:translateX(0) scale(.96);
  margin-right:.25rem;
}
/* Quellen-Links in CI-Blau */
.prose ul.sources-inline a{
  color: var(--brand-600);
  text-decoration: underline;
}

/* Checkliste-Icons: nur das Icon sichtbar, Text separat als .sr-only */
.tbl-checklist .yes,
.tbl-checklist .no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* vorhandene ::before-Icons bleiben erhalten; kein margin-right nötig */
.tbl-checklist .yes::before,
.tbl-checklist .no::before {
  margin-right: 0;
}

/* Kacheln komplett klickbar */
.tile-link { display:block; color:inherit; text-decoration:none; border-radius:14px; }
.tile-link:hover { transform: translateY(-2px); }
.tile-link:focus-visible { outline:3px solid currentColor; outline-offset:4px; }

/* Blog-Teaser: gesamter Link füllt die Karte und richtet den Footer-Link unten aus */
article.post > .tile-link {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;              /* füllt die gesamte Kartenhöhe */
}

/* Der orange „Artikel lesen“-Link sitzt immer am Kartenboden */
article.post > .tile-link .link {
  margin-top: auto;
}

article.post h3 {margin-bottom:0;}

/* (optional) Wenn Karten im 3er-Grid stehen, sicherheitshalber die Karte selbst strecken */
.grid.grid-3 > article.post { display: flex; }


/* Optional: Icon angleichen */
.icon-circle .icon-tools { width:28px; height:28px; display:inline-block; }

  .quickfacts{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.35rem;text-align:center;font-size:.95rem;opacity:.9}
  .inline-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.75rem}
  .btn.btn-ghost{background:transparent;border:1px solid currentColor}


  .tile:hover,
.tile-link:hover,
.tile-link:focus-visible {
  transform: none !important;
}

/* Body-Scroll sperren, wenn Menü offen */
body.no-scroll { overflow: hidden; }

/* Hamburger -> X (über aria-expanded am Button) */
.nav-toggle { position: relative; }
/* Parameter zentral steuern */
.nav-toggle{ --gap:3px; --thick:2px; --w:22px; gap:0; } /* kein flex-gap! */
.nav-toggle .bar{
  width:var(--w); height:var(--thick);
  margin:var(--gap) 0;                 /* Abstand via margin */
  transform-origin:50% 50%;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ==== Mobile-Menü: weich ein-/ausblenden (ohne display) ==== */
.mobile-menu{
  /* Startzustand (zu) */
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;

  /* Dauer & Easing: HIER ändern */
  transition:
    transform .8s ease-in-out,
    opacity   .8s ease-in-out,
    visibility 0s linear .8s; /* Sichtbarkeit wird erst nach .8s „sichtbar“ geschaltet */
}

.mobile-menu.is-open{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .8s ease-in-out,
    opacity   .8s ease-in-out,
    visibility 0s; /* beim Öffnen ohne Delay */
}

/* Optional: Nur mobil animieren; auf Desktop bleibt das Overlay-Panel aus */
@media (min-width: 768px){
  .mobile-menu,
  .mobile-menu.is-open{
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}