/* ════════════════════════════════════════════════════════════
   Exalenca Theme — DSGVO-konform, lokale Fonts, keine externen Quellen
   ════════════════════════════════════════════════════════════ */

/* ─── Lokale Fonts ─────────────────────────────────────────── */
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400; font-display:swap; src:url('../Fonts/bricolage-400.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600; font-display:swap; src:url('../Fonts/bricolage-600.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700; font-display:swap; src:url('../Fonts/bricolage-700.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:800; font-display:swap; src:url('../Fonts/bricolage-800.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('../Fonts/hanken-400.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../Fonts/hanken-500.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('../Fonts/hanken-600.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../Fonts/hanken-700.woff2') format('woff2'); }

:root {
  --orange:#FF6A00; --orange-soft:#FF8B33; --orange-glow:#FFB877;
  --navy:#15336E; --navy-deep:#0C1E45; --green:#1FA463;
  --paper:#FBF8F3; --paper-warm:#F4EEE3; --ink:#14182B; --ink-soft:#4A4F63;
  --line:#E6DFD2; --white:#fff;
  --shadow-sm:0 2px 8px rgba(20,24,43,.06);
  --shadow-md:0 12px 32px rgba(20,24,43,.10);
  --shadow-lg:0 28px 60px rgba(20,24,43,.16);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Hanken Grotesk',sans-serif; background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,.display { font-family:'Bricolage Grotesque',sans-serif; line-height:1.02; letter-spacing:-.02em; font-weight:700; }
.wrap { max-width:1200px; margin:0 auto; padding:0 2rem; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }

/* ─── Logo ─────────────────────────────────────────── */
.logo { display:inline-flex; align-items:baseline; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.9rem; color:var(--navy); letter-spacing:-.04em; }
.logo .x { color:var(--orange); display:inline-block; transform:scaleX(1.15); margin:0 .02em; }
footer .logo { color:var(--white); }

/* ─── Topbar ─────────────────────────────────────────── */
.topbar { background:var(--navy-deep); color:rgba(255,255,255,.7); font-size:.82rem; padding:.5rem 0; }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; }
.topbar a:hover { color:var(--orange-glow); }
.topbar .tb-right { display:flex; gap:1.5rem; }

/* ─── Header / Nav ─────────────────────────────────── */
header { position:sticky; top:0; z-index:100; background:rgba(251,248,243,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; }
.nav-links { display:flex; gap:2.2rem; align-items:center; }
.nav-links a { font-weight:600; font-size:.95rem; color:var(--ink); position:relative; padding:.3rem 0; transition:color .2s; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--orange); transition:width .28s cubic-bezier(.4,0,.2,1); }
.nav-links a:hover,.nav-links a.active { color:var(--orange); }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }

.btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--orange); color:var(--white); font-weight:600; font-size:.92rem; padding:.7rem 1.4rem; border-radius:100px; transition:transform .2s,box-shadow .2s,background .2s; box-shadow:0 6px 18px rgba(255,106,0,.28); }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,106,0,.4); background:var(--orange-soft); }
.btn-ghost { background:transparent; color:var(--navy); box-shadow:none; border:1.5px solid var(--line); }
.btn-ghost:hover { background:var(--white); border-color:var(--navy); box-shadow:var(--shadow-sm); }

/* ─── Hero ─────────────────────────────────────────── */
.hero { position:relative; padding:5.5rem 0 5rem; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-30%; right:-10%; width:70vw; height:70vw; max-width:900px; max-height:900px; background:radial-gradient(circle at center,rgba(255,184,119,.55) 0%,rgba(255,138,51,.28) 30%,rgba(255,106,0,.05) 55%,transparent 72%); border-radius:50%; z-index:0; animation:sunPulse 8s ease-in-out infinite; }
@keyframes sunPulse { 0%,100%{transform:scale(1);opacity:.9;} 50%{transform:scale(1.06);opacity:1;} }
.hero .wrap { position:relative; z-index:2; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:1.4rem; }
.eyebrow::before { content:''; width:26px; height:2px; background:var(--green); }
.hero h1 { font-size:clamp(2.8rem,6vw,5rem); color:var(--navy-deep); font-weight:800; }
.hero p.lead { font-size:1.2rem; color:var(--ink-soft); max-width:30rem; margin:1.6rem 0 2.2rem; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-visual { position:relative; border-radius:28px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); background:linear-gradient(160deg,rgba(12,30,69,.15),rgba(255,106,0,.08)),linear-gradient(200deg,#8FB63F 0%,#B8D04A 30%,#4A90D9 100%); }
.hero-visual .sun { position:absolute; top:14%; right:16%; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,#fffbe8 0%,#ffe49b 50%,rgba(255,200,80,0) 75%); box-shadow:0 0 80px 40px rgba(255,225,150,.7); }
.hero-visual .field { position:absolute; bottom:0; left:0; right:0; height:42%; background:linear-gradient(180deg,rgba(180,208,74,0) 0%,#9DC23E 30%,#6FA02E 100%); }
.hero-visual .field::before { content:''; position:absolute; inset:0; background-image:radial-gradient(ellipse 8px 24px at 20% 60%,#E8D34A 40%,transparent 42%),radial-gradient(ellipse 7px 20px at 35% 75%,#E8D34A 40%,transparent 42%),radial-gradient(ellipse 9px 26px at 55% 55%,#F0DB55 40%,transparent 42%),radial-gradient(ellipse 6px 18px at 70% 78%,#E8D34A 40%,transparent 42%),radial-gradient(ellipse 8px 22px at 85% 64%,#F0DB55 40%,transparent 42%); opacity:.85; }
.hero-visual .tag { position:absolute; left:1.8rem; bottom:1.8rem; z-index:3; color:var(--white); font-family:'Bricolage Grotesque'; font-weight:700; font-size:2rem; text-shadow:0 2px 20px rgba(0,0,0,.4); letter-spacing:-.02em; }
.hero-visual .badge { position:absolute; top:1.5rem; left:1.5rem; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-radius:14px; padding:.7rem 1rem; font-size:.82rem; font-weight:600; color:var(--navy); box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.5rem; }
.badge .dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(31,164,99,.18); }

/* ─── Sections ─────────────────────────────────────── */
section.block { padding:4rem 0; }
.section-head { max-width:38rem; margin-bottom:3rem; }
.section-head h2 { font-size:clamp(2rem,4vw,3rem); color:var(--navy-deep); }
.section-head p { color:var(--ink-soft); font-size:1.1rem; margin-top:1rem; }

/* ─── Fluid Styled Content (migrierter Inhalt) ─────── */
.content-area { max-width:1000px; }
.content-area .frame { margin-bottom:2.5rem; }
.content-area h1,.content-area h2,.content-area h3 { color:var(--navy-deep); margin-bottom:1rem; }
.content-area h2 { font-size:1.9rem; }
.content-area h3 { font-size:1.4rem; }
.content-area p { margin-bottom:1rem; color:var(--ink-soft); font-size:1.05rem; }
.content-area a { color:var(--orange); font-weight:600; }
.content-area a:hover { text-decoration:underline; }
.content-area ul,.content-area ol { margin:0 0 1.2rem 1.4rem; color:var(--ink-soft); }
.content-area li { margin-bottom:.4rem; }
.content-area img { border-radius:14px; box-shadow:var(--shadow-md); }
.content-area table { width:100%; border-collapse:collapse; margin-bottom:1.5rem; }
.content-area th,.content-area td { padding:.7rem 1rem; border:1px solid var(--line); text-align:left; }
.content-area th { background:var(--paper-warm); font-weight:600; color:var(--navy); }

/* Content-Elemente in mehreren Spalten als Karten (z.B. ehemalige 3-Spalter) */
.content-area .frame-type-textmedia,
.content-area .frame-type-text { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:2rem; box-shadow:var(--shadow-sm); transition:transform .3s,box-shadow .3s; }
.content-area .frame-type-textmedia:hover,
.content-area .frame-type-text:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* ─── Kontakt ──────────────────────────────────────── */
.contact-card { background:var(--white); border:1px solid var(--line); border-radius:24px; padding:2.5rem; box-shadow:var(--shadow-sm); max-width:600px; }
.contact-row { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.contact-row:last-child { border:none; }
.contact-row .ci { color:var(--orange); font-size:1.2rem; flex-shrink:0; width:24px; }
.contact-row .ct strong { display:block; color:var(--navy); }
.contact-row .ct span { color:var(--ink-soft); font-size:.95rem; }

/* ─── Footer ───────────────────────────────────────── */
footer { background:var(--navy-deep); color:rgba(255,255,255,.65); padding:4rem 0 2rem; margin-top:2rem; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
footer h4 { color:var(--white); font-family:'Bricolage Grotesque'; font-size:1rem; margin-bottom:1.2rem; }
footer ul { list-style:none; }
footer li { margin-bottom:.6rem; }
footer a:hover { color:var(--orange-glow); }
.foot-bottom { display:flex; justify-content:space-between; padding-top:1.5rem; font-size:.85rem; }

@media (max-width:880px) {
  .hero-grid,.foot-grid { grid-template-columns:1fr; }
  .nav-links,.topbar { display:none; }
}

/* ════════════════════════════════════════════════════════════
   Ergänzungen für die Migration aus TYPO3 6.2
   ════════════════════════════════════════════════════════════ */

/* ─── Barrierefreiheit ─────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy-deep); color:var(--white); padding:.7rem 1.2rem; border-radius:0 0 10px 0; }
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, label.nav-toggle:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

/* ─── Servicenavigation in der Topbar ──────────────── */
.topbar .top-links { display:flex; gap:1.1rem; }
.topbar .top-links a.active { color:var(--orange-glow); }

/* ─── Burger-Menü (nur mobil sichtbar) ─────────────── */
.nav-toggle-cb { display:none; }
.nav-toggle { display:none; cursor:pointer; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { display:block; width:26px; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s, opacity .2s; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content:''; position:relative; }
.nav-toggle-bar::before { top:-8px; }
.nav-toggle-bar::after { top:6px; }

/* ─── Formular (EXT:form) ──────────────────────────── */
.content-area .form-group { margin-bottom:1.1rem; }
.content-area label { display:block; font-weight:600; color:var(--navy); margin-bottom:.35rem; font-size:.95rem; }
.content-area input[type=text], .content-area input[type=email], .content-area input[type=tel], .content-area textarea {
  width:100%; max-width:32rem; padding:.7rem .9rem; border:1.5px solid var(--line); border-radius:10px;
  font:inherit; color:var(--ink); background:var(--white); }
.content-area textarea { min-height:9rem; resize:vertical; }
.content-area input:focus, .content-area textarea:focus { border-color:var(--orange); outline:none; }
.content-area button, .content-area input[type=submit] {
  display:inline-flex; align-items:center; gap:.5rem; background:var(--orange); color:var(--white);
  font:inherit; font-weight:600; padding:.7rem 1.4rem; border:0; border-radius:100px; cursor:pointer;
  box-shadow:0 6px 18px rgba(255,106,0,.28); }
.content-area button:hover, .content-area input[type=submit]:hover { background:var(--orange-soft); }

/* ─── Suche (indexed_search) ───────────────────────── */
.tx-indexedsearch-form input[type=search], .tx-indexedsearch-searchbox input[type=text] {
  padding:.7rem .9rem; border:1.5px solid var(--line); border-radius:10px; font:inherit; }
.tx-indexedsearch-res { border-bottom:1px solid var(--line); padding:1rem 0; }

/* ─── Galerie-Feinschliff (ergänzt typo3/fluid-styled-content-css) ─── */
.ce-gallery img { border-radius:14px; box-shadow:var(--shadow-md); }
.ce-gallery figcaption { font-size:.88rem; color:var(--ink-soft); padding-top:.5rem; }
.ce-intext.ce-right .ce-gallery { margin-left:1.5rem; }
.ce-intext.ce-left .ce-gallery { margin-right:1.5rem; }

/* ─── Footer: dritte Spalte ────────────────────────── */
.foot-grid { grid-template-columns:2fr 1fr; }

/* ─── Mobil: Navigation nutzbar machen ─────────────── */
@media (max-width:880px) {
  .topbar { display:block; }
  .topbar .wrap { flex-direction:column; align-items:flex-start; gap:.35rem; }
  .topbar .tb-right { flex-wrap:wrap; gap:.9rem; }

  .nav-toggle { display:flex; }
  .nav-links {
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    padding:.5rem 2rem 1rem; }
  .nav-toggle-cb:checked ~ .nav-links { display:flex; }
  .nav-links a { width:100%; padding:.8rem 0; border-bottom:1px solid var(--line); }
  .nav-links a::after { display:none; }
  .nav { position:relative; flex-wrap:wrap; }
  .nav > .btn { display:none; }

  .content-area .frame-type-textmedia, .content-area .frame-type-text { padding:1.4rem; }
  .ce-gallery, .ce-right .ce-gallery, .ce-left .ce-gallery { float:none !important; margin:0 0 1rem !important; }
  .ce-column { float:none !important; margin-right:0 !important; }
  .foot-grid { grid-template-columns:1fr; }
  .foot-bottom { flex-direction:column; gap:.5rem; }
}

/* ════════════════════════════════════════════════════════════
   Original-Logo, zweistufiges Menü, Responsive-Ausbau
   ════════════════════════════════════════════════════════════ */

/* ─── Header mit Original-Logo ──────────────────────── */
header { background:#fff; }
.logo { display:inline-flex; align-items:center; flex-shrink:0; }
.logo img { display:block; width:auto; height:52px; max-width:100%; }

/* ─── Hauptnavigation mit Untermenü ─────────────────── */
.nav-links { position:relative; }
.nav-item { position:relative; }
.nav-item > a { display:inline-block; }

.subnav {
  position:absolute; top:100%; left:-1rem; min-width:19rem; z-index:120;
  display:flex; flex-direction:column; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-md); padding:.5rem 0; margin-top:.55rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s; }
.nav-item.has-sub:hover > .subnav,
.nav-item.has-sub:focus-within > .subnav { opacity:1; visibility:visible; transform:translateY(0); }
.subnav a { padding:.55rem 1.2rem; font-size:.9rem; font-weight:500; line-height:1.35; color:var(--ink); }
.subnav a::after { display:none; }
.subnav a:hover, .subnav a.active { color:var(--orange); background:var(--paper-warm); }
/* unsichtbare Brücke, damit das Dropdown beim Herüberfahren nicht schließt */
.nav-item.has-sub > .subnav::before { content:''; position:absolute; top:-.6rem; left:0; right:0; height:.6rem; }
.nav-item.has-sub > a::before { content:''; display:inline-block; width:0; height:0; margin-right:.4rem;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--orange);
  vertical-align:middle; }

/* ─── Inhalte: nie horizontal überlaufen ────────────── */
.content-area .frame { max-width:100%; }
.content-area .frame-type-html, .content-area .frame-type-table { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.content-area table { min-width:32rem; }
.content-area img { height:auto; }
.content-area a { overflow-wrap:anywhere; }

/* ─── Breakpoint 1150px: Container schmaler ─────────── */
@media (max-width:1150px) {
  .wrap { padding:0 1.5rem; }
  .nav-links { gap:1.5rem; }
  .hero-grid { gap:2.5rem; }
}

/* ─── Breakpoint 1000px: Tablet ─────────────────────── */
@media (max-width:1000px) {
  .nav-links { gap:1.1rem; }
  .nav-links a { font-size:.9rem; }
  .nav-cta { display:none; }
  .hero { padding:4rem 0 3.5rem; }
  .hero-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .hero-visual { aspect-ratio:1/1; }
  .logo img { height:46px; }
  .tb-claim { display:none; }
}

/* ─── Breakpoint 880px: Mobil, Burger-Menü ──────────── */
@media (max-width:880px) {
  .nav-links { gap:0; }
  .nav-item { width:100%; }
  .nav-item > a { width:100%; padding:.85rem 0; border-bottom:1px solid var(--line); }
  .nav-item.has-sub > a::before { display:none; }

  /* Untermenü mobil dauerhaft ausgeklappt und eingerückt */
  .subnav { position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; background:transparent; border:0; box-shadow:none;
    padding:.2rem 0 .6rem; margin:0 0 0 1rem; border-left:2px solid var(--line); }
  .subnav a { padding:.5rem .9rem; border:0; }

  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { aspect-ratio:16/10; }
  .hero h1 { font-size:clamp(2.1rem,8vw,3.2rem); }
  .hero p.lead { font-size:1.05rem; }
  section.block { padding:2.5rem 0; }
  .contact-card { padding:1.5rem; }
}

/* ─── Breakpoint 600px: Smartphone ──────────────────── */
@media (max-width:600px) {
  .wrap { padding:0 1.1rem; }
  .topbar { font-size:.78rem; }
  .topbar .tb-right { gap:.6rem 1rem; }
  .tb-mail { overflow-wrap:anywhere; }
  .logo img { height:40px; }
  .nav { padding:.8rem 0; }
  .hero { padding:2.5rem 0 2rem; }
  .eyebrow { font-size:.72rem; margin-bottom:1rem; }
  .hero-cta { gap:.6rem; }
  .hero-cta .btn { padding:.6rem 1.1rem; font-size:.88rem; }
  .hero-visual .tag { font-size:1.3rem; left:1rem; bottom:1rem; }
  .hero-visual .badge { font-size:.74rem; padding:.5rem .7rem; }
  .content-area .frame-type-textmedia, .content-area .frame-type-text { padding:1.1rem; border-radius:14px; }
  .content-area h2 { font-size:1.45rem; }
  .content-area h3 { font-size:1.2rem; }
  .content-area p { font-size:1rem; }
  .content-area table { min-width:24rem; font-size:.9rem; }
  .content-area th, .content-area td { padding:.5rem .6rem; }
  .contact-row { flex-direction:row; gap:.7rem; }
  footer { padding:2.5rem 0 1.5rem; }
  .foot-grid { gap:1.8rem; padding-bottom:2rem; }
}

/* ─── Sehr schmale Geräte ───────────────────────────── */
@media (max-width:380px) {
  .logo img { height:34px; }
  .content-area table { min-width:20rem; font-size:.85rem; }
}

/* ─── Druck ─────────────────────────────────────────── */
@media print {
  .topbar, .nav-toggle, .nav-links, .nav-cta, .hero-visual, .skip-link { display:none !important; }
  header { position:static; background:#fff; }
  body { background:#fff; }
  .content-area .frame-type-textmedia, .content-area .frame-type-text { box-shadow:none; border-color:#ccc; }
}

/* ════════════════════════════════════════════════════════════
   Annäherung an das Original-Layout: orange Menüleiste,
   ein Inhaltsrahmen statt Karten, Teaser-Reihe, kein Hero
   ════════════════════════════════════════════════════════════ */

:root { --orange-bar:#FF8001; --rule:#B1BEC6; --heading:#5A7081; }

/* ─── Kopf: Logozeile weiß, darunter orange Menüleiste ─── */
header { background:#fff; position:static; border-bottom:0; backdrop-filter:none; }
.logo-row { display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; }
.logo img { height:56px; }

.navbar { background:var(--orange-bar); }
.navbar > .wrap { padding:0 2rem; }
.navbar .nav-links { display:flex; gap:0; align-items:stretch; flex-wrap:wrap; }

.navbar .nav-item > a {
  display:block; color:#fff; text-transform:uppercase;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
  font-size:.88rem; letter-spacing:.04em; line-height:1;
  padding:.95rem 1.7rem; border-right:1px solid rgba(255,255,255,.6); }
.navbar .nav-item:first-child > a { border-left:1px solid rgba(255,255,255,.6); }
.navbar .nav-item > a::after { display:none; }
.navbar .nav-item > a:hover { background:rgba(0,0,0,.10); color:#fff; }
.navbar .nav-item > a.active { background:rgba(0,0,0,.16); color:#fff; }
.navbar .nav-item.has-sub > a::before { display:none; }

/* Untermenü unter der orangen Leiste */
.navbar .subnav { left:0; margin-top:0; border-radius:0 0 12px 12px; border-top:0; }
.navbar .subnav a { text-transform:none; }

/* ─── Inhalt: ein Rahmen wie im Original, keine Karten ─── */
section.block { padding:1.8rem 0 3rem; }

.content-area {
  max-width:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 1.4rem;
  align-items:start;
  background:#fff; border:1px solid var(--rule); border-radius:6px;
  padding:1.8rem 2rem; }
.content-area > .frame { grid-column:1 / -1; margin-bottom:1.4rem; }
.content-area > .frame:last-child { margin-bottom:0; }

/* Karten-Optik der Einzelelemente zurücknehmen */
.content-area .frame-type-textmedia,
.content-area .frame-type-text {
  background:none; border:0; border-radius:0; padding:0; box-shadow:none; transform:none; }
.content-area .frame-type-textmedia:hover,
.content-area .frame-type-text:hover { transform:none; box-shadow:none; }

/* Teaser-Reihe (layout 1) — drei Spalten wie auf der alten Startseite */
.content-area > .frame-layout-1 {
  grid-column:auto; margin-bottom:0;
  border:1px solid var(--rule); border-radius:4px; padding:0 0 1rem; }
.content-area > .frame-layout-1 > header,
.content-area > .frame-layout-1 > .ce-headline { margin:0; }
.content-area > .frame-layout-1 h2 {
  background:var(--paper-warm); border-bottom:1px solid var(--rule);
  margin:0 0 .9rem; padding:.55rem .9rem; font-size:1.05rem; }
.content-area > .frame-layout-1 h2 a { color:var(--heading); font-weight:700; }
.content-area > .frame-layout-1 .ce-bodytext,
.content-area > .frame-layout-1 p { padding:0 .9rem; }
.content-area > .frame-layout-1 p { margin-bottom:.5rem; }

/* Typografie näher am Original */
.content-area h2 { color:var(--heading); font-size:1.5rem; }
.content-area h3 { color:var(--heading); font-size:1.2rem; }
.content-area h2 a, .content-area h3 a { color:var(--heading); }
.content-area h2 a:hover, .content-area h3 a:hover { color:var(--orange); }
.content-area p { font-size:1rem; color:var(--ink); margin-bottom:.85rem; }
.content-area a { color:var(--heading); font-weight:600; }
.content-area a:hover { color:var(--orange); }
.content-area img { border-radius:4px; box-shadow:none; border:1px solid var(--rule); }
.ce-gallery img { border-radius:4px; box-shadow:none; }

/* ─── Kontaktbereich kompakter ──────────────────────── */
#kontakt.block { padding-top:0; padding-bottom:2.5rem; }

/* ─── Responsive ────────────────────────────────────── */
@media (max-width:1000px) {
  .logo-row { padding:.9rem 1.5rem; }
  .navbar > .wrap { padding:0 1.5rem; }
  .navbar .nav-item > a { padding:.85rem 1.1rem; font-size:.82rem; }
  .content-area { padding:1.4rem 1.5rem; grid-template-columns:repeat(2,1fr); }
}

@media (max-width:880px) {
  .nav-toggle { display:flex; }
  .navbar { display:none; }
  .nav-toggle-cb:checked ~ .navbar { display:block; }
  .navbar .nav-links { display:block; }
  .navbar .nav-item > a { border:0; border-bottom:1px solid rgba(255,255,255,.35); padding:.85rem 0; }
  .navbar .nav-item:first-child > a { border-left:0; }
  .navbar .subnav { background:rgba(0,0,0,.12); margin:0; border-left:0; border-radius:0; padding:.3rem 0 .5rem; }
  .navbar .subnav a { color:#fff; padding:.5rem 0 .5rem 1.2rem; }
  .navbar .subnav a:hover, .navbar .subnav a.active { background:rgba(0,0,0,.18); color:#fff; }
  .content-area { grid-template-columns:1fr; padding:1.2rem 1.2rem; }
  .content-area > .frame-layout-1 { grid-column:1 / -1; }
}

@media (max-width:600px) {
  .logo-row { padding:.75rem 1.1rem; }
  .navbar > .wrap { padding:0 1.1rem; }
  .content-area { padding:1rem; border-radius:4px; }
  .content-area h2 { font-size:1.3rem; }
  #kontakt.block { padding-bottom:1.8rem; }
}

/* ─── Breite an das Original (990 px) angenähert ────── */
.wrap { max-width:1060px; }
.content-area { padding:1.5rem 1.6rem; }
.content-area > .frame { margin-bottom:1rem; }
.content-area > .frame-layout-1 { align-self:stretch; }
.content-area .ce-textpic { margin-bottom:.2rem; }
.content-area h2 { font-size:1.35rem; margin-bottom:.7rem; }
.content-area h3 { font-size:1.15rem; }
.content-area p { line-height:1.65; }

/* ─── Fußzeile: Kontaktdaten ohne Überschrift ───────── */
footer { margin-top:0; }
.foot-contact { list-style:none; }
.foot-contact li { margin-bottom:.35rem; }
.foot-contact li strong { color:var(--white); font-weight:600; }
.foot-contact li.sp { margin-top:.9rem; }

/* ─── Topbar entfernt: Logozeile etwas kompakter ─────── */
.logo-row { padding:1.1rem 2rem .9rem; }

/* ─── Kopfbanner: volle Breite, ohne Abstand zur Menüleiste ─── */
.banner { position:relative; width:100%; line-height:0; }
.banner picture, .banner img { display:block; width:100%; }
.banner img {
  height:clamp(170px, 23vw, 340px);
  object-fit:cover; object-position:50% 62%; }

.banner-text {
  position:absolute; inset:0; display:flex; align-items:center;
  line-height:1.1; pointer-events:none; }
.banner-text .wrap { width:100%; }
.banner-text span {
  display:inline-block;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(1.6rem, 3.6vw, 3.2rem);
  letter-spacing:-.02em; color:#fff;
  text-shadow:0 2px 14px rgba(12,30,69,.55), 0 1px 3px rgba(12,30,69,.45); }

/* Inhalt beginnt direkt unter dem Banner */
section.block { padding-top:1.6rem; }

@media (max-width:600px) {
  .banner img { object-position:42% 62%; }
  .banner-text span { text-shadow:0 2px 10px rgba(12,30,69,.65), 0 1px 3px rgba(12,30,69,.5); }
}

/* ─── Banner: Lesbarkeit des Textes sichern ─────────── */
.banner::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(12,30,69,.52) 0%, rgba(12,30,69,.30) 34%, rgba(12,30,69,.06) 58%, transparent 72%); }
.banner-text { z-index:2; }

@media (max-width:880px) {
  .banner img { object-position:52% 30%; }
  .banner::after {
    background:linear-gradient(160deg, rgba(12,30,69,.55) 0%, rgba(12,30,69,.34) 45%, rgba(12,30,69,.10) 80%, transparent 100%); }
}

@media (max-width:600px) {
  .banner img { height:clamp(140px, 34vw, 190px); object-position:52% 28%; }
}

/* ─── Banner: Text unten, Sonne sichtbar, an den Inhalt angrenzend ─── */
.banner img {
  height:clamp(200px, 27vw, 400px);
  object-position:50% 15%; }

.banner-text { align-items:flex-end; padding-bottom:1.1rem; }

/* Verlauf von unten, damit der Text über den Blüten lesbar bleibt */
.banner::after {
  background:
    linear-gradient(to top, rgba(12,30,69,.62) 0%, rgba(12,30,69,.30) 32%, transparent 62%),
    linear-gradient(100deg, rgba(12,30,69,.30) 0%, transparent 55%); }

/* Kein Freiraum zwischen Banner und Inhalt, keine runden Ecken */
section.block { padding-top:0; }
.content-area { border-radius:0; }

@media (max-width:880px) {
  .banner img { object-position:52% 14%; }
  .banner::after {
    background:
      linear-gradient(to top, rgba(12,30,69,.66) 0%, rgba(12,30,69,.32) 36%, transparent 66%),
      linear-gradient(150deg, rgba(12,30,69,.28) 0%, transparent 60%); }
}

@media (max-width:600px) {
  .banner img { height:clamp(165px, 40vw, 220px); object-position:52% 13%; }
  .banner-text { padding-bottom:.8rem; }
  .content-area { border-radius:0; }
}

/* ─── Inhaltsrahmen läuft bis zur Fußzeile ──────────── */
section.block { padding-bottom:0; }
.content-area { border-bottom:0; }

/* ════════════════════════════════════════════════════════════
   MOBILES MENÜ — verbindliche Fassung, setzt frühere Regeln zurück
   ════════════════════════════════════════════════════════════ */
@media (max-width:880px) {

  header { position:relative; }
  .logo-row { position:relative; z-index:160; }

  /* Burger: Trefferfläche und Zustandsanzeige */
  .nav-toggle { display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; margin-right:-.4rem; cursor:pointer; }
  .nav-toggle-bar { position:relative; transition:background-color .2s; }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
    width:26px; height:3px; background:var(--navy); border-radius:3px;
    transition:transform .25s ease, opacity .2s ease; }
  .nav-toggle-bar::before { top:-8px; }
  .nav-toggle-bar::after  { top:5px; }
  .nav-toggle-cb:checked ~ .logo-row .nav-toggle .nav-toggle-bar,
  .logo-row:has(~ .nav-toggle-cb:checked) .nav-toggle-bar { background:transparent; }
  .nav-toggle-cb:checked ~ .navbar { display:block; }

  /* Menü legt sich über den Inhalt statt ihn zu verschieben */
  .navbar {
    display:none; position:absolute; left:0; right:0; top:100%; z-index:150;
    background:var(--orange-bar); box-shadow:0 18px 40px rgba(12,30,69,.28);
    max-height:calc(100vh - 96px); overflow-y:auto;
    -webkit-overflow-scrolling:touch; }
  .navbar > .wrap { padding:.4rem 1.4rem .8rem; max-width:none; }

  /* Ebene 1 */
  .navbar .nav-links {
    position:static; display:block; opacity:1; visibility:visible;
    background:none; border:0; box-shadow:none; padding:0; margin:0;
    flex-direction:column; gap:0; transform:none; }
  .navbar .nav-item { width:100%; position:static; }
  .navbar .nav-item > a {
    display:block; width:100%; color:#fff; background:none;
    text-transform:uppercase; font-size:.95rem; letter-spacing:.04em;
    padding:.95rem .2rem; min-height:48px; line-height:1.3;
    border:0; border-bottom:1px solid rgba(255,255,255,.4); border-radius:0; }
  .navbar .nav-item:first-child > a { border-left:0; }
  .navbar .nav-item:last-child > a { border-bottom:0; }
  .navbar .nav-item > a:hover,
  .navbar .nav-item > a.active { background:rgba(120,52,0,.28); color:#fff; }

  /* Ebene 2 — dauerhaft ausgeklappt, dunkler abgesetzt */
  .navbar .subnav {
    position:static; display:block; opacity:1; visibility:visible; transform:none;
    min-width:0; border:0; border-radius:0; box-shadow:none;
    background:rgba(120,52,0,.30); margin:0; padding:.25rem 0 .4rem; }
  .navbar .subnav::before { display:none; }
  .navbar .subnav a {
    display:block; color:#fff; background:none;
    text-transform:none; font-size:.92rem; font-weight:500;
    padding:.7rem .2rem .7rem 1.5rem; min-height:44px; line-height:1.35;
    border:0; border-radius:0; }
  .navbar .subnav a:hover,
  .navbar .subnav a.active { background:rgba(120,52,0,.34); color:#fff; }
}

/* ─── Kopfbereich über den Inhalt stapeln + Burger zu X ─── */
@media (max-width:880px) {
  header { position:relative; z-index:200; }
  .navbar { z-index:1; }

  .logo-row:has(~ .nav-toggle-cb:checked) .nav-toggle-bar { background:transparent; }
  .logo-row:has(~ .nav-toggle-cb:checked) .nav-toggle-bar::before {
    transform:translateY(8px) rotate(45deg); }
  .logo-row:has(~ .nav-toggle-cb:checked) .nav-toggle-bar::after {
    transform:translateY(-5px) rotate(-45deg); }
}

/* ─── Fluid Styled Content nutzt <header> für Überschriften.
       Die Kopfbereich-Regeln dürfen dort nicht greifen. ─── */
.content-area header,
.content-area header * {
  position:static; z-index:auto; }
.content-area header {
  background:none; border:0; box-shadow:none; backdrop-filter:none;
  padding:0; margin:0 0 .2rem; }

/* ════════════════════════════════════════════════════════════
   KOPFZEILE — Logo und Menü in einer Leiste, Menü rechts
   (verbindliche Fassung, ersetzt die vorherige Logozeile)
   ════════════════════════════════════════════════════════════ */
header { position:relative; z-index:200; background:var(--orange-bar);
  border-bottom:0; backdrop-filter:none; }
.logo-row { display:none; }

.navbar { position:relative; display:block; background:var(--orange-bar);
  max-height:none; overflow:visible; box-shadow:none; }
.navbar > .navrow { display:flex; align-items:stretch; justify-content:space-between;
  gap:1rem; padding:0 2rem; min-height:66px; }

/* Logo sitzt auf weißer Fläche in der Leiste (die Datei hat keinen Alphakanal) */
.navbar .logo { display:flex; align-items:center; flex-shrink:0;
  background:#fff; padding:.45rem 1.3rem; margin:0; }
.navbar .logo img { display:block; height:46px; width:auto; }

/* Menü rechts anliegend */
.navbar .nav-links { display:flex; align-items:stretch; gap:0;
  margin-left:auto; position:static; }
.navbar .nav-item { display:flex; align-items:stretch; position:relative; }
.navbar .nav-item > a { display:flex; align-items:center;
  color:#fff; text-transform:uppercase;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
  font-size:.88rem; letter-spacing:.04em; line-height:1;
  padding:0 1.5rem; border-left:1px solid rgba(255,255,255,.6); border-right:0; }
.navbar .nav-item:last-child > a { border-right:1px solid rgba(255,255,255,.6); }
.navbar .nav-item > a:hover { background:rgba(0,0,0,.10); }
.navbar .nav-item > a.active { background:rgba(0,0,0,.16); }

/* Untermenü an der rechten Kante seines Punktes ausrichten */
.navbar .subnav { left:auto; right:0; margin-top:0;
  border-radius:0 0 12px 12px; border-top:0; }

@media (max-width:1000px) {
  .navbar > .navrow { padding:0 1.5rem; min-height:60px; }
  .navbar .nav-item > a { padding:0 1rem; font-size:.82rem; }
  .navbar .logo img { height:40px; }
}

/* ─── Mobil: Leiste bleibt, Menüliste klappt darunter auf ─── */
@media (max-width:880px) {

  .navbar { display:block; position:relative; }
  .navbar > .navrow { align-items:center; min-height:58px; padding:0 1.1rem; gap:.6rem; }
  .navbar .logo { padding:.35rem .9rem; }
  .navbar .logo img { height:36px; }

  /* Burger jetzt auf orangem Grund -> weiß */
  .nav-toggle { display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; flex-shrink:0; margin-left:auto; cursor:pointer; }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
    background:#fff; width:26px; height:3px; border-radius:3px;
    transition:transform .25s ease, background-color .2s ease; }
  .nav-toggle-cb:checked ~ .navbar .nav-toggle .nav-toggle-bar { background:transparent; }
  .nav-toggle-cb:checked ~ .navbar .nav-toggle .nav-toggle-bar::before {
    transform:translateY(8px) rotate(45deg); }
  .nav-toggle-cb:checked ~ .navbar .nav-toggle .nav-toggle-bar::after {
    transform:translateY(-5px) rotate(-45deg); }

  /* Menüliste als Overlay unter der Leiste */
  .navbar .nav-links {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:150;
    flex-direction:column; align-items:stretch; margin:0; padding:.3rem 1.1rem .8rem;
    background:var(--orange-bar); box-shadow:0 18px 40px rgba(12,30,69,.28);
    max-height:calc(100vh - 96px); overflow-y:auto; }
  .nav-toggle-cb:checked ~ .navbar .nav-links { display:flex; }

  .navbar .nav-item { display:block; width:100%; position:static; }
  .navbar .nav-item > a { display:block; width:100%; padding:.95rem .2rem;
    min-height:48px; line-height:1.3; font-size:.95rem;
    border:0; border-bottom:1px solid rgba(255,255,255,.4); }
  .navbar .nav-item:last-child > a { border-right:0; border-bottom:0; }

  .navbar .subnav { position:static; display:block; opacity:1; visibility:visible;
    transform:none; min-width:0; border:0; border-radius:0; box-shadow:none;
    background:rgba(120,52,0,.30); margin:0; padding:.25rem 0 .4rem; }
  .navbar .subnav a { display:block; color:#fff; text-transform:none;
    font-size:.92rem; font-weight:500; padding:.7rem .2rem .7rem 1.5rem;
    min-height:44px; line-height:1.35; border:0; }
}