/* New front page 2026-10-25 on our template Design-W12-Grau (startseite/css/w12.css), additions and fixes.
   Loaded only on that page, after w12.css. The template keeps its colours in :root of its own HTML, so they live here. */
:root {
	--mainTextColor: #555;
	--secondaryTextColor: #222;
	--mainTextLightColor: #fff;
	--secondaryTextDarkColor: #2a3740;
	--textBGColor: #6262621a;
	--activeLink: #2a3740;
	--headerBG: #fff;
	--headerTextColor: #222;
	--headerTextHoverColor: #404040;
	--burgerMenuLines: #222;
	--burgerMenuLinesActive: #222;
	--burgerMenuBG: #fff;
	--heroBGColor: #f5f5f5;
	--heroTitleColor: #2a3740;
	--buttonBGColor: var(--sn-coral);
	--buttonBGHoverColor: var(--sn-coral-dark);
	--servicesBGColor: #f5f5f5;
	--cardsBGColor: #fff;
	--listItemColor: #454545;
	--cardHoverTextColor: #fff;
	--accordionHeaderBG: #fff;
	--accordionHeaderActiveTextColor: var(--sn-coral-dark);
	--accordionBorderColor: #adadad38;
	--footerBG: #2a3740;
	--footerTextColor: #fff;
	--mainFont: 'DM Sans', system-ui, sans-serif;
	--secondaryFont: 'IBM Plex Sans', system-ui, sans-serif;
	/* the template writes this name with a Cyrillic "С" and the grey variant never defines it */
	--accentСolor: var(--sn-coral-dark);
	/* one accent on the graphite template: coral (white text on it ≥ 4.5:1) */
	--sn-coral: #c8441f;
	--sn-coral-dark: #a8381a;
	--sn-coral-soft: #fbe6df;
}

/* base: the theme is off on this page */
html body.startseite-neu { margin: 0; background: #fff; }
body.startseite-neu img { max-width: 100%; }
.sn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.startseite-neu main section, .startseite-neu main .about { scroll-margin-top: 80px; }

/* buttons */
.sn-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 5px; background: var(--buttonBGColor); border: 2px solid var(--buttonBGColor); color: #fff !important; font: 700 16px var(--mainFont); transition: background .2s ease-out, border-color .2s ease-out; }
.sn-button:hover { background: var(--buttonBGHoverColor); border-color: var(--buttonBGHoverColor); }
.sn-button--small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.sn-button--ghost { background: transparent; color: #222 !important; border-color: #404040; }
.sn-button--ghost:hover { background: #404040; color: #fff !important; }

/* hero */
.hero__wrapper { min-height: 720px; }
.hero__title { font-size: 60px; line-height: 1.15; }
.hero__descr { font-size: 18px; line-height: 1.6; color: #444; }
.sn-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 540px; }
.sn-form input { flex: 1 1 240px; min-width: 0; height: 56px; padding: 0 18px; border: 2px solid #cfcfcf; border-radius: 5px; background: #fff; color: #222; font: 400 17px var(--mainFont); }
.sn-form input:focus { outline: none; border-color: #404040; }
.sn-form button { flex: 0 0 auto; height: 56px; padding: 0 32px; border: 0; border-radius: 5px; background: var(--buttonBGColor); color: #fff; font: 700 17px var(--mainFont); cursor: pointer; transition: background .2s ease-out; }
.sn-form button:hover { background: var(--buttonBGHoverColor); }
.sn-hint { margin-top: 16px; font: 400 14px/1.6 var(--mainFont); color: #555; }
.sn-hint a, .sn-note a { text-decoration: underline; text-underline-offset: 3px; }
.sn-hint a, .sn-note a { color: #222; }

/* section heads */
.sn-head { text-align: center; margin-bottom: 40px; }
.sn-head .section-title, .services__title { margin-bottom: 16px; }
.services__subtitle, .info__subtitle, .faq__subtitle { color: #555; text-transform: uppercase; letter-spacing: .08em; font: 700 14px/1.3 var(--mainFont); }
.sn-lead { font: 400 17px/1.6 var(--mainFont); color: #555; max-width: 640px; margin: 0 auto 40px; }

/* steps (template "about" cards: the picture shows on hover) */
.about { padding: 100px 0 80px; }
.about-card__wrapper { border-radius: 5px; background: #fff; }
.about-card__text-content { position: relative; z-index: 1; padding: 40px 30px; }
.about-card__icon { color: #2a3740; font-size: 48px; }
.about-card__image-content { height: 120px; z-index: 0; }
.about-card__image-content img { object-position: top; }

/* designs */
.sn-designs-section { padding: 100px 0; }
.sn-designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; margin-bottom: 40px; text-align: left; }
.sn-design { display: flex; flex-direction: column; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 5px 5px 20px 5px rgba(3, 9, 37, .1); color: #222; transition: transform .2s ease-out; }
.sn-design:hover { transform: translateY(-4px); }
.sn-design img { display: block; width: 100%; aspect-ratio: 10 / 7; object-fit: cover; object-position: top; filter: grayscale(100%); transition: filter .4s ease-in-out; }
.sn-design:hover img { filter: grayscale(0%); }
.sn-design__body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 26px; }
.sn-design strong { font: 700 20px/1.2 var(--secondaryFont); color: #2a3740; }
.sn-design__body span { font: 400 15px/1.6 var(--mainFont); color: #555; }

/* included (template "info", checklist instead of progress bars) */
.info { padding: 100px 0; }
.info__image { height: 480px; }
.info__text { font-size: 17px; line-height: 1.6; }
.sn-checks { display: flex; flex-direction: column; gap: 14px; }
.sn-checks li { padding-left: 32px; background: url('startseite/img/check.png') no-repeat left 6px / 14px 14px; font: 500 17px/1.5 var(--mainFont); color: #222; }

/* prices: one product price, the online options below as information (2026-10-25) */
#preise { padding: 100px 0; }
#preise .services__body { align-items: stretch; text-align: left; }
#preise .services__subtitle, #preise .services__title { text-align: center; }
.sn-plan { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; background: #fff; border: 2px solid var(--sn-coral); border-radius: 5px; padding: 36px 40px; box-shadow: 5px 5px 20px 5px rgba(3, 9, 37, .08); }
.sn-plan__title { font: 700 26px/1.25 var(--secondaryFont); color: #2a3740; margin-bottom: 10px; }
.sn-plan__text p { font: 400 17px/1.6 var(--mainFont); color: #444; }
.sn-plan__prices { display: flex; flex-direction: column; gap: 10px; }
.sn-plan__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid #e6e6e6; font: 400 17px var(--mainFont); color: #444; }
.sn-plan__row strong { font: 700 28px/1 var(--secondaryFont); color: #2a3740; }
.sn-plan__prices .sn-button { margin-top: 10px; }
.sn-online__title { font: 700 20px/1.3 var(--secondaryFont); color: #2a3740; margin: 56px 0 18px; }
.sn-online { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sn-online__item { background: #fff; border: 1px solid #e2e2e2; border-radius: 5px; padding: 22px 24px; }
.sn-online__item p { font: 400 15px/1.55 var(--mainFont); color: #555; }
.sn-online__item .sn-online__name { font: 700 16px/1.3 var(--mainFont); color: #2a3740; }
.sn-online__item .sn-online__price { font: 700 20px/1.3 var(--secondaryFont); color: #2a3740; margin: 4px 0 8px; }
.sn-note { margin-top: 28px; font: 400 15px/1.8 var(--mainFont); color: #444; }

/* faq (button headers) + final call */
.faq { padding: 100px 0; }
.faq__column_left .section-title { margin-bottom: 24px; }
.accordion-header { width: 100%; border: 0; background: #fff; text-align: left; font: inherit; }
.accordion-header__title { font-size: 17px; font-weight: 500; }
.accordion-header__icon { font-size: 14px; color: #2a3740; }
.accordion-body__text, .accordion-body__text p { font: 400 16px/1.7 var(--mainFont); color: #444; margin: 0; }
.faq .sn-hint { margin-top: 24px; }
.sn-final { justify-content: center; }
.sn-final__box { background: #f5f5f5; border-radius: 5px; padding: 48px 40px; }
.sn-final__title { font: 700 32px/1.25 var(--secondaryFont); color: #2a3740; margin-bottom: 12px; }
.sn-final__box p { font: 400 17px/1.6 var(--mainFont); color: #444; margin-bottom: 24px; }

/* coral accent: buttons (via --buttonBGColor), small labels, icons, badge, the words "10 Minuten", hover links */
.sn-accent { color: var(--sn-coral); }
.hero__subtitle { background: var(--sn-coral-soft); color: var(--sn-coral-dark); }
.services__subtitle, .info__subtitle, .faq__subtitle { color: var(--sn-coral-dark); }
.about-card__icon { color: var(--sn-coral); }
.sn-button--ghost:hover { background: var(--sn-coral); border-color: var(--sn-coral); }
.sn-hint a:hover, .sn-note a:hover { color: var(--sn-coral-dark) !important; }
.sn-form input:focus { border-color: var(--sn-coral); }
.sn-design:hover strong { color: var(--sn-coral-dark); }
.accordion-header:hover .accordion-header__title, .accordion-header:hover .accordion-header__icon { color: var(--sn-coral-dark); }

/* tablet */
@media (max-width: 992px) {
	.sn-plan { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
	.sn-online { grid-template-columns: 1fr; }
	.hero__wrapper { order: 1; padding: 32px 0 8px; }
	.hero__image { order: 2; width: 280px; height: 280px; margin: 24px auto 0; }
	.hero__title { font-size: 44px; }
	.sn-designs { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
	.info__body, .faq__body { flex-direction: column; }
	.info__image { height: 320px; }
	.faq__column { flex-basis: auto; }
	.services__card, .about-card { flex: 1 0 100%; }
}

/* phone */
@media (max-width: 568px) {
	.hero__title { font-size: 36px; }
	.hero__descr { font-size: 17px; }
	.sn-form { flex-direction: column; }
	.sn-form input { flex: none; height: 54px; }
	.sn-form button { width: 100%; height: 54px; }
	.section-title { font-size: 30px; }
	.about, .sn-designs-section, .info, #preise, .faq { padding: 60px 0; }
	.info__image { height: 240px; }
	.sn-final__box { padding: 32px 20px; }
	.sn-final__title { font-size: 26px; }
}

/* Startaktion pill in the hero (links to /startaktion/) */
.sn-promo { display: inline-flex; align-self: flex-start; margin-top: 18px; padding: 10px 18px; border-radius: 999px; background: var(--sn-coral-soft); color: var(--sn-coral-dark) !important; font: 500 15px/1.4 var(--mainFont); text-decoration: none !important; transition: background .2s; }
.sn-promo:hover { background: #f8d6ca; }
.sn-promo strong { margin-right: 6px; }