.blog-seite { background:#f7f7f7; }
.blog-seite main { overflow:clip; }
.blog-seite a:focus-visible { outline:2px solid #eb7636; outline-offset:5px; }
/* The section receives focus after a fragment jump; interactive links keep their outlines. */
.blog-seite .blog-liste[tabindex="-1"]:focus { outline:none; box-shadow:none; }
.blog-augenbraue { display:block; font-size:.8rem; letter-spacing:.08em; font-weight:500; }
.blog-hero { background:#1c2532; color:#f8eed8; padding:5rem 0 3rem; }
.blog-hero h1 { color:inherit; font-size:clamp(3rem,6.8vw,6rem); font-weight:500; letter-spacing:-.045em; line-height:1.05; margin:1.6rem 0 2.5rem; }
.blog-hero h1 em { font-style:normal; color:#eb7636; }
.blog-hero-unten { display:flex; justify-content:space-between; align-items:end; gap:2rem; border-top:1px solid #f8eed830; padding-top:1.6rem; }
.blog-hero-unten p { max-width:34rem; margin:0; color:#e3dfd7; }
.blog-hero-unten a { color:#f8eed8; font-size:.9rem; text-decoration:none; white-space:nowrap; }
.blog-hero-unten a span { margin-left:1rem; color:#eb7636; }
.blog-liste { padding:3.5rem 0 5rem; scroll-margin-top:7rem; }
.blog-rubrik { display:flex; justify-content:space-between; gap:1rem; font-size:.78rem; color:#59616b; padding-bottom:1rem; border-bottom:1px solid #d9d7d3; margin-bottom:2rem; }
.blog-beitrag { display:grid; grid-template-columns:1.05fr 1fr; gap:3.5rem; align-items:center; padding:0 0 2rem; }
.blog-artwork { position:relative; isolation:isolate; overflow:hidden; min-height:22rem; background:#eee5d8; border-radius:1rem; padding:2rem; display:flex; flex-direction:column; justify-content:space-between; color:#1c2532; }
.blog-artwork-kopf { font-size:.65rem; letter-spacing:.12em; z-index:1; }
.blog-preis { font-size:1.5rem; z-index:1; line-height:1.2; margin:2rem 0; }
.blog-preis strong { font-size:clamp(5rem,8vw,7.5rem); font-weight:500; letter-spacing:-.065em; }
.blog-artwork-linie { height:1px; background:#1c25324d; z-index:1; }
.blog-artwork-fuss { margin-top:1rem; font-size:.8rem; z-index:1; }
.blog-artwork-kreis { position:absolute; z-index:0; right:-4rem; top:-4rem; width:15rem; height:15rem; border:1px solid #b5632d66; border-radius:50%; box-shadow:0 0 0 2rem #eb76360a,0 0 0 4rem #eb76360a; }
.blog-meta { display:flex; gap:.65rem; flex-wrap:wrap; font-size:.8rem; color:#626b75; }
.blog-beitrag h2 { margin:1rem 0; font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:500; line-height:1.15; letter-spacing:-.03em; }
.blog-beitrag h2 a { color:#1c2532; text-decoration:none; }
.blog-beitrag h2 a:hover { color:#ab4616; }
.blog-beitrag-text>p { font-size:1rem; line-height:1.75; color:#485568; }
.blog-leselink { display:inline-flex; align-items:center; gap:1.5rem; color:#1c2532; font-size:.9rem; text-decoration:none; border-bottom:1px solid #eb7636; padding-bottom:.4rem; margin-top:1rem; }
.blog-leselink:hover { color:#ab4616; }
.blog-branchen { background:#f0ebe4; padding:3.5rem 0; }
.blog-branchen h2 { font-size:clamp(1.5rem,3vw,2rem); font-weight:500; margin:0 0 .7rem; }
.blog-branchen p { color:#59616b; }
.blog-branchen-links { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.blog-branchen-links a { display:inline-block; padding:.7rem 1rem; border:1px solid #1c253230; border-radius:99px; color:#1c2532; font-size:.85rem; text-decoration:none; }
.blog-branchen-links a:hover { background:#fff8; border-color:#ab4616; }
.blog-abschluss { padding:4rem 0; background:#1c2532; color:#f8eed8; }
.blog-abschluss>.rahmen { display:flex; align-items:center; justify-content:space-between; gap:3rem; }
.blog-abschluss h2 { color:inherit; font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:500; letter-spacing:-.03em; line-height:1.15; margin:1rem 0; }
.blog-abschluss p { max-width:32rem; font-size:.95rem; color:#e3dfd7; margin:0; }
.blog-abschluss .pille { flex-shrink:0; gap:.75rem; }
.blog-artikel-kopf { padding:3rem 0 3.5rem; background:#1c2532; color:#f8eed8; }
.blog-zurueck { display:inline-block; color:#d9dfe6; font-size:.85rem; margin-bottom:3rem; text-decoration:none; }
.blog-artikel-kopf .blog-meta { color:#d9dfe6; }
.blog-artikel-kopf h1 { color:inherit; font-size:clamp(2.1rem,4.2vw,3.75rem); line-height:1.12; font-weight:500; letter-spacing:-.03em; max-width:62rem; margin:1.25rem 0 1.5rem; text-wrap:balance; overflow-wrap:break-word; }
.blog-vorspann { max-width:43rem; color:#e3dfd7; font-size:1.1rem; line-height:1.7; }
.blog-verfasser { margin:2rem 0 0; font-size:.8rem; color:#d9dfe6; }
.blog-leseraster { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:5rem; padding-top:4rem; padding-bottom:4rem; align-items:start; }
.blog-inhalt { position:sticky; top:7rem; font-size:.85rem; }
.blog-inhalt details { border-top:2px solid #1c2532; padding-top:1rem; }
.blog-inhalt summary { font-weight:600; cursor:pointer; }
.blog-inhalt ol { padding-left:1.1rem; display:grid; gap:.9rem; margin:1.3rem 0 1.7rem; }
.blog-inhalt a { color:#59616b; text-decoration:none; line-height:1.5; }
.blog-inhalt a:hover { color:#ab4616; }
.blog-inhalt .blog-toc-kontakt { display:inline-block; color:#ab4616; border-top:1px solid #dedbd6; padding-top:1rem; }
.blog-text { max-width:43rem; min-width:0; color:#384861; line-height:1.8; font-size:1.05rem; }
.blog-text section { scroll-margin-top:7rem; margin-bottom:3rem; }
.blog-text h2 { color:#1c2532; font-size:clamp(1.5rem,2.7vw,2rem); line-height:1.25; font-weight:500; margin:0 0 1.1rem; letter-spacing:-.025em; }
.blog-text p { margin:0 0 1.2rem; }
.blog-text ul { padding-left:1.2rem; }
.blog-text li { margin-bottom:.85rem; }
.blog-text a { color:#944014; text-underline-offset:3px; }
.blog-text a:not(.pille):not(.blog-zurueck-knopf){transition:color .18s ease,text-decoration-color .18s ease;text-decoration-thickness:1px}
.blog-text a:not(.pille):not(.blog-zurueck-knopf):is(:hover,:focus-visible){color:#1c2532;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.blog-text a:not(.pille):not(.blog-zurueck-knopf):focus-visible{outline:2px solid #d9824b;outline-offset:4px;border-radius:2px}
@media(prefers-reduced-motion:reduce){.blog-text a:not(.pille):not(.blog-zurueck-knopf){transition:none}}
.blog-text strong { font-weight:600; }
.blog-notiz { border-left:3px solid #eb7636; background:#f0ebe4; padding:1.4rem 1.5rem; border-radius:0 .6rem .6rem 0; margin:1.8rem 0; }
.blog-notiz p { margin:.6rem 0 0; font-size:.95rem; }
.blog-autor { border-top:1px solid #d9d7d3; border-bottom:1px solid #d9d7d3; padding:1.7rem 0; margin:2rem 0; display:flex; gap:1rem; align-items:start; font-size:.9rem; }
.blog-autor p { margin:.35rem 0 .6rem; }
.blog-autor-monogramm { display:grid; place-items:center; background:#1c2532; color:#f8eed8; width:3rem; height:3rem; flex:0 0 3rem; border-radius:.5rem; font-weight:600; }
@media(max-width:63.99rem) { .blog-beitrag{gap:2rem}.blog-leseraster{grid-template-columns:12rem minmax(0,1fr);gap:2.5rem}.blog-abschluss>.rahmen{align-items:start;flex-direction:column;gap:1.5rem} }
@media(max-width:47.99rem) { .blog-hero{padding:3rem 0 2rem}.blog-hero-unten{display:block}.blog-hero-unten a{display:inline-block;margin-top:1.4rem}.blog-beitrag{grid-template-columns:minmax(0,1fr);gap:1.6rem}.blog-artwork{min-height:18rem;padding:1.5rem}.blog-preis{margin:1rem 0}.blog-liste{padding:2rem 0}.blog-rubrik{font-size:.7rem}.blog-leseraster{grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:2rem;padding-bottom:2rem}.blog-inhalt{position:static}.blog-inhalt .blog-toc-kontakt{display:none}.blog-text{font-size:1rem}.blog-artikel-kopf{padding:1.75rem 0 2.5rem}.blog-zurueck{margin-bottom:2rem}.blog-vorspann{font-size:1rem}.blog-abschluss{padding:3rem 0}.blog-abschluss .pille{font-size:.8rem;white-space:normal}.blog-branchen{padding:2.5rem 0}.blog-text section{scroll-margin-top:6rem} }

.blog-projektbild { margin: 2rem 0 .5rem; }
.blog-projektbild img { display: block; width: 100%; height: auto; border: 1px solid #d9d7d3; border-radius: .65rem; background: #fff; }
.blog-projektbild figcaption { margin-top: .8rem; color: #59616b; font-size: .8rem; line-height: 1.6; }
.blog-projektbild figcaption a { display: block; width: fit-content; margin-top: .35rem; }

.blog-beitrag + .blog-beitrag { border-top: 1px solid #d9d7d3; padding-top: 2.5rem; margin-top: 1rem; }
.blog-vorschaubild { display: block; background: #f0ebe4; border: 1px solid #d9d7d3; border-radius: 1rem; padding: 1rem; }
.blog-vorschaubild img { display: block; width: 100%; height: auto; border-radius: .35rem; }
.blog-vergleich { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; margin: 2rem 0; }
.blog-vergleich .blog-projektbild { margin: 0; }
.blog-weiterlesen { border-top: 1px solid #d9d7d3; padding-top: 1.2rem; margin: 1.5rem 0; }
.blog-weiterlesen p { margin-bottom: .6rem; color: #59616b; font-size: .85rem; }
.blog-weiterlesen a { display: block; font-size: .95rem; margin: .65rem 0; }
@media (max-width:47.99rem) { .blog-vergleich { grid-template-columns:minmax(0,1fr); gap:1.5rem; }.blog-vorschaubild { padding:.65rem; } }

.blog-autor-foto { display: block; flex: 0 0 48px; width: 48px; height: 60px; border-radius: .5rem; object-fit: cover; }

/* Keep the two hero phrases separate even when shared mobile styles hide br. */
.blog-seite .blog-hero h1 > span, .blog-seite .blog-hero h1 > em { display: block; }
@media (max-width:47.99rem) { .blog-hero h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); line-height: 1.1; } }

.blog-inhalt ol a { display: block; padding-left: .6rem; margin-left: -.2rem; }
.blog-inhalt ol a.aktiv { color: #ab4616; }

.blog-text .blog-zurueck-knopf { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1rem; padding: .65rem 1rem; border: 1px solid #d9d4cd; border-radius: 999px; background: #f0ebe4; color: #1c2532; font-size: .9rem; line-height: 1.5; text-decoration: none; }
.blog-text .blog-zurueck-knopf:hover { background: #1c2532; border-color: #1c2532; color: #f8eed8; text-decoration: none; }

.blog-kartenraster { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.blog-kartenraster .blog-beitrag { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; border: 1px solid #dedbd6; border-radius: 1rem; overflow: hidden; background: #fff; min-width: 0; }
.blog-kartenraster .blog-vorschaubild { display: flex; align-items: center; justify-content: center; padding: .7rem; border: 0; border-radius: 0; aspect-ratio: 3 / 2; }
.blog-kartenraster .blog-vorschaubild img { width: 100%; height: 100%; object-fit: contain; }
.blog-kartenraster .blog-artwork { min-height: 0; aspect-ratio: 3 / 2; border-radius: 0; padding: 1.2rem; }
.blog-kartenraster .blog-artwork-kopf { font-size: .55rem; }
.blog-kartenraster .blog-preis { margin: .5rem 0; }
.blog-kartenraster .blog-preis strong { font-size: 4rem; }
.blog-kartenraster .blog-artwork-fuss { font-size: .7rem; }
.blog-kartenraster .blog-beitrag-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 1.3rem; }
.blog-kartenraster .blog-beitrag h2 { font-size: 1.45rem; line-height: 1.22; margin: .9rem 0; }
.blog-kartenraster .blog-beitrag-text > p { font-size: .9rem; margin-bottom: 1.3rem; }
.blog-kartenraster .blog-meta { font-size: .72rem; gap: .4rem; }
.blog-kartenraster .blog-leselink { margin-top: auto; font-size: .85rem; }
@media (max-width:63.99rem) { .blog-kartenraster { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:47.99rem) { .blog-kartenraster { grid-template-columns: minmax(0,1fr); }.blog-kartenraster .blog-artwork { aspect-ratio: auto; min-height: 15rem; } }

/* One common media frame for screenshots, SVG illustrations and the price graphic. */
.blog-kartenraster .blog-kartenbild { position: relative; width: 100%; aspect-ratio: 3 / 2; flex: 0 0 auto; overflow: hidden; }
.blog-kartenraster .blog-kartenbild > .blog-vorschaubild,
.blog-kartenraster .blog-kartenbild > .blog-artwork { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; box-sizing: border-box; }
.blog-kartenraster .blog-kartenbild img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Topic collections use the same cards and navigation as the main blog. */
.blog-themen-nav { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 2rem; }
.blog-themen-nav a { display:inline-flex; align-items:center; padding:.65rem 1rem; border:1px solid #d6d0c7; border-radius:2rem; color:#1c2532; background:#faf9f6; text-decoration:none; font-size:.85rem; line-height:1.45; transition:background .2s,color .2s; }
.blog-themen-nav a:hover,.blog-themen-nav a[aria-current="page"] { background:#1c2532; color:#f8eed8; border-color:#1c2532; }
.blog-meta .blog-kategorie-link { color:inherit; text-decoration:none; text-underline-offset:.2em; }
.blog-meta .blog-kategorie-link:hover { text-decoration:underline; }
.blog-thema-hero .blog-zurueck { display:block; width:fit-content; margin-bottom:1.7rem; }
.blog-thema-intro { max-width:44rem; margin:1.5rem 0 0; line-height:1.8; }
.blog-themen-nav a:focus-visible,.blog-kategorie-link:focus-visible { outline:2px solid #ab4616; outline-offset:4px; }
@media(max-width:47.99rem) { .blog-themen-nav { gap:.5rem; }.blog-themen-nav a { padding:.6rem .85rem; font-size:.8rem; } }

/* Topic headings follow the more compact article typography. */
.blog-seite .blog-thema-hero h1 { font-size:clamp(2.1rem,4.2vw,3.75rem); line-height:1.12; letter-spacing:-.03em; max-width:62rem; margin:1.25rem 0 1.5rem; text-wrap:balance; overflow-wrap:break-word; }
.blog-thema-hero { padding-bottom:3rem; }
.blog-thema-text { padding:0 0 4rem; }
.blog-thema-text .rahmen > div { max-width:48rem; padding-top:2.2rem; border-top:1px solid #d9d3c9; }
.blog-thema-text h2 { font-size:clamp(1.5rem,2.7vw,2rem); line-height:1.25; margin:0 0 1.2rem; }
.blog-thema-text p { line-height:1.85; color:#59616b; margin:0 0 1rem; }

.blog-zurueck { text-decoration:none; text-underline-offset:.2em; }
.blog-zurueck:hover { text-decoration:underline; }

.blog-artwork-budget { display:block; margin:1.6rem 0; max-width:17ch; font-size:clamp(1.5rem,2.7vw,2.3rem); font-weight:500; line-height:1.2; letter-spacing:-.03em; color:#1c2532; }

.blog-seiten{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin:2.5rem 0 0;}
.blog-seiten a{padding:.65rem 1rem;border:1px solid #a1a5a9;border-radius:2rem;color:#1c2532;text-decoration:none;}
.blog-seiten a[aria-current="page"]{background:#1c2532;color:#f8eed8;border-color:#1c2532;}
.blog-seiten a:hover{border-color:#ab4616;text-decoration:underline;text-underline-offset:.2em;}
.blog-seiten a:focus-visible{outline:2px solid #ab4616;outline-offset:3px;}