/* =====================================================================
   HandwerkerCMS – Designstile, Titelbereich-Varianten & Bilder im Text
   Jeder Stil hält die Kontrastanforderungen nach WCAG 2.1 AA ein.
   ===================================================================== */

/* ---------- Vorschau-Hinweis ---------- */
.preview-bar { background: #1e3a8a; color: #fff; font-weight: 600; font-size: .95rem; }
.preview-bar .container { padding-block: .6rem; }

/* ---------- Bilder in Texten ---------- */
.md-figure { margin: 1.75rem 0; }
.md-figure img { border-radius: var(--radius); width: 100%; }
.md-figure figcaption, .md-gallery figcaption, .page-image figcaption { font-size: .93rem; color: var(--muted); margin-top: .5rem; }
.md-klein { max-width: 22rem; }
.md-breit { margin-inline: calc(-1 * min(4vw, 3rem)); }
@media (min-width: 44rem) {
  .md-links { float: left; width: 42%; margin: .3rem 1.75rem 1rem 0; }
  .md-rechts { float: right; width: 42%; margin: .3rem 0 1rem 1.75rem; }
}
.prose::after { content: ""; display: table; clear: both; }
.md-gallery { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .9rem; }
.md-gallery figure { margin: 0; }
.md-gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.md-gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .25s ease; }
.md-gallery a:hover img { transform: scale(1.03); }
.page-image { margin: 0 0 2rem; }
.page-image img { border-radius: var(--radius); width: 100%; max-height: 32rem; object-fit: cover; }

/* =====================================================================
   Titelbereich-Varianten
   ===================================================================== */
.hero-v-text .hero-inner, .hero-v-center .hero-inner, .hero-v-cover .hero-inner { grid-template-columns: 1fr; }
.hero-v-text .hero-text { max-width: 54rem; }
.hero-v-text h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); }

.hero-v-center { text-align: center; }
.hero-v-center .hero-text { max-width: 50rem; margin-inline: auto; }
.hero-v-center .lead { margin-inline: auto; }
.hero-v-center .hero-actions, .hero-v-center .hero-rating { justify-content: center; }
.hero-band { margin: clamp(2rem, 4vw, 3.5rem) 0 0; }
.hero-band img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 40rem) { .hero-band img { aspect-ratio: 4/3; } }

/* Großes Hintergrundbild – Abdunklung garantiert mind. 4,5:1 für weiße Schrift */
.hero-v-cover { position: relative; isolation: isolate; color: #fff; min-height: clamp(30rem, 72vh, 46rem); display: grid; align-items: center; background: #16181b; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 13, 15, .86) 0%, rgba(12, 13, 15, .7) 50%, rgba(12, 13, 15, .5) 100%); }
@media (max-width: 52rem) { .hero-shade { background: rgba(12, 13, 15, .72); } }
.hero-v-cover .hero-text { max-width: 42rem; }
.hero-v-cover h1, .hero-v-cover .hero-rating a { color: #fff; }
.hero-v-cover .lead { color: #ececec; }
.hero-v-cover .eyebrow { color: var(--primary-on-dark); }
.hero-v-cover .btn-outline { color: #fff; border-color: #fff; }
.hero-v-cover .btn-outline:hover { background: rgba(255, 255, 255, .12); }
.hero-v-cover .hero-rating .stars { color: #fbbf24; }
.hero-v-cover :focus-visible { outline-color: #fff; box-shadow: none; }
@media (forced-colors: active) { .hero-shade { background: Canvas; } }

/* =====================================================================
   Stil: Modern
   ===================================================================== */
.style-modern { --paper: #ffffff; --sand: #f4f5f7; --line: #e4e6ea; --line-strong: #7b818a; --muted: #545a63; --radius: 22px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 40px -20px rgba(16, 24, 40, .28); }
.style-modern .tape { display: none; }
.style-modern .site-header { box-shadow: 0 1px 0 var(--line); background: rgba(255, 255, 255, .96); }
.style-modern .btn, .style-modern .nav-toggle, .style-modern .filter-bar a { border-radius: 999px; }
.style-modern .btn { padding-inline: 1.45rem; }
.style-modern .site-nav a { border-radius: 999px; padding-inline: 1rem; }
.style-modern .site-nav a[aria-current="page"] { background: var(--sand); box-shadow: none; border-radius: 999px; color: var(--ink); }
.style-modern h1 { letter-spacing: -.04em; font-weight: 750; }
.style-modern h2 { letter-spacing: -.03em; }
.style-modern .hero { background: var(--paper); }
.style-modern .hero-card { border-radius: 48px; border: 0; }
.style-modern .hero-media img, .style-modern .hero-band img { border-radius: 32px; }
.style-modern .service-card { border-top: 0; border-color: transparent; box-shadow: var(--shadow); }
.style-modern .card-icon { border-radius: 50%; }
.style-modern .usp-band { background: var(--sand); color: var(--ink); }
.style-modern .stats dt { color: var(--muted); }
.style-modern .cta-section { background: var(--ink); color: #fff; }
.style-modern .site-footer { background: #111827; }
.style-modern .page-head { background: var(--sand); border-bottom: 0; }
@media (max-width: 62rem) { .style-modern .site-nav a, .style-modern .site-nav a[aria-current="page"] { border-radius: 12px; } }

/* =====================================================================
   Stil: Klassisch
   ===================================================================== */
.style-klassisch { --font-head: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  --paper: #fbf8f1; --sand: #f2ece0; --line: #d9cfbd; --line-strong: #7f7461; --radius: 6px; --radius-sm: 4px; }
.style-klassisch h1, .style-klassisch h2, .style-klassisch h3, .style-klassisch .h3 { font-weight: 700; letter-spacing: 0; }
.style-klassisch .tape { height: 7px; opacity: 1; background:
  linear-gradient(var(--primary), var(--primary)) top / 100% 3px no-repeat,
  linear-gradient(var(--primary), var(--primary)) bottom / 100% 1px no-repeat, var(--surface); }
.style-klassisch .brand-name { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; }
.style-klassisch .brand-mark { border-radius: 50%; font-family: var(--font-head); }
.style-klassisch .eyebrow { font-family: var(--font-head); font-variant: small-caps; text-transform: lowercase; letter-spacing: .14em; font-size: 1.05rem; font-weight: 700; }
.style-klassisch .hero { background: var(--paper); border-bottom: 1px solid var(--line); }
.style-klassisch .hero-card { border-radius: 50% 50% 8px 8px / 38% 38% 8px 8px; background: var(--sand); border-color: var(--line); }
.style-klassisch .hero-media img { border-radius: 999px 999px 8px 8px / 50% 50% 8px 8px; aspect-ratio: 1; }
.style-klassisch .section-head { flex-direction: column; align-items: center; text-align: center; }
.style-klassisch .section-head h2::after { content: ""; display: block; width: 4rem; height: 2px; background: var(--primary); margin: .8rem auto 0; }
.style-klassisch .service-card { border-top: 1px solid var(--line); text-align: center; }
.style-klassisch .card-icon { border-radius: 50%; background: transparent; border: 1px solid var(--primary-text); }
.style-klassisch .usp-band { background: var(--sand); color: var(--ink); border-block: 1px solid var(--line); }
.style-klassisch .usp-list .icon { background: transparent; color: var(--primary-text); border: 1px solid var(--primary-text); }
.style-klassisch .stats dt { color: var(--muted); }
.style-klassisch .review blockquote { font-family: var(--font-head); font-style: italic; font-size: 1.15rem; }
.style-klassisch .faq summary, .style-klassisch .form legend { font-family: var(--font-head); }
.style-klassisch .site-footer { background: #231f1b; }
.style-klassisch .site-footer h2 { font-family: var(--font-head); text-transform: none; letter-spacing: .02em; font-size: 1.2rem; }

/* =====================================================================
   Stil: Kraftvoll
   ===================================================================== */
.style-kraftvoll { --paper: #f2f2f0; --sand: #e7e7e3; --line: #cfcfca; --line-strong: #6f6f69; --radius: 0px; --radius-sm: 2px;
  --font-head: "Arial Black", "Helvetica Neue", Arial, system-ui, sans-serif; }
.style-kraftvoll h1, .style-kraftvoll h2 { text-transform: uppercase; font-weight: 900; letter-spacing: -.01em; }
.style-kraftvoll h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem); line-height: 1.04; }
.style-kraftvoll .btn { text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.style-kraftvoll .site-header { background: #16181b; box-shadow: none; }
.style-kraftvoll .brand, .style-kraftvoll .site-nav a { color: #fff; }
.style-kraftvoll .brand-name { text-transform: uppercase; letter-spacing: .02em; }
.style-kraftvoll .brand-tag { color: #cfcfcf; }
.style-kraftvoll .site-nav a { text-transform: uppercase; font-size: .92rem; letter-spacing: .05em; font-weight: 700; }
.style-kraftvoll .site-nav a:hover { background: #2a2d31; }
.style-kraftvoll .site-nav a[aria-current="page"] { color: var(--primary-on-dark); box-shadow: inset 0 -3px 0 var(--primary-on-dark); }
.style-kraftvoll .nav-toggle { background: transparent; color: #fff; border-color: #fff; }
.style-kraftvoll .site-header :focus-visible { outline-color: #fff; box-shadow: none; }
@media (max-width: 62rem) {
  .style-kraftvoll .site-nav a { border-bottom-color: #34373b; }
  .style-kraftvoll .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--primary-on-dark); }
}
.style-kraftvoll .tape { height: 12px; opacity: 1; background: repeating-linear-gradient(-45deg, var(--primary) 0 14px, #16181b 14px 28px); }
.style-kraftvoll .hero { background: #16181b; color: #fff; }
.style-kraftvoll .hero h1, .style-kraftvoll .hero-rating a { color: #fff; }
.style-kraftvoll .hero .lead { color: #e4e4e4; }
.style-kraftvoll .hero .eyebrow { color: var(--primary-on-dark); }
.style-kraftvoll .hero .btn-outline { color: #fff; border-color: #fff; }
.style-kraftvoll .hero .btn-outline:hover { background: #2a2d31; }
.style-kraftvoll .hero :focus-visible { outline-color: #fff; box-shadow: none; }
.style-kraftvoll .hero-card { background: #202327; border: 2px solid var(--primary); }
.style-kraftvoll .hero-card::before { background: repeating-linear-gradient(-45deg, var(--primary) 0 10px, transparent 10px 20px); border-radius: 0; }
.style-kraftvoll .hero-icon { color: var(--primary-on-dark); }
.style-kraftvoll .hero-media img, .style-kraftvoll .hero-band img { border-radius: 0; box-shadow: 14px 14px 0 var(--primary); }
.style-kraftvoll .section-head h2 { border-left: 8px solid var(--primary); padding-left: .8rem; }
.style-kraftvoll .service-card { border-top: 0; border-left: 6px solid var(--primary); }
.style-kraftvoll .card-icon { background: #16181b; color: var(--primary-on-dark); }
.style-kraftvoll .usp-band { background: var(--primary); color: var(--on-primary); }
.style-kraftvoll .usp-list .icon { background: var(--on-primary); color: var(--primary); }
.style-kraftvoll .stats dt { color: inherit; }
.style-kraftvoll .page-head { background: #16181b; color: #fff; border-bottom: 0; }
.style-kraftvoll .page-head h1 { color: #fff; }
.style-kraftvoll .page-head .lead { color: #e4e4e4; }
.style-kraftvoll .breadcrumbs a { color: #d4d4d4; }
.style-kraftvoll .breadcrumbs [aria-current] { color: #fff; }
.style-kraftvoll .breadcrumbs li + li::before { color: #a3a3a3; }
.style-kraftvoll .page-head :focus-visible { outline-color: #fff; box-shadow: none; }
.style-kraftvoll .site-footer { background: #0d0e10; }

/* =====================================================================
   Stil: Natur
   ===================================================================== */
.style-natur { --paper: #f6f5ef; --sand: #ebeadf; --line: #d6d4c4; --line-strong: #74725f; --ink: #1f241d; --ink-2: #363d33; --muted: #50574c;
  --radius: 26px; --radius-sm: 16px; --font-head: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif; }
.style-natur .tape { height: 14px; opacity: 1; background: radial-gradient(circle at 10px -4px, transparent 12px, var(--primary-tint) 13px) 0 0 / 20px 14px repeat-x; }
.style-natur .btn, .style-natur .nav-toggle, .style-natur .filter-bar a { border-radius: 999px; }
.style-natur .site-nav a { border-radius: 999px; }
.style-natur .site-nav a[aria-current="page"] { background: var(--sand); box-shadow: none; color: var(--ink); }
.style-natur h1, .style-natur h2 { font-weight: 800; letter-spacing: -.02em; }
.style-natur .hero { background: radial-gradient(ellipse at 85% 15%, var(--primary-soft), transparent 55%), var(--paper); }
.style-natur .hero-card { border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; }
.style-natur .hero-card::before { display: none; }
.style-natur .hero-media img { border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; aspect-ratio: 1; }
.style-natur .service-card { border-top: 0; }
.style-natur .card-icon { border-radius: 50%; }
.style-natur .usp-band { background: #2b3427; }
.style-natur .section-alt { background: var(--sand); }
.style-natur .site-footer { background: #232a20; }
.style-natur .page-head { background: var(--sand); border-bottom: 0; }
@media (max-width: 62rem) { .style-natur .site-nav a, .style-natur .site-nav a[aria-current="page"] { border-radius: 12px; } }

@media (prefers-reduced-motion: reduce) { .md-gallery img { transition: none; } }
.style-kraftvoll .hero-rating .stars { color: #fbbf24; }
body .hero.hero-v-cover { background: #16181b; color: #fff; }