.mod_visitors .invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
	width:0px;
	height:0px;
}
.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

/* agentur123: Editorial-Design (2026). Gilt für Layouts mit der Body-Klasse .design-neu.
   Akzentfarbe je Domain über .site-<kürzel>. Kein Framework, kein JavaScript nötig. */

@font-face { font-family: 'Inter'; src: url(/files/themes/agentur123/fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(/files/themes/agentur123/fonts/fraunces-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(/files/themes/agentur123/fonts/fraunces-latin-wght-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
    --papier: #fbf8f3;
    --flaeche: #ffffff;
    --tinte: #1d1b19;
    --tinte-2: #57524c;
    --linie: #e7e1d8;
    --akzent: #b54d14;
    --akzent-hell: #fbe9dd;
    --akzent-tief: #8f3a10;
    --radius: 18px;
    --schatten: 0 1px 2px rgba(29, 27, 25, .04), 0 8px 24px -12px rgba(29, 27, 25, .18);
    --breite: 1180px;
    --lese: 70ch;
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.site-tshirt    { --akzent: #1f5fd1; --akzent-hell: #e3ecfb; --akzent-tief: #143f8c; }
.site-schuhe    { --akzent: #b4232a; --akzent-hell: #f8e2e2; --akzent-tief: #7c161b; }
.site-strom     { --akzent: #18793f; --akzent-hell: #dff2e6; --akzent-tief: #125c31; }
.site-tagesgeld { --akzent: #1e3a6e; --akzent-hell: #e2e8f3; --akzent-tief: #13264a; }
.site-kinderschuhe { --akzent: #6b3fa0; --akzent-hell: #efe7f8; --akzent-tief: #4c2a75; }
.site-baumarkt { --akzent: #0e6b73; --akzent-hell: #dff0f1; --akzent-tief: #094b51; }
.site-nagelpilz { --akzent: #4f7a5c; --akzent-hell: #e6efe8; --akzent-tief: #35553f; }

/* Grundlage */
.design-neu *, .design-neu *::before, .design-neu *::after { box-sizing: border-box; }
.design-neu {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font: 400 1.0625rem/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { .design-neu { font-size: 1.125rem; } }
.design-neu img { max-width: 100%; height: auto; display: block; }
.design-neu a { color: var(--akzent-tief); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.design-neu a:hover { color: var(--akzent); }
.design-neu h1, .design-neu h2, .design-neu h3 {
    font-family: var(--serif); font-weight: 560; letter-spacing: -.015em; line-height: 1.12;
    color: var(--tinte); text-wrap: balance; font-variation-settings: 'SOFT' 50, 'WONK' 0;
}
.design-neu h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem); margin: 0 0 .45em; }
.design-neu h2 { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); margin: 0 0 .6em; }
.design-neu h3 { font-size: 1.3rem; margin: 1.6em 0 .5em; }
.design-neu p { margin: 0 0 1.05em; text-wrap: pretty; }
.design-neu ul, .design-neu ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.design-neu li { margin: .35em 0; }
.design-neu li::marker { color: var(--akzent); }
.design-neu strong { font-weight: 640; }
.design-neu .nobr { white-space: nowrap; }
.design-neu .invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.design-neu #wrapper { overflow-x: clip; }
.design-neu #header > .inside, .design-neu #container, .design-neu #footer > .inside {
    max-width: var(--breite); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px);
}

/* Kopf: USP-Leiste scrollt weg, weiße Navigationsleiste bleibt fix (sticky mit negativem top = Höhe der USP-Leiste) */
.design-neu { --usp-h: 36px; --kopf-h: 76px; }
.design-neu #header { position: sticky; top: calc(-1 * var(--usp-h)); z-index: 30; background: none; border: 0; }
.design-neu #header > .inside { max-width: none; padding: 0; }

.usp { height: var(--usp-h); background: var(--tinte); color: #efe9e1; font-size: .8rem; letter-spacing: .01em; }
.design-neu .usp ul { list-style: none; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); height: 100%; max-width: var(--breite); display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 56px); }
.design-neu .usp li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.usp svg { width: 15px; height: 15px; color: #f2a679; stroke-width: 3; }
@media (max-width: 760px) {
    .design-neu .usp ul { position: relative; padding: 0; }
    .design-neu .usp li { position: absolute; inset: 0; justify-content: center; opacity: 0; animation: usp-wechsel 12s infinite; }
    .design-neu .usp li:nth-child(2) { animation-delay: 4s; }
    .design-neu .usp li:nth-child(3) { animation-delay: 8s; }
}
@keyframes usp-wechsel { 0%, 100% { opacity: 0; transform: translateY(4px); } 4%, 29% { opacity: 1; transform: none; } 33% { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .design-neu .usp li { animation: none; } .design-neu .usp li:first-child { opacity: 1; } }

.kopf-huelle { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--linie); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.kopf { position: relative; max-width: var(--breite); margin: 0 auto; height: var(--kopf-h); padding: 0 clamp(20px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 28px; transition: height .25s ease; }
/* Beim Scrollen kompakter mit Schatten (Scroll-getriebene Animation, ohne JavaScript; ältere Browser behalten die volle Höhe) */
@supports (animation-timeline: scroll()) {
    .kopf-huelle { animation: kopf-schatten linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    .kopf { animation: kopf-kompakt linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
}
@keyframes kopf-schatten { to { box-shadow: 0 10px 30px -18px rgba(29, 27, 25, .45); border-bottom-color: transparent; } }
@keyframes kopf-kompakt { to { height: 64px; } }

.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte) !important; }
.marke__signet { display: block; width: 44px; height: 44px; flex: none; transition: transform .3s ease; }
.marke:hover .marke__signet { transform: scale(1.04); }
.marke__signet svg { width: 100%; height: 100%; }
.marke__text { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--serif); font-size: 1.32rem; line-height: 1; letter-spacing: -.015em; font-weight: 600; white-space: nowrap; }
.marke__text em { font-style: italic; font-weight: 400; color: var(--akzent); }
.marke__zahl { align-self: center; font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: 4px 6px; border-radius: 6px; background: var(--akzent); color: #fff; }

.design-neu .navi { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.design-neu .navi > li, .design-neu .mega li { margin: 0; }
.navi > li { position: relative; display: flex; align-items: center; }
@media (min-width: 901px) { .navi > li.navi__mega { position: static; } }
.navi > li > a { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: .95rem; font-weight: 550; color: var(--tinte); text-decoration: none; padding: 10px 14px; }
.navi > li > a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--akzent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.navi > li > a:hover::after, .navi > li:focus-within > a::after { transform: scaleX(1); }
.navi > li > a:hover { color: var(--akzent-tief); }
.navi > li > a svg { width: 15px; height: 15px; transition: transform .2s ease; }
.navi__mega:hover > a svg, .navi__mega:focus-within > a svg { transform: rotate(180deg); }
.navi .navi__cta { margin-left: 12px; }
.navi .navi__cta > a { background: var(--tinte); color: #fff; padding: 11px 20px; font-weight: 600; border-radius: 10px; transition: background .2s ease; }
.navi .navi__cta > a::after { display: none; }
.navi .navi__cta > a:hover { background: var(--akzent-tief); color: #fff; }

.mega {
    position: absolute; top: 100%; left: 50%; width: min(760px, 92vw);
    display: grid; grid-template-columns: 1fr 200px; gap: 22px; padding: 18px;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 0 0 14px 14px; border-top: 0;
    box-shadow: 0 30px 60px -24px rgba(29, 27, 25, .4);
    opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.navi__mega:hover .mega, .navi__mega:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mega__kachel { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--tinte) !important; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.mega__kachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; transition: transform .3s ease; }
.mega__kachel:hover img { transform: scale(1.03); }
.mega__kachel:hover span { color: var(--akzent-tief); }
.mega__seite { border-left: 1px solid var(--linie); padding-left: 20px; display: flex; flex-direction: column; }
.mega__titel { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); margin: 2px 0 10px; }
.design-neu .mega__seite ul { list-style: none; padding: 0; margin: 0 0 14px; }
.design-neu .mega__seite li { margin: 0 0 8px; font-size: .92rem; }
.mega__seite li a { color: var(--tinte); text-decoration: none; }
.mega__seite li a:hover { color: var(--akzent-tief); text-decoration: underline; }
.mega__alle { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 650; color: var(--akzent-tief) !important; text-decoration: none; }
.mega__alle svg { width: 15px; height: 15px; }

.navi-schalter, .navi-knopf { display: none; }
@media (max-width: 900px) {
    .design-neu { --kopf-h: 64px; }
    .marke__signet { width: 34px; height: 34px; }
    .marke__text { font-size: 1.12rem; }
    .navi-knopf { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); cursor: pointer; }
    .navi-knopf svg { width: 22px; height: 22px; }
    .design-neu .navi { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px clamp(20px, 4vw, 40px) 20px; background: var(--flaeche); border-bottom: 1px solid var(--linie); box-shadow: 0 30px 60px -24px rgba(29, 27, 25, .4); max-height: calc(100vh - 64px); overflow-y: auto; }
    .navi > li { display: block; }
    .navi > li > a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 1.05rem; }
    .navi > li > a::after { display: none; }
    .navi-schalter:checked ~ .navi { display: flex; }
    .navi .navi__cta { margin: 16px 0 0; }
    .navi .navi__cta > a { justify-content: center; border: 0; }
    .mega { position: static; width: auto; transform: none; opacity: 1; visibility: visible; display: block; padding: 6px 0 4px; border: 0; box-shadow: none; background: none; }
    .navi__mega > a svg { display: none; }
    .mega__kacheln, .mega__titel { display: none; }
    .mega__seite { border: 0; padding: 0 0 0 12px; }
    .design-neu .mega__seite li { font-size: .98rem; margin: 10px 0; }
}

/* Inhalt allgemein */
.design-neu #container { padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 96px); }
.design-neu .mod_article > * + * { margin-top: clamp(40px, 6vw, 80px); }
.abschnitt { max-width: var(--lese); }
.abschnitt > h2, .abschnitt, .faq { scroll-margin-top: 96px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent-tief); margin-bottom: 18px; }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--akzent); }
.lead { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.55; color: var(--tinte-2); max-width: 60ch; }
.meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8rem; color: var(--tinte-2); opacity: .85; margin-top: 18px; }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta svg { width: 14px; height: 14px; color: var(--tinte-2); }

/* Startseite: Hero */
.hero { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr .9fr; } .hero__bild { aspect-ratio: 1 / 1; } }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--akzent); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.knopf { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 1rem; text-decoration: none !important; transition: transform .15s ease, background .15s ease; }
.knopf svg { width: 18px; height: 18px; }
.knopf--voll { background: var(--akzent); color: #fff !important; }
.knopf--voll:hover { background: var(--akzent-tief); transform: translateY(-1px); }
.knopf--rand { border: 1.5px solid var(--tinte); color: var(--tinte) !important; }
.knopf--rand:hover { background: var(--tinte); color: #fff !important; }
.hero__bild { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) * 1.6); overflow: hidden; background:
    radial-gradient(120% 90% at 85% 10%, var(--akzent-hell) 0, transparent 60%),
    linear-gradient(160deg, var(--akzent) 0%, var(--akzent-tief) 100%); box-shadow: var(--schatten); }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__platzhalter { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.9); }
.hero__platzhalter svg { width: 34%; height: auto; stroke-width: 1.2; }
.hero__quelle { margin: 10px 2px 0; font-size: .78rem; color: var(--tinte-2); }
.hero__notiz { position: absolute; left: 18px; right: 18px; bottom: 18px; background: rgba(255,255,255,.94); border-radius: 14px; padding: 14px 16px; font-size: .9rem; line-height: 1.4; color: var(--tinte); box-shadow: var(--schatten); }
.hero__notiz strong { display: block; font-family: var(--serif); font-size: 1.05rem; }
.vertrauen { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: .9rem; color: var(--tinte-2); }
.vertrauen span { display: inline-flex; align-items: center; gap: 8px; }
.vertrauen svg { width: 18px; height: 18px; color: var(--akzent); }

/* Seitenbild unter dem Seitenkopf */
.seitenbild { margin: clamp(24px, 4vw, 40px) 0 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 7; box-shadow: var(--schatten); }
.seitenbild img { width: 100%; height: 100%; object-fit: cover; }
.ratgeber .seitenkopf:has(.seitenbild) { max-width: none; }
@media (max-width: 760px) { .seitenbild { aspect-ratio: 4 / 3; } }

/* Tabellen: Desktop Tabelle, mobil Karten */
.tabelle { margin: 1.4em 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.abschnitt:has(.tabelle) { max-width: none; }
.tabelle table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.tabelle th { text-align: left; font-size: .78rem; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); background: color-mix(in srgb, var(--akzent-hell) 55%, var(--flaeche)); padding: 14px 18px; }
.tabelle td { padding: 16px 18px; border-top: 1px solid var(--linie); vertical-align: top; }
.tabelle td:first-child { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; white-space: nowrap; }
.tabelle tr:hover td { background: color-mix(in srgb, var(--akzent-hell) 30%, transparent); }
@media (max-width: 760px) {
    .tabelle { background: none; border: 0; box-shadow: none; overflow: visible; }
    .tabelle thead { display: none; }
    .tabelle tr { display: block; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 6px 18px 12px; margin-bottom: 14px; box-shadow: var(--schatten); }
    .tabelle td { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
    .tabelle td:first-child { display: block; border-top: 0; padding: 12px 0 6px; font-size: 1.3rem; white-space: normal; }
    .tabelle td::before { content: attr(data-label); font-size: .75rem; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); }
    .tabelle td:first-child::before { content: none; }
}

/* Ratgeber-Kacheln */
.kacheln__kopf { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }
.kacheln__kopf h2 { margin: 0; }
.kacheln__raster { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.kachel { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none !important; color: var(--tinte) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.kachel__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--akzent-hell); color: var(--akzent-tief); }
.kachel__icon svg { width: 22px; height: 22px; }
.kachel__titel { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.kachel__text { font-size: .93rem; line-height: 1.5; color: var(--tinte-2); }
.kachel__mehr { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 620; color: var(--akzent-tief); }
.kachel__mehr svg { width: 16px; height: 16px; transition: transform .18s ease; }
.kachel:hover .kachel__mehr svg { transform: translateX(3px); }

/* Kacheln mit Foto: Bild oben, Icon als Plakette auf der Kante */
.kachel--bild { padding: 0 0 22px; overflow: hidden; }
.kachel--bild > :not(.kachel__bild) { margin-left: 24px; margin-right: 24px; }
.kachel__bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--akzent-hell); }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.kachel:hover .kachel__bild img { transform: scale(1.04); }
.kachel--bild .kachel__icon { margin-top: -22px; position: relative; background: var(--flaeche); box-shadow: var(--schatten); }

/* Abschnitt mit Foto daneben */
.abschnitt__bild { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.abschnitt__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1000px) {
    .abschnitt.mit-bild { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 56px; align-items: start; }
    .abschnitt.mit-bild > h2 { grid-column: 1 / -1; }
    .abschnitt.mit-bild .rte { display: contents; }
    .abschnitt.mit-bild .abschnitt__bild { grid-column: 2; grid-row: 2 / span 20; position: sticky; top: 104px; margin: 0; }
    .abschnitt.mit-bild .rte > :not(.abschnitt__bild) { grid-column: 1; max-width: var(--lese); }
}

/* Ratgeberseite: Kopf, Inhaltsverzeichnis, Seitenleiste */
.seitenkopf { max-width: 860px; padding-bottom: clamp(24px, 4vw, 48px); border-bottom: 1px solid var(--linie); }
.brotkrumen { font-size: .85rem; color: var(--tinte-2); margin-bottom: 22px; }
.brotkrumen a { color: var(--tinte-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent-tief); text-decoration: underline; }
@media (min-width: 1080px) {
    .ratgeber .mod_article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 72px; }
    .ratgeber .mod_article > * { grid-column: 1; }
    .ratgeber .mod_article > .seitenkopf { grid-column: 1 / -1; max-width: none; }
    .ratgeber .mod_article > .inhalt { grid-column: 2; grid-row: 2 / span 40; align-self: start; position: sticky; top: 96px; margin-top: 0; }
}
.inhalt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 24px; font-size: .92rem; }
.inhalt__titel { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); margin-bottom: 10px; }
.inhalt ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.inhalt li { counter-increment: toc; margin: 0; }
.inhalt a { display: grid; grid-template-columns: 26px 1fr; padding: 7px 0; color: var(--tinte); text-decoration: none; border-top: 1px solid var(--linie); line-height: 1.35; }
.inhalt li:first-child a { border-top: 0; }
.inhalt a::before { content: counter(toc, decimal-leading-zero); font-size: .75rem; font-weight: 700; color: var(--akzent); padding-top: 2px; }
.inhalt a:hover { color: var(--akzent-tief); }

/* FAQ */
.faq { max-width: var(--lese); }
/* Google-Anzeigen (nur Portale mit Werbung, import/werbung.php): gekennzeichnet, abgesetzt, leer unsichtbar */
.anzeige { max-width: var(--lese); margin-block: 8px 40px; padding-top: 10px; border-top: 1px solid var(--linie); }
.anzeige__label { display: block; margin-bottom: 8px; font: 600 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.anzeige:has(ins[data-ad-status="unfilled"]) { display: none; }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-of-type { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 560; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent-tief); font-family: var(--sans); font-weight: 600; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 20px; color: var(--tinte-2); }

/* Weiterlesen */
.weiter { border-top: 1px solid var(--linie); padding-top: clamp(32px, 5vw, 56px); }

/* Fuß */
.design-neu #footer { background: var(--tinte); color: #d9d3cb; margin-top: clamp(40px, 6vw, 96px); }
.design-neu #footer > .inside { padding-top: clamp(44px, 6vw, 72px); padding-bottom: 28px; }
.fuss { display: grid; gap: 40px 56px; }
@media (min-width: 900px) { .fuss { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.fuss .marke { color: #fff !important; margin-bottom: 16px; }
.fuss .marke__text sup { color: #b9b2a9; }
/* Im dunklen Fuß sind alle Logos einfarbig weiß (Marco, 25.10.2026): Flächen und Linien weiß, weiße Details im Signet werden zur Fußfarbe */
.fuss .marke__text em { color: #fff; }
.fuss .marke__signet { filter: none; }
.fuss .marke__signet svg[fill]:not([fill="none"]), .fuss .marke__signet svg [fill]:not([fill="none"]):not([fill="#fff"]) { fill: #fff; }
.fuss .marke__signet svg[stroke]:not([stroke="none"]), .fuss .marke__signet svg [stroke]:not([stroke="none"]):not([stroke="#fff"]) { stroke: #fff; }
.fuss .marke__signet svg [fill="#fff"], .fuss .marke__signet svg [stroke="#fbf8f3"] { fill: var(--tinte); stroke: var(--tinte); }
.fuss .marke__zahl { background: #fff; color: var(--tinte); }
.fuss .fuss__unten a { color: #efe9e1; text-decoration: underline; text-underline-offset: .18em; }
.fuss__marke p { font-size: .95rem; line-height: 1.55; color: #b9b2a9; max-width: 32ch; margin: 0; }
.fuss__links { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.fuss h3 { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin: 0 0 10px; font-size: .95rem; line-height: 1.4; }
.fuss a { color: #d9d3cb; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__mehr a { display: inline-flex; align-items: center; gap: 6px; color: var(--akzent-hell); font-weight: 600; }
.fuss__mehr svg { width: 15px; height: 15px; }
.fuss__unten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: #9d968d; }

@media (prefers-reduced-motion: reduce) { .design-neu * { transition: none !important; } }

/* Intro: Flipbook im Hero (Markup aus texte_einspielen.php, hero_intro).
   Ablauf ca. 10 s: Buch landet mit Schatten, Leinendeckel mit Goldfolie öffnet sich, drei Doppelseiten werden umgeblättert,
   Fotos fallen mit kleinem Abprall auf die Seiten, Beschriftungen erscheinen, Plakette. Danach ruhiges Schweben, Neigung zur Maus. */
/* Mit Intro steht das Buch frei auf dem Seitengrund, ohne Kachel und Hintergrundfoto */
.hero__bild--intro { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.intro { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1600px; }
.ib-kipp {
    position: relative; width: 94%; aspect-ratio: 1.5 / 1; transform-style: preserve-3d;
    transform: rotateX(calc(16deg + var(--ky, 0deg))) rotateY(var(--kx, 0deg)) rotateZ(-3deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.ib-schatten {
    position: absolute; left: 3%; right: 3%; bottom: -7%; height: 26%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(60, 30, 10, .32), rgba(60, 30, 10, 0)); filter: blur(12px);
    transform: translateZ(-40px); animation: ib-schatten-rein 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
.ib-buch { position: absolute; inset: 0; transform-style: preserve-3d; animation: ib-rein 1.1s cubic-bezier(.2, .8, .2, 1) both, ib-schweben 8s ease-in-out 10.6s infinite; }

.ib-seite { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #fffdf8; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ib-grund--links { left: 0; border-radius: 6px 0 0 6px; background: linear-gradient(to left, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 16%), #fffdf8;
    box-shadow: -2px 2px 0 #f1ece3, -4px 4px 0 #e6dfd3, -6px 6px 0 #d8cfc0, 0 30px 60px -28px rgba(0, 0, 0, .7); }
.ib-grund--rechts { right: 0; border-radius: 0 6px 6px 0; background: linear-gradient(to right, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 16%), #fffdf8;
    box-shadow: 2px 2px 0 #f1ece3, 4px 4px 0 #e6dfd3, 6px 6px 0 #d8cfc0, 0 30px 60px -28px rgba(0, 0, 0, .7); }

.ib-blatt { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; transform-style: preserve-3d; transform-origin: left center;
    transform: translateZ(var(--z)) rotateY(0deg); animation: ib-wenden 1.35s cubic-bezier(.55, .05, .3, 1) var(--t) both; }
/* --z/--zi: Lage rechts vor dem Blättern, --zl/--zo: Lage links danach (zuletzt geblättert liegt oben).
   Chrome sortiert fast deckungsgleiche Ebenen nach Malreihenfolge, deshalb zusätzlich z-index. */
.ib-blatt { z-index: var(--zi); }
.ib-blatt--deckel { --z: 3px; --zl: 1px; --zi: 3; --zo: 4; --t: 1.2s; }
.ib-blatt--1 { --z: 2px; --zl: 2px; --zi: 2; --zo: 5; --t: 4.4s; }
.ib-blatt--2 { --z: 1px; --zl: 3px; --zi: 1; --zo: 6; --t: 7.4s; }
/* Geschlossen liegt das Buch mittig, beim Öffnen rückt es nach rechts; die linke Seite erscheint, wenn der Deckel sie freigibt */
.ib-kipp { animation: ib-mitte 1.35s cubic-bezier(.55, .05, .3, 1) 1.2s both; }
.ib-grund--links { animation: ib-sichtbar 0s linear 1.85s both; }
.ib-blatt .ib-seite { left: 0; width: 100%; }
.ib-blatt .ib-vorne { border-radius: 0 6px 6px 0; background: linear-gradient(to right, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 16%), #fffdf8; }
.ib-blatt .ib-hinten { transform: rotateY(180deg); border-radius: 6px 0 0 6px; background: linear-gradient(to left, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 16%), #fffdf8; }
/* Wendeschatten: die Seite wird beim Umblättern dunkler, als würde sie sich wölben */
.ib-blatt .ib-seite::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, .08) 55%, rgba(255, 255, 255, .25) 85%, rgba(0, 0, 0, .1));
    animation: ib-wendeschatten 1.35s ease-in-out var(--t) both; }
.ib-blatt .ib-hinten::after { transform: scaleX(-1); }

/* Deckel: Leinen, geprägter Rand, Goldfolie mit wanderndem Glanzlicht */
.ib-blatt .ib-deckel {
    display: grid; place-content: center; gap: 6px; text-align: center; border-radius: 3px 8px 8px 3px;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
        radial-gradient(120% 90% at 85% 5%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
        linear-gradient(140deg, #c4611f, #7f3410);
    box-shadow: inset 0 0 0 7px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(255, 255, 255, .14), inset 8px 0 12px -8px rgba(0, 0, 0, .55);
}
.ib-folie {
    font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.1rem, 2.7vw, 2rem); line-height: 1;
    background: linear-gradient(110deg, #9c7020 0%, #e9c879 30%, #fff4cf 42%, #d9ab4e 54%, #9c7020 100%); background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
    animation: ib-glanz 2.6s ease-in-out .5s both;
}
.ib-folie--klein { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: clamp(.55rem, 1.1vw, .8rem); letter-spacing: .4em; }
.ib-vorsatzseite { display: grid; place-content: center; text-align: center;
    background: radial-gradient(circle at 1px 1px, rgba(181, 77, 20, .16) 1px, rgba(0, 0, 0, 0) 1.4px) 0 0 / 9px 9px, linear-gradient(to left, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 16%), #fbf4ea !important; }
.ib-vorsatz { font-family: var(--serif); font-style: italic; font-size: clamp(.9rem, 2vw, 1.4rem); color: #7f3410; }
.ib-vorsatz small { display: block; margin-top: 6px; font-family: var(--sans); font-style: normal; font-size: .55em; font-weight: 700; letter-spacing: .35em; color: #a5856c; }

/* Lichtkante, die einmal über die Seiten wandert */
.ib-licht { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%) 0 0 / 300% 100% no-repeat;
    animation: ib-lichtkante 2.4s ease-in-out 9.8s both; }

/* Fotos mit weißem Rand, fallen mit Abprall auf die Seite */
.ib-foto { position: absolute; display: block; padding: 3.5%; background: #fff; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5);
    transform: rotate(var(--r)); animation: ib-fallen .9s cubic-bezier(.3, 1.35, .45, 1) var(--d) both; }
.ib-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ib-f1 { left: 10%; top: 10%; width: 80%; aspect-ratio: 4 / 3; --r: 1deg; --d: 2.7s; }
.ib-f2 { left: 9%; top: 9%; width: 54%; aspect-ratio: 3 / 4; --r: -3deg; --d: 5.8s; }
.ib-f3 { right: 8%; bottom: 13%; width: 46%; aspect-ratio: 1; --r: 4deg; --d: 6.05s; }
.ib-f4 { left: 12%; top: 11%; width: 76%; aspect-ratio: 4 / 3; --r: -1.5deg; --d: 6.3s; }
.ib-f5 { inset: 0; padding: 0; box-shadow: none; --r: 0deg; --d: 8.85s; }
.ib-f6 { left: 14%; top: 9%; width: 72%; aspect-ratio: 4 / 5; --r: 2deg; --d: 9.1s; }
.ib-notiz { position: absolute; left: 12%; bottom: 9%; font-family: var(--serif); font-style: italic; font-size: clamp(.62rem, 1.4vw, 1rem); color: #57524c; white-space: nowrap;
    clip-path: inset(0 100% 0 0); animation: ib-schrift 1.1s steps(20, end) var(--d) both; }
.ib-n1 { --d: 3.4s; }
.ib-n2 { --d: 6.9s; }
.ib-n3 { --d: 9.7s; left: 14%; bottom: 6%; color: var(--akzent-tief); font-size: clamp(.8rem, 1.8vw, 1.3rem); }

.ib-plakette { position: absolute; right: 5%; bottom: 6%; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    background: #fff; color: var(--tinte); font-size: .8rem; font-weight: 650; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .65);
    animation: ib-plakette .55s cubic-bezier(.2, .9, .25, 1.35) 10.3s both; }
.ib-plakette::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #2f8a4f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }

@keyframes ib-rein { from { opacity: 0; transform: translateY(-14%) translateZ(120px) rotateX(-8deg) rotateZ(6deg); } 70% { opacity: 1; } }
@keyframes ib-schatten-rein { from { opacity: 0; transform: translateZ(-40px) scale(.6); } }
@keyframes ib-schweben { 0%, 100% { transform: translateZ(0); } 50% { transform: translateZ(14px) translateY(-1.5%); } }
@keyframes ib-wenden {
    0% { transform: translateZ(var(--z)) rotateY(0deg); z-index: var(--zi); }
    49.9% { z-index: var(--zi); }
    50% { transform: translateZ(calc(var(--z) + 18px)) rotateY(-95deg); z-index: var(--zo); }
    100% { transform: translateZ(var(--zl)) rotateY(-180deg); z-index: var(--zo); }
}
@keyframes ib-mitte { from { translate: -25% 0; } }
@keyframes ib-sichtbar { from { visibility: hidden; } to { visibility: visible; } }
@keyframes ib-wendeschatten { 0%, 100% { opacity: 0; } 45%, 60% { opacity: 1; } }
@keyframes ib-glanz { from { background-position: 110% 0; } to { background-position: -10% 0; } }
@keyframes ib-lichtkante { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes ib-fallen {
    from { opacity: 0; transform: translateY(-38%) rotate(calc(var(--r) - 9deg)) scale(1.22); box-shadow: 0 40px 40px -10px rgba(0, 0, 0, .25); }
    55% { opacity: 1; }
    to { transform: rotate(var(--r)); }
}
@keyframes ib-schrift { to { clip-path: inset(0 0 0 0); } }
@keyframes ib-plakette { from { opacity: 0; transform: scale(.6) translateY(8px); } }
@media (max-width: 899px) { .ib-kipp { width: 88%; } }
@media (prefers-reduced-motion: reduce) {
    .ib-buch, .ib-schatten, .ib-seite::after, .ib-foto, .ib-notiz, .ib-plakette, .ib-folie, .ib-licht { animation: none !important; }
    .ib-blatt { animation: none; transform: translateZ(var(--zl)) rotateY(-180deg); z-index: var(--zo); }
    .ib-kipp, .ib-grund--links { animation: none; }
    .ib-notiz { clip-path: none; }
    .ib-kipp { transition: none; }
}

/* Intro Shirt: weißes Shirt schwingt am Bügel ein, Siebdruckrahmen setzt auf, die Rakel zieht drei Farblagen durch
   (Markup aus texte_einspielen.php, hero_shirt). Ablauf ca. 8 s, danach leichtes Pendeln, Neigung zur Maus. */
.intro--shirt { perspective: 1400px; }
.is-kipp { position: relative; height: 90%; aspect-ratio: 400 / 510; transform-style: preserve-3d;
    transform: rotateX(var(--ky, 0deg)) rotateY(var(--kx, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.is-schatten { position: absolute; left: 18%; right: 18%; bottom: -3%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 20, .22), rgba(60, 40, 20, 0)); filter: blur(8px); }
.is-haenger { position: absolute; inset: 0; transform-origin: 50% 3%;
    animation: is-ein 1.7s cubic-bezier(.3, .7, .3, 1) both, is-wippen 1.4s ease-in-out 6.6s, is-pendeln 7s ease-in-out 8s infinite; }
.is-buegel { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.is-shirt { position: absolute; left: 0; right: 0; top: 13%; aspect-ratio: 400 / 420; }
.is-shirt > svg { width: 100%; height: 100%; display: block; filter: drop-shadow(10px 18px 16px rgba(60, 40, 20, .16)); }
.is-druck { position: absolute; left: 30%; top: 30%; width: 40%; aspect-ratio: 200 / 180; }
.is-lage { position: absolute; inset: 0; opacity: .94; mix-blend-mode: multiply; clip-path: inset(0 100% 0 0); animation: is-drucken .9s linear var(--d) forwards; }
.is-lage svg { display: block; width: 100%; height: 100%; }
.is-lage--1 { --d: 2.3s; }
.is-lage--2 { --d: 3.7s; }
.is-lage--3 { --d: 5.1s; }
.is-rahmen { position: absolute; inset: -16% -14%; border: 9px solid #c9a46e; border-radius: 3px; opacity: 0;
    background: repeating-linear-gradient(45deg, rgba(110, 110, 130, .12) 0 1px, rgba(0, 0, 0, 0) 1px 4px), rgba(240, 240, 248, .28);
    box-shadow: 0 16px 24px -12px rgba(40, 30, 20, .45), inset 0 0 0 1px rgba(0, 0, 0, .08);
    animation: is-rahmen-auf .55s cubic-bezier(.2, .8, .2, 1) 1.6s both, is-rahmen-ab .7s cubic-bezier(.5, 0, .7, .4) 6.2s forwards; }
.is-tinte { position: absolute; top: 4%; left: 6%; right: 6%; height: 7%; border-radius: 4px; opacity: 0; transform-origin: right center;
    animation: is-da .3s ease-out var(--v) forwards, is-verbrauchen .9s linear var(--d) forwards; }
.is-tinte--1 { background: var(--akzent); --v: 1.9s; --d: 2.3s; }
.is-tinte--2 { background: #f29a52; --v: 3.3s; --d: 3.7s; }
.is-tinte--3 { background: #1d1b19; --v: 4.7s; --d: 5.1s; }
.is-rakel { position: absolute; top: -12%; bottom: -12%; left: 2%; width: 6%; border-radius: 3px; opacity: 0;
    background: linear-gradient(90deg, #2b2622 0 62%, var(--akzent) 62% 100%); box-shadow: 4px 6px 10px -4px rgba(0, 0, 0, .4);
    animation: is-zug .9s linear 2.3s forwards, is-zug .9s linear 3.7s forwards, is-zug .9s linear 5.1s forwards; }
.intro--shirt .is-plakette { animation-delay: 7.1s; }

@keyframes is-ein {
    0% { opacity: 0; transform: translateY(-30%) rotate(-12deg); }
    40% { opacity: 1; transform: translateY(0) rotate(7deg); }
    65% { transform: rotate(-4deg); }
    85% { transform: rotate(1.5deg); }
    100% { transform: rotate(0); }
}
@keyframes is-wippen { 30% { transform: rotate(-2.5deg); } 65% { transform: rotate(1.4deg); } }
@keyframes is-pendeln { 50% { transform: rotate(1.2deg); } }
@keyframes is-rahmen-auf { from { opacity: 0; transform: translateY(-26%) scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes is-rahmen-ab { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-34%) scale(1.06); } }
@keyframes is-drucken { to { clip-path: inset(0 0 0 0); } }
@keyframes is-da { to { opacity: 1; } }
@keyframes is-verbrauchen { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes is-zug { 0% { left: 2%; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: 92%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .is-haenger, .is-lage, .is-rahmen, .is-tinte, .is-rakel { animation: none !important; }
    .is-lage { clip-path: none; }
    .is-kipp { transition: none; }
}

/* Intro Karton: Schuhkarton landet, Deckel hebt ab und lehnt sich daneben, Seidenpapier klappt auf, ein Paar Pumps steigt heraus
   (Markup aus texte_einspielen.php, hero_karton). Ablauf ca. 6 s, danach leichtes Wiegen der Schuhe, Neigung zur Maus. */
.intro--karton { perspective: 1400px; }
.ik-kipp { position: relative; width: 86%; aspect-ratio: 1.15 / 1; transform-style: preserve-3d;
    transform: rotateX(var(--ky, 0deg)) rotateY(var(--kx, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); animation: ik-landen .9s cubic-bezier(.3, .7, .3, 1.1) both; }
.ik-schatten { position: absolute; left: 8%; right: 8%; bottom: 4%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 30, 20, .3), rgba(60, 30, 20, 0)); filter: blur(8px); }
/* Innenraum (Rückwand) und Front bilden den Karton; die Schuhe liegen dazwischen */
.ik-innen { position: absolute; left: 14%; right: 14%; bottom: 46%; height: 9%; border-radius: 4px 4px 0 0; background: linear-gradient(#5e1216, #7c161b); }
.ik-box { position: absolute; left: 12%; right: 12%; bottom: 12%; height: 36%; border-radius: 3px 3px 6px 6px; display: grid; place-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 88%, #fff) 0 7%, var(--akzent) 7% 100%); box-shadow: inset 0 -10px 18px -10px rgba(0, 0, 0, .35); }
.ik-etikett { display: grid; justify-items: center; gap: 4px; padding: 8% 10%; background: #fffdf9; border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.ik-etikett b { font: italic 500 clamp(.9rem, 2.2vw, 1.5rem)/1 var(--serif); color: var(--tinte); }
.ik-etikett small { font: 700 clamp(.5rem, .9vw, .7rem)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--akzent-tief); }
.ik-innen { z-index: 1; }
.ik-papier { z-index: 2; }
.ik-schuhe { z-index: 3; }
.ik-box { z-index: 4; }
.ik-deckel { position: absolute; z-index: 5; left: 10%; right: 10%; bottom: 46%; height: 11%; border-radius: 4px; transform-origin: 50% 100%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 80%, #fff), var(--akzent-tief)); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .45);
    animation: ik-deckel-ab 1.1s cubic-bezier(.5, 0, .2, 1) 1.1s both; }
.ik-papier { position: absolute; bottom: 46%; width: 36%; height: 22%; background: linear-gradient(160deg, #fff 0 40%, #f1ece6); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    clip-path: polygon(0 100%, 8% 18%, 30% 0, 62% 12%, 100% 4%, 100% 100%); transform: rotate(0deg) scaleY(.2); opacity: 0; animation: ik-papier .8s cubic-bezier(.3, 1.3, .5, 1) 2.2s both; }
.ik-papier--l { left: 16%; transform-origin: 100% 100%; --w: -28deg; }
.ik-papier--r { right: 16%; transform-origin: 0 100%; --w: 28deg; scale: -1 1; }
.ik-schuhe { position: absolute; left: 18%; right: 18%; bottom: 40%; height: 40%; }
.ik-schuh { position: absolute; bottom: 0; width: 58%; height: auto; overflow: visible; filter: drop-shadow(4px 8px 8px rgba(30, 10, 10, .25)); }
.ik-schuh path { fill: #1d1b19; }
.ik-schuh--1 { left: 2%; --t: 2.8s; animation: ik-steigen 1s cubic-bezier(.3, 1.4, .5, 1) var(--t) both, ik-wiegen 6s ease-in-out 6s infinite; }
.ik-schuh--2 { right: 0; width: 54%; --t: 3.2s; animation: ik-steigen 1s cubic-bezier(.3, 1.4, .5, 1) var(--t) both, ik-wiegen 6s ease-in-out 6.6s infinite; }
.ik-schuh--2 path { fill: #3a3430; }
.intro--karton .ik-plakette { animation-delay: 4.4s; }

@keyframes ik-landen { from { opacity: 0; transform: translateY(-24%) rotate(-4deg); } 70% { opacity: 1; } }
/* Deckel hebt ab und lehnt sich hinten an den Karton (ab der Hälfte hinter Innenraum und Schuhen) */
@keyframes ik-deckel-ab {
    0% { transform: none; z-index: 5; }
    45% { transform: translateY(-150%) rotate(-7deg); z-index: 5; }
    46% { z-index: 0; }
    100% { transform: translateY(-120%) rotate(-3deg) scale(.97); z-index: 0; }
}
@keyframes ik-papier { from { opacity: 0; transform: rotate(0deg) scaleY(.2); } to { opacity: 1; transform: rotate(var(--w)) scaleY(1); } }
@keyframes ik-steigen { from { opacity: 0; transform: translateY(85%) rotate(6deg); } 40% { opacity: 1; } to { transform: translateY(0) rotate(-4deg); } }
@keyframes ik-wiegen { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-1.5deg) translateY(-2%); } }
@media (prefers-reduced-motion: reduce) {
    .ik-kipp, .ik-deckel, .ik-papier, .ik-schuh { animation: none !important; }
    .ik-deckel { transform: translateY(-120%) rotate(-3deg) scale(.97); z-index: 0; }
    .ik-papier { opacity: 1; transform: rotate(var(--w)); }
    .ik-schuh { transform: rotate(-4deg); }
    .ik-kipp { transition: none; }
}

/* Intro Zähler: Stromzähler landet, Zählwerk rollt hoch, Läuferscheibe dreht sich; daneben zeichnen sich zwei Tarifkurven,
   die Fläche dazwischen füllt sich (Markup aus texte_einspielen.php, hero_zaehler). Ablauf ca. 6 s, danach dreht die Scheibe weiter. */
.intro--zaehler { perspective: 1400px; }
.iz-kipp { position: relative; width: 92%; aspect-ratio: 1.2 / 1; transform-style: preserve-3d;
    transform: rotateX(var(--ky, 0deg)) rotateY(var(--kx, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.iz-schatten { position: absolute; left: 4%; width: 46%; bottom: 3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 40, 30, .28), rgba(20, 40, 30, 0)); filter: blur(8px); }
/* Zähler links */
.iz-zaehler { position: absolute; left: 4%; bottom: 8%; width: 46%; height: 84%; border-radius: 14px; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 8%; padding: 9% 8%;
    background: linear-gradient(160deg, #fff, #eceae4); box-shadow: 0 1px 0 #fff inset, 0 18px 30px -16px rgba(20, 40, 30, .45);
    animation: iz-landen .9s cubic-bezier(.3, .7, .3, 1.1) both; }
.iz-kopf { width: 100%; padding: 7%; border-radius: 8px; background: #1d1b19; }
.iz-fenster { display: flex; align-items: center; justify-content: center; gap: 3%; height: clamp(22px, 3.4vw, 40px); overflow: hidden; font: 700 clamp(.9rem, 1.9vw, 1.5rem)/1 var(--sans); font-variant-numeric: tabular-nums; }
.iz-rolle { display: flex; flex-direction: column; width: 1.45ch; padding: 0; text-align: center; background: #fff; color: #1d1b19; border-radius: 3px; height: 100%; overflow: hidden; }
.iz-rolle:nth-child(n+4) { background: var(--akzent); color: #fff; }
.iz-rolle i { font-style: normal; height: 100%; width: 100%; flex: none; display: grid; place-items: center; transform: translateY(calc(var(--ziel) * -100%)); animation: iz-rollen calc(1.2s + var(--n) * .25s) cubic-bezier(.3, .8, .3, 1) .9s both; }
.iz-einheit { margin-left: 6%; font: 600 clamp(.5rem, .9vw, .75rem)/1 var(--sans); color: #b8b2aa; }
.iz-scheibe { position: relative; align-self: center; width: 70%; aspect-ratio: 4 / 1; border-radius: 50%; background: linear-gradient(180deg, #d9d6cf, #f6f4ef 50%, #c9c5bd); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); overflow: hidden; }
.iz-marke { position: absolute; top: 0; bottom: 0; width: 8%; background: #c7362f; animation: iz-drehen 1.6s linear 1s infinite; }
.iz-schild { font: 600 clamp(.45rem, .8vw, .65rem)/1 var(--sans); letter-spacing: .12em; color: #8a8079; }
/* Tarifkurven rechts */
.iz-kurve { position: absolute; right: 0; top: 10%; width: 58%; padding: 4% 4% 3%; border-radius: 12px; background: #fff; box-shadow: 0 18px 30px -18px rgba(20, 40, 30, .4);
    animation: iz-kurve-rein .7s cubic-bezier(.3, .7, .3, 1) 1.4s both; }
.iz-kurve svg { display: block; width: 100%; height: auto; overflow: visible; }
.iz-raster { fill: none; stroke: #ece8e1; stroke-width: 1; }
.iz-linie { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: iz-zeichnen 1.4s cubic-bezier(.4, 0, .2, 1) var(--d) both; }
.iz-linie--alt { stroke: #b9b2a8; stroke-dasharray: 1; --d: 2s; }
.iz-linie--neu { stroke: var(--akzent); --d: 2.6s; }
.iz-flaeche { fill: var(--akzent); opacity: 0; animation: iz-fuellen .9s ease-out 4s both; }
.iz-text { font: 600 10px var(--sans); opacity: 0; animation: iz-zeigen .5s ease-out var(--d) both; }
.iz-text--alt { fill: #8a8079; --d: 3.2s; }
.iz-text--neu { fill: var(--akzent-tief); --d: 3.8s; }
.intro--zaehler .iz-plakette { animation-delay: 5s; }

@keyframes iz-landen { from { opacity: 0; transform: translateY(-18%) rotate(-3deg); } 70% { opacity: 1; } }
@keyframes iz-kurve-rein { from { opacity: 0; transform: translateX(10%) scale(.96); } }
@keyframes iz-rollen { from { transform: translateY(0); } }
@keyframes iz-drehen { from { left: -10%; } to { left: 102%; } }
@keyframes iz-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes iz-fuellen { to { opacity: .14; } }
@keyframes iz-zeigen { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .iz-zaehler, .iz-kurve, .iz-rolle i, .iz-linie, .iz-flaeche, .iz-text, .iz-marke { animation: none !important; }
    .iz-linie { stroke-dashoffset: 0; }
    .iz-flaeche { opacity: .14; }
    .iz-text { opacity: 1; }
    .iz-marke { left: 40%; }
    .iz-kipp { transition: none; }
}

/* Intro Sparglas: Glas landet, Münzen fallen nacheinander hinein und stapeln sich, daneben wachsen Balken und eine Zinskurve
   (Markup aus texte_einspielen.php, hero_sparglas). Ablauf ca. 5,5 s, Neigung zur Maus. */
.intro--sparglas { perspective: 1400px; }
.ig-kipp { position: relative; width: 92%; aspect-ratio: 1.2 / 1; transform-style: preserve-3d;
    transform: rotateX(var(--ky, 0deg)) rotateY(var(--kx, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ig-schatten { position: absolute; left: 6%; width: 50%; bottom: 3%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 25, 50, .3), rgba(15, 25, 50, 0)); filter: blur(8px); }
/* Glas */
.ig-glas { position: absolute; left: 8%; bottom: 7%; width: 46%; height: 78%; animation: ig-landen .9s cubic-bezier(.3, .7, .3, 1.1) both; }
.ig-deckel { position: absolute; left: 18%; right: 18%; top: 0; height: 9%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 75%, #fff), var(--akzent)); z-index: 4; }
.ig-koerper { position: absolute; left: 0; right: 0; top: 8%; bottom: 0; border-radius: 22% 22% 14% 14% / 14% 14% 8% 8%; background: rgba(255, 255, 255, .55);
    box-shadow: inset 0 0 0 3px rgba(30, 58, 110, .22), inset 0 -10px 18px -10px rgba(30, 58, 110, .25), 0 18px 30px -18px rgba(15, 25, 50, .45); z-index: 1; }
.ig-fuellung { position: absolute; left: 6%; right: 6%; top: 14%; bottom: 3%; z-index: 2; }
.ig-muenze { position: absolute; width: 22%; aspect-ratio: 2.4 / 1; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 35%, #f6d77a, #d9a83c 60%, #b8862a); box-shadow: inset 0 -3px 0 #9c7020, 0 2px 3px rgba(0, 0, 0, .18);
    opacity: 0; animation: ig-fallen .7s cubic-bezier(.4, 0, .6, 1.4) var(--d) both; }
.ig-glanz { position: absolute; left: 12%; top: 18%; width: 8%; bottom: 12%; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); z-index: 3; }
.ig-etikett { position: absolute; left: 20%; right: 20%; top: 46%; padding: 6% 4%; z-index: 3; text-align: center; background: #fffdf9; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    font: italic 500 clamp(.75rem, 1.6vw, 1.2rem)/1 var(--serif); color: var(--akzent-tief); transform: rotate(-3deg); }
/* Zinskarte */
.ig-karte { position: absolute; right: 2%; top: 14%; width: 40%; aspect-ratio: 1 / .9; padding: 8% 8% 6%; border-radius: 12px; background: #fff; box-shadow: 0 18px 30px -18px rgba(15, 25, 50, .4);
    animation: ig-karte-rein .7s cubic-bezier(.3, .7, .3, 1) 1.4s both; }
.ig-balken-reihe { position: absolute; left: 10%; right: 10%; bottom: 12%; height: 62%; display: flex; align-items: flex-end; gap: 7%; }
.ig-balken { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--akzent) 22%, #fff); transform-origin: bottom; animation: ig-wachsen .7s cubic-bezier(.3, .8, .3, 1) var(--d) both; }
.ig-kurve { position: absolute; left: 10%; right: 10%; bottom: 12%; height: 62%; width: 80%; overflow: visible; }
.ig-kurve path { fill: none; stroke: var(--akzent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ig-zeichnen 1.4s cubic-bezier(.4, 0, .2, 1) 3.6s both; }
.ig-karte-titel { position: absolute; left: 10%; top: 8%; font: 600 clamp(.6rem, 1vw, .8rem)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); }
.intro--sparglas .ig-plakette { animation-delay: 5s; }

@keyframes ig-landen { from { opacity: 0; transform: translateY(-16%) rotate(-3deg); } 70% { opacity: 1; } }
@keyframes ig-karte-rein { from { opacity: 0; transform: translateX(10%) scale(.96); } }
@keyframes ig-fallen { 0% { opacity: 0; transform: translateY(-420%) rotate(-20deg); } 15% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ig-wachsen { from { transform: scaleY(0); } }
@keyframes ig-zeichnen { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ig-glas, .ig-karte, .ig-muenze, .ig-balken, .ig-kurve path { animation: none !important; }
    .ig-muenze { opacity: 1; }
    .ig-kurve path { stroke-dashoffset: 0; }
    .ig-kipp { transition: none; }
}

/* Pollenflug heute (import/bausteine/pollenflugrechner.html, Front Matter rechner: pollenflug), Daten über /pollenflug.json */
.pollenflug { padding: clamp(20px, 3vw, 32px); border-radius: calc(var(--radius) * .7); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.pollenflug h2 { margin-top: 0; }
.pollenflug__form { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: end; }
.pollenflug__form > label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--tinte-2); }
.pollenflug__form select { font: 500 1.05rem/1.2 var(--sans); color: var(--tinte); padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--papier); width: 100%; }
.pollenflug__tage { display: flex; gap: 6px; flex-wrap: wrap; }
.pollenflug__tage label { cursor: pointer; }
.pollenflug__tage input { position: absolute; opacity: 0; }
.pollenflug__tage label:has(input) { padding: 9px 14px; border: 1px solid var(--linie); border-radius: 999px; font: 600 .9rem/1 var(--sans); background: var(--papier); }
.pollenflug__tage label:has(input:checked) { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.pollenflug__tage label:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.pollenflug__liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.pollenflug__eintrag { display: grid; grid-template-columns: 6.5em 1fr 9.5em; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--papier); }
.pollenflug__eintrag.ist-seite { outline: 2px solid var(--akzent); }
.pollenflug__name { font-weight: 700; }
.pollenflug__balken { height: 10px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.pollenflug__balken i { display: block; height: 100%; border-radius: inherit; background: #e0b21b; }
.stufe-4 .pollenflug__balken i, .stufe-5 .pollenflug__balken i { background: #e07b1b; }
.stufe-6 .pollenflug__balken i { background: #c0392b; }
.pollenflug__wert { font-size: .85rem; color: var(--tinte-2); text-align: right; }
.pollenflug__stand { margin: 14px 0 0; font-size: .85rem; font-weight: 600; }
.pollenflug__hinweis { margin: 6px 0 0; font-size: .8rem; color: var(--tinte-2); }
@media (max-width: 520px) { .pollenflug__eintrag { grid-template-columns: 5.5em 1fr; } .pollenflug__wert { grid-column: 1 / -1; text-align: left; } }

/* Zinsrechner (import/bausteine/zinsrechner.html, Front Matter rechner: zins) */
.zinsrechner { padding: clamp(20px, 3vw, 32px); border-radius: calc(var(--radius) * .7); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.zinsrechner h2 { margin-top: 0; }
.zinsrechner__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px 18px; }
.zinsrechner__form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--tinte-2); }
.zinsrechner__form input, .zinsrechner__form select { font: 500 1.05rem/1.2 var(--sans); color: var(--tinte); padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--papier); width: 100%; }
.zinsrechner__form input:focus, .zinsrechner__form select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.zinsrechner__ergebnis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; margin: 22px 0 0; }
.zinsrechner__ergebnis div { padding: 14px 16px; border-radius: 10px; background: var(--akzent-hell); }
.zinsrechner__ergebnis dt { font-size: .8rem; color: var(--tinte-2); }
.zinsrechner__ergebnis dd { margin: 4px 0 0; font: 600 1.35rem/1.2 var(--serif); color: var(--tinte); }
.zinsrechner__summe { background: var(--akzent) !important; }
.zinsrechner__summe dt, .zinsrechner__summe dd { color: #fff !important; }
.zinsrechner__hinweis { margin: 16px 0 0; font-size: .8rem; color: var(--tinte-2); }

/* Intro Klammern (agentur123.net): Klammern fahren auf, die Projekt-Signets fliegen nacheinander hinein, zuletzt der orange Punkt
   (Markup aus texte_einspielen.php, hero_portale). Ablauf ca. 4,5 s, Neigung zur Maus. */
.intro--klammern { perspective: 1400px; }
.ia-kipp { position: relative; width: 92%; aspect-ratio: 1.15 / 1; transform-style: preserve-3d;
    transform: rotateX(var(--ky, 0deg)) rotateY(var(--kx, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ia-klammer { position: absolute; top: 10%; height: 80%; width: 12%; border: clamp(8px, 1.5vw, 14px) solid var(--tinte); border-radius: 4px;
    animation: ia-klammer .8s cubic-bezier(.3, .7, .3, 1) .2s both, ia-schnapp .35s ease-out 3.75s; }
.ia-links { left: 2%; border-right: 0; --von: -60%; }
.ia-rechts { right: 2%; border-left: 0; --von: 60%; }
/* Sieben Plätze: 4 oben, Punkt, 3 unten (12er-Raster, oben je 3 Spalten, unten je 4) */
.ia-raster { position: absolute; inset: 4% 14% 20%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr auto 1fr; place-items: center; }
.ia-s1 { grid-area: 1 / 1 / 2 / 4; } .ia-s2 { grid-area: 1 / 4 / 2 / 7; } .ia-s3 { grid-area: 1 / 7 / 2 / 10; } .ia-s4 { grid-area: 1 / 10 / 2 / 13; }
.ia-s5 { grid-area: 3 / 1 / 4 / 5; } .ia-s6 { grid-area: 3 / 5 / 4 / 9; } .ia-s7 { grid-area: 3 / 9 / 4 / 13; }
.ia-signet { display: grid; justify-items: center; gap: 8px; opacity: 0; animation: ia-flug .8s cubic-bezier(.25, .8, .3, 1.15) var(--d) both; }
.ia-scheibe { display: grid; place-items: center; width: clamp(44px, 5.6vw, 68px); aspect-ratio: 1; border-radius: 50%; background: #fff;
    box-shadow: 0 14px 26px -16px rgba(29, 27, 25, .55), 0 0 0 1px var(--linie); }
.ia-scheibe svg { width: 62%; height: 62%; }
.ia-name { font: 600 clamp(.6rem, .9vw, .74rem)/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-2); }
.ia-punkt { grid-area: 2 / 1 / 3 / 13; width: clamp(24px, 4.2vw, 44px); aspect-ratio: 1; border-radius: 50%; background: #d9682b; transform: scale(0);
    animation: ia-punkt .6s cubic-bezier(.2, .9, .25, 1.4) 3.5s both; }
.intro--klammern .ia-plakette { animation-delay: 4.3s; }
@keyframes ia-klammer { from { opacity: 0; transform: translateX(var(--von)); } }
@keyframes ia-schnapp { 50% { transform: scaleY(1.04); } }
@keyframes ia-flug { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.5) rotate(-14deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ia-punkt { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .ia-klammer, .ia-signet, .ia-punkt { animation: none !important; }
    .ia-signet { opacity: 1; }
    .ia-punkt { transform: none; }
    .ia-kipp { transition: none; }
}

/* Projekte der Dachseite (Front Matter projekte) */
.projekte__raster { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.projekt { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
    text-decoration: none !important; color: var(--tinte) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.projekt:hover { transform: translateY(-3px); box-shadow: var(--schatten); border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.projekt__signet { width: 52px; height: 52px; }
.projekt__signet svg { width: 100%; height: 100%; display: block; }
.projekt__name { font: 600 1.35rem/1.2 var(--serif); }
.projekt__name em { font-style: italic; font-weight: 400; color: var(--akzent); }
.projekt__text { color: var(--tinte-2); font-size: .95rem; line-height: 1.55; }
.projekt__domain { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 650; color: var(--akzent-tief); }
.projekt__domain svg { width: 16px; height: 16px; transition: transform .18s ease; }
.projekt:hover .projekt__domain svg { transform: translateX(3px); }
.projekte { scroll-margin-top: 96px; }
.intro--klammern .ia-plakette { left: 0; right: 0; bottom: 3%; width: max-content; margin-inline: auto; }

/* Intro Messstreifen (Kinderschuhe): Fußabdruck erscheint, Messlinien laufen zum Lineal, die Zugabe wächst,
   zuletzt legt sich die Schuhkontur um den Fuß (Markup aus texte_einspielen.php, hero_kinderfuss). Ablauf ca. 5 s. */
.intro--kinderfuss { perspective: 1400px; }
.ifu-kipp { width: 92%; transform-style: preserve-3d; transform: rotateX(var(--ky, 0deg)) rotateY(var(--kx, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ifu-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ifu-lineal path { stroke: var(--tinte); stroke-width: 3; stroke-linecap: round; fill: none; }
.ifu-lineal { opacity: 0; animation: ifu-rein .6s ease-out .2s both; }
.ifu-fuss { fill: var(--akzent); transform-box: fill-box; transform-origin: 50% 100%; animation: ifu-tritt .8s cubic-bezier(.3, .7, .3, 1.2) .5s both; }
.ifu-fuss circle:last-child { fill: color-mix(in srgb, var(--akzent) 35%, #fff); }
.ifu-linie { fill: none; stroke: var(--tinte-2); stroke-width: 2; stroke-dasharray: .02 .02; }
.ifu-ferse { animation: ifu-strich .9s ease-out 1.4s both; }
.ifu-zeh { animation: ifu-strich .9s ease-out 1.7s both; }
.ifu-zugabe { stroke: #d9682b; stroke-width: 9; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: ifu-wachsen .7s cubic-bezier(.3, .8, .3, 1.2) 2.6s both; }
.ifu-text { font: 700 17px var(--sans); fill: #b54d14; opacity: 0; animation: ifu-rein .4s ease-out 3.1s both; }
.ifu-schuh { fill: none; stroke: var(--akzent); stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ifu-zeichnen 1.4s cubic-bezier(.4, 0, .2, 1) 3.4s both; }
.intro--kinderfuss .ifu-plakette { animation-delay: 4.8s; }
@keyframes ifu-rein { from { opacity: 0; } to { opacity: 1; } }
@keyframes ifu-tritt { from { opacity: 0; transform: translateY(-6%) scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes ifu-strich { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 1 0; } }
@keyframes ifu-wachsen { from { transform: scaleY(0); } }
@keyframes ifu-zeichnen { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ifu-lineal, .ifu-fuss, .ifu-linie, .ifu-zugabe, .ifu-text, .ifu-schuh { animation: none !important; opacity: 1; }
    .ifu-schuh { stroke-dashoffset: 0; }
    .ifu-kipp { transition: none; }
}
.intro--kinderfuss .ifu-kipp { width: 84%; margin-bottom: 9%; }
.intro--kinderfuss .ifu-plakette { left: 0; right: 0; bottom: 0; width: max-content; margin-inline: auto; }

/* Intro Bordsteinkante (Baumarkt): Lieferwagen fährt ein und hält an der Bordsteinkante, Kartons landen nacheinander
   auf dem Gehweg (Markup aus texte_einspielen.php, hero_baumarkt). Ablauf ca. 4 s. */
.intro--baumarkt { perspective: 1400px; }
.ibm-kipp { width: 96%; margin-bottom: 14%; transform-style: preserve-3d; transform: rotateX(var(--ky, 0deg)) rotateY(var(--kx, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ibm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ibm-gehweg { fill: color-mix(in srgb, var(--akzent) 12%, #fff); }
.ibm-strasse { fill: none; stroke: var(--tinte); stroke-width: 3; stroke-linejoin: round; }
.ibm-ladung, .ibm-kabine { fill: var(--akzent); }
.ibm-fenster { fill: #fff; opacity: .9; }
.ibm-rad { fill: var(--tinte); }
.ibm-nabe { fill: #fff; }
.ibm-wagen { animation: ibm-fahren 1.6s cubic-bezier(.2, .7, .25, 1) .2s both; }
.ibm-karton rect { fill: #c89b62; }
.ibm-karton path { stroke: #9c7442; stroke-width: 3; }
.ibm-karton { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: ibm-landen .55s cubic-bezier(.3, .7, .3, 1.3) var(--d) both; }
.ibm-marke { stroke: #d9682b; stroke-width: 3; stroke-linecap: round; opacity: 0; animation: ibm-rein .4s ease-out 3.2s both; }
.ibm-text { font: 600 13px var(--sans); fill: var(--tinte-2); letter-spacing: .08em; text-transform: uppercase; opacity: 0; animation: ibm-rein .4s ease-out 3.3s both; }
.intro--baumarkt .ibm-plakette { left: 0; right: 0; bottom: 0; width: max-content; margin-inline: auto; animation-delay: 3.8s; }
@keyframes ibm-fahren { from { transform: translateX(-120%); } 85% { transform: translateX(1.5%); } to { transform: none; } }
@keyframes ibm-landen { 0% { opacity: 0; transform: translateY(-60%); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ibm-rein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ibm-wagen, .ibm-karton, .ibm-marke, .ibm-text { animation: none !important; opacity: 1; }
    .ibm-kipp { transition: none; }
}
@media (min-width: 900px) { .intro--baumarkt .ibm-plakette { bottom: 17%; } }