/* ============================================================ Pfoten-Ratgeber — Design System (production CSS) Single source of truth for the coded site. Drop into any static setup (Astro / Eleventy / plain HTML). Framework-agnostic. Fonts: load Nunito (700/800/900) + Nunito Sans (400/600/700) in . ============================================================ */ /* ---------- Tokens ---------- */ :root { /* surfaces */ --bg: #FBFAF7; --white: #FFFFFF; --tint: #EDF4EF; /* pale green fill (chips, badges, hero band) */ --tile: #F6F9F6; /* provider mini-tile fill */ --hero-blob-a: #E0EDE4; --hero-blob-b: #E6F0E9; /* text */ --text: #3F4A44; /* body */ --heading: #24352C; /* h1/h2/h3, darkest */ --muted: #68766D; --muted-2: #8A968E; /* greens */ --green: #5B8A72; /* primary (dots, buttons, borders) */ --green-dark: #3E6A52; /* links, strong emphasis */ --green-darker: #2C4A3A; /* CTA block bg, link hover */ --green-badge: #365745; /* badge on dark surfaces */ /* borders / rules */ --border: #E0E9E2; --border-2: #D6E4DA; --rule: #EFF4F0; /* table row divider */ --header-rule: #E8EDE9; /* amber (affiliate / commercial CTA) */ --amber: #B8863B; --amber-hover: #9A6F2E; --amber-tint: #FBF4E6; --amber-border: #EEDFC2; --amber-text: #4A3A1E; --amber-text-2: #5E4E30; /* warn / red tint (Nachteile, warnings) */ --warn-tint: #FDF1EF; --warn-border: #F2D8D3; --warn-text: #6E3A30; --warn-accent: #A34A3A; /* on dark surfaces */ --on-dark-1: #C4D6CA; --on-dark-2: #A9C7B5; /* type */ --font-head: 'Nunito', system-ui, sans-serif; --font-body: 'Nunito Sans', system-ui, sans-serif; /* radii */ --r-sm: 12px; --r: 16px; --r-lg: 18px; --r-xl: 20px; --r-2xl: 24px; --r-pill: 999px; /* elevation */ --shadow-card: 0 2px 12px rgba(46,74,58,0.06); /* layout */ --container: 1200px; --content: 780px; /* article column — text, tables, cards ALL this width */ --gutter: 32px; --header-h: 68px; } /* ---------- Base reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); font-family: var(--font-body); color: var(--text); font-size: 16.5px; line-height: 1.75; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } h1, h2, h3, th { text-wrap: balance; } p { margin: 0 0 1em; } /* Links — ALWAYS defined so editor-added links aren't browser-blue */ a { color: var(--green-dark); text-decoration-color: var(--on-dark-2); text-underline-offset: 3px; } a:hover { color: var(--green-darker); } /* Long German compounds in narrow card headings never clip */ .wrap-anywhere { overflow-wrap: anywhere; } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* Article layout: content column + sticky rail. Never mix widths in a column. */ .layout { max-width: var(--container); margin: 0 auto; padding: 48px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; } .content { min-width: 0; max-width: var(--content); } .content > section { margin: 0 0 56px; } /* every section full width of the column */ .rail { position: sticky; top: 92px; display: grid; gap: 20px; } @media (max-width: 940px) { .layout { grid-template-columns: 1fr; gap: 0; } .rail { position: static; } } /* ---------- Header ---------- */ .site-header { background: var(--white); border-bottom: 1px solid var(--header-rule); position: sticky; top: 0; z-index: 50; } .site-header__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: 32px; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo__mark { width: 38px; height: 38px; border-radius: 14px; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo__word { font-family: var(--font-head); font-weight: 900; font-size: 20px; color: var(--heading); white-space: nowrap; } .nav { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 700; } .nav a { text-decoration: none; color: var(--text); white-space: nowrap; } .nav a:hover, .nav a.is-active { color: var(--green-dark); } /* Buttons im Menü behalten ihre Button-Farben — .nav a darf sie nicht überschreiben („Jetzt vergleichen" = weiße Schrift) */ .nav a.btn--primary, .nav a.btn--primary:hover { color: var(--white); } .nav a.btn--primary:hover { background: var(--green-dark); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 800; text-decoration: none; border-radius: var(--r-pill); padding: 11px 22px; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; white-space: nowrap; } .btn--primary { background: var(--green); color: var(--white); } .btn--primary:hover { background: var(--green-dark); color: var(--white); } .btn--amber { background: var(--amber); color: var(--white); } /* affiliate / "Zum Anbieter *" */ .btn--amber:hover { background: var(--amber-hover); color: var(--white); } .btn--ghost { background: var(--white); color: var(--green-dark); border-color: var(--green); } /* internal "Mehr erfahren" */ .btn--ghost:hover { background: var(--tint); color: var(--green-dark); } .btn--on-dark { background: var(--white); color: var(--green-darker); } .btn--on-dark:hover { background: var(--tint); color: var(--green-darker); } /* ---------- Hero band ---------- */ .hero { background: var(--tint); position: relative; overflow: hidden; } .hero__blob { position: absolute; border-radius: 50%; pointer-events: none; } .hero__blob--a { width: 420px; height: 420px; background: var(--hero-blob-a); top: -180px; right: -120px; } .hero__blob--b { width: 260px; height: 260px; background: var(--hero-blob-b); bottom: -140px; left: -80px; } .hero__inner { max-width: var(--container); margin: 0 auto; padding: 52px var(--gutter) 56px; position: relative; } .hero h1 { font-family: var(--font-head); font-weight: 900; font-size: 44px; line-height: 1.15; color: var(--heading); max-width: 860px; margin: 20px 0 14px; } .hero__lead { font-size: 20px; line-height: 1.55; color: #4A5A50; max-width: 770px; margin: 0 0 26px; } .breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: #5E6E64; margin-bottom: 22px; } .breadcrumb a { color: #5E6E64; text-decoration: none; } .breadcrumb .sep { color: #A9BCAF; } .breadcrumb .current { color: var(--green-dark); } /* Badge pill (hero eyebrow) */ .badge-pill { display: inline-block; background: var(--white); color: var(--green-dark); font-family: var(--font-head); font-weight: 800; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; padding: 7px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-2); white-space: nowrap; } /* Author / meta card */ .meta-card { background: var(--white); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 16px 22px; display: inline-flex; align-items: center; gap: 14px; max-width: 660px; } .meta-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--white); font-family: var(--font-head); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .meta-card__text { font-size: 13.5px; line-height: 1.6; color: #4A5A50; } .meta-card__text .subtle { color: var(--muted-2); } /* ---------- Section title (with underline bar) ---------- */ .section-title { font-family: var(--font-head); font-weight: 800; font-size: 31px; line-height: 1.25; color: var(--heading); margin: 0 0 18px; scroll-margin-top: 90px; } .section-title::after { content: ''; display: block; width: 52px; height: 5px; border-radius: var(--r-pill); background: var(--green); margin-top: 12px; } .h3 { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--heading); margin: 0 0 12px; } /* ---------- Card ---------- */ .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px 26px; } .card--tint { background: var(--tint); border-color: #DCE8E0; } .card--feature { border: 2px solid var(--green); } /* ============================================================ CHECK / CROSS LISTS — the correct pattern. Author writes plain
  • with inline ; the marker is a ::before, so text (and any ) flows as ONE run. This avoids the flex-gap bug where became a separate flex item and pushed a big gap / bad wrap into the line. NEVER put the marker as a sibling element next to bare text inside a flex/grid
  • . ============================================================ */ .check-list, .cross-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .check-list > li, .cross-list > li { position: relative; padding-left: 30px; line-height: 1.6; } .check-list > li::before, .cross-list > li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 10.5px; color: var(--white); background: var(--green); } .cross-list > li::before { content: '–'; background: #E7ECE8; color: var(--muted); font-size: 14px; } /* Neutral dot list (facts, no positive/negative meaning) */ .dot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .dot-list > li { position: relative; padding-left: 30px; line-height: 1.6; } .dot-list > li::before { content: ''; position: absolute; left: 5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); } /* ---------- Tables (max 4 cols in the 780px column; no h-scroll) ---------- */ .table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-card); } .table { width: 100%; border-collapse: collapse; font-size: 15px; } .table th { background: var(--tint); font-family: var(--font-head); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .55px; color: var(--heading); text-align: left; padding: 13px 16px; } .table td { padding: 13px 16px; border-top: 1px solid var(--rule); vertical-align: top; } .table .price { text-align: right; font-weight: 700; color: var(--green-dark); white-space: nowrap; } .table tr.is-total td, .table td.is-total { background: var(--tint); font-weight: 800; } .table col.is-highlight, .table td.is-highlight, .table th.is-highlight { background: #E1EDE5; } /* ---------- Info / tip boxes ---------- */ .info-box { display: flex; gap: 16px; align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; } .info-box__icon { width: 40px; height: 40px; border-radius: 14px; background: var(--tint); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .info-box--green { background: var(--tint); border-color: #DCE8E0; } .info-box--amber { background: var(--amber-tint); border-color: var(--amber-border); color: var(--amber-text); } .info-box--amber a { color: var(--amber-text-2); } .info-box--warn { background: var(--warn-tint); border-color: var(--warn-border); color: var(--warn-text); } .box-label { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; } .info-box--green .box-label { color: var(--green-dark); } .info-box--warn .box-label { color: var(--warn-accent); } /* ---------- Provider card (replaces wide comparison tables) ---------- */ .provider-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--shadow-card); } .provider-card__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .provider-card__name { font-family: var(--font-head); font-weight: 800; font-size: 17.5px; color: var(--heading); } .provider-card__head .btn { margin-left: auto; } .stars { color: var(--amber); letter-spacing: 1px; font-size: 15px; } .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .tile { background: var(--tile); border-radius: var(--r-sm); padding: 12px 14px; } .tile__label { font-family: var(--font-head); font-weight: 800; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .tile__value { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--green-dark); overflow-wrap: anywhere; } /* ---------- Numbered tips ---------- */ .numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: n; } .numbered > li { display: flex; gap: 16px; align-items: flex-start; counter-increment: n; } .numbered > li::before { content: counter(n); flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: var(--white); font-family: var(--font-head); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; } /* ---------- FAQ + "Das Wichtigste" (native
    ) ---------- */ details.faq { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 0 24px; } details.faq + details.faq { margin-top: 12px; } .faq > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-head); font-weight: 800; font-size: 16.5px; color: var(--heading); } .faq > summary::-webkit-details-marker { display: none; } .faq > summary::after { content: '+'; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--green-dark); font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s, color .2s; } .faq[open] > summary::after { transform: rotate(45deg); background: var(--green); color: var(--white); } .faq > p { margin: 0; padding: 0 0 20px; font-size: 15.5px; line-height: 1.75; color: #4A5A50; } details.summary-box { background: var(--tint); border: 1px solid #DCE8E0; border-radius: var(--r-xl); padding: 22px 24px; } .summary-box > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--heading); } .summary-box > summary::-webkit-details-marker { display: none; } /* ---------- CTA block (section end) ---------- */ .cta-block { position: relative; overflow: hidden; background: var(--green-darker); border-radius: var(--r-2xl); padding: 40px 44px; color: var(--on-dark-1); } .cta-block__circle { position: absolute; border-radius: 50%; background: var(--green-badge); pointer-events: none; } .cta-block h2, .cta-block h3 { font-family: var(--font-head); color: var(--white); margin: 0 0 12px; } .cta-block .box-label { display: inline-block; background: var(--green-badge); color: var(--on-dark-2); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 14px; } /* ---------- Sticky CTA (docks before footer — NOT position:fixed) ---------- */ .sticky-cta { position: sticky; bottom: 20px; z-index: 40; width: fit-content; margin: 0 20px 20px auto; display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--border-2); border-radius: var(--r-pill); box-shadow: 0 8px 24px rgba(46,74,58,0.14); padding: 10px 12px 10px 20px; } .sticky-cta__text { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--heading); } /* ---------- Rail cards ---------- */ .toc { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; } .toc__title { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--heading); margin: 0 0 12px; } .toc ol { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; display: grid; gap: 8px; } .tip-card { background: var(--green-darker); border-radius: var(--r-lg); padding: 22px 24px; color: var(--on-dark-1); } .tip-card .box-label { display: inline-block; background: var(--green-badge); color: var(--on-dark-2); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 12px; } .tip-card h3 { font-family: var(--font-head); color: var(--white); font-size: 18px; margin: 0 0 10px; } /* ---------- Footer ---------- */ .site-footer { background: var(--heading); color: var(--on-dark-1); } .site-footer__grid { max-width: var(--container); margin: 0 auto; padding: 48px var(--gutter) 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .site-footer h4 { font-family: var(--font-head); color: var(--white); font-size: 14px; margin: 0 0 14px; } .site-footer a { color: var(--on-dark-1); text-decoration: none; display: block; padding: 4px 0; font-size: 14px; } .site-footer a:hover { color: var(--white); } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); } .site-footer__bottom .inner { max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter); font-size: 13px; color: var(--on-dark-2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } @media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } /* ---------- Affiliate disclosure (article end) ---------- */ .affiliate-note { font-size: 13.5px; line-height: 1.6; color: var(--muted-2); } /* ============================================================ HOMEPAGE / HUB building blocks ============================================================ */ .section { padding: 64px 0; } .section--white { background: var(--white); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .section-head h2 { font-family: var(--font-head); font-weight: 800; font-size: 34px; color: var(--heading); margin: 16px 0 10px; } .section-head p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0; } .eyebrow { display: inline-block; background: var(--tint); color: var(--green-dark); font-family: var(--font-head); font-weight: 800; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; padding: 7px 16px; border-radius: var(--r-pill); } /* centered article column for prose-only pages (homepage intro, legal) */ .prose-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); } /* Split hero (homepage): copy + image */ .hero--split .hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .hero__media img { width: 100%; height: 420px; object-fit: cover; border-radius: 28px; box-shadow: 0 20px 50px rgba(46,74,58,0.18); } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0; } .trust-row { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14.5px; font-weight: 700; color: var(--green-dark); } .trust-row .item { display: flex; align-items: center; gap: 7px; } .trust-row .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .btn--lg { font-size: 16.5px; padding: 15px 30px; } .btn--amber.btn--lg { box-shadow: 0 6px 18px rgba(184,134,59,0.3); } /* Category cards (image + gradient scrim) */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cat-card { position: relative; display: block; height: 340px; border-radius: var(--r-2xl); overflow: hidden; text-decoration: none; transition: transform .18s; } .cat-card:hover { transform: translateY(-4px); } .cat-card img { width: 100%; height: 100%; object-fit: cover; } .cat-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,53,44,0) 40%, rgba(36,53,44,0.88) 100%); } .cat-card__body { position: absolute; left: 26px; right: 26px; bottom: 24px; } .cat-card__body h3 { font-family: var(--font-head); font-weight: 900; font-size: 26px; color: #fff; margin: 0 0 4px; } .cat-card__body p { font-size: 14.5px; color: #D9E5DD; margin: 0 0 12px; } .cat-card__cta { display: inline-block; background: #fff; color: var(--green-darker); font-family: var(--font-head); font-weight: 800; font-size: 13.5px; padding: 9px 18px; border-radius: var(--r-pill); } /* Big stats */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .stat { background: var(--white); border: 1px solid var(--border); border-radius: 22px; padding: 32px 30px; text-align: center; } .stat__num { font-family: var(--font-head); font-weight: 900; font-size: 48px; color: var(--green-dark); line-height: 1; } .stat__label { font-size: 15.5px; font-weight: 700; color: #4A5A50; margin-top: 10px; } /* Bento + dark card */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .span-2 { grid-column: span 2; } .card--dark { position: relative; overflow: hidden; background: var(--green-darker); border-radius: var(--r-2xl); padding: 34px 36px; color: var(--on-dark-1); } .card--dark h3 { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: #fff; margin: 0 0 10px; } .card--dark a { color: #fff; } .card--dark .deco-circle { position: absolute; border-radius: 50%; background: var(--green-badge); pointer-events: none; } .icon-chip { width: 48px; height: 48px; border-radius: 16px; background: var(--green-badge); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; } /* Callouts (inline highlight boxes in prose) */ .callout { background: var(--tint); border: 1px solid var(--border-2); border-radius: var(--r-xl); padding: 20px 26px; } .callout__label { font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--green-dark); margin-bottom: 6px; } .callout p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #33413A; } .callout--amber { background: var(--amber-tint); border-color: var(--amber-border); } .callout--amber .callout__label { color: #9C6F1E; } .callout--amber p { color: var(--amber-text-2); } /* Emphasis lead paragraph (green tint, bigger) */ .lead-box { font-size: 17px; line-height: 1.7; font-weight: 600; color: #33413A; background: var(--tint); border-radius: var(--r); padding: 18px 24px; margin: 0 0 22px; } /* Promo / "Tipp der Redaktion" affiliate box (amber, with badge + button) */ .promo-box { background: var(--amber-tint); border: 1px solid var(--amber-border); border-radius: 22px; padding: 26px 30px; } .promo-box__badge { display: inline-block; background: var(--amber); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 14px; } .promo-box h3 { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--amber-text); margin: 0 0 8px; } .promo-box p { font-size: 15.5px; line-height: 1.7; color: var(--amber-text-2); margin: 0 0 18px; } .promo-box small { display: block; font-size: 12.5px; color: #9C8757; margin-top: 12px; } /* ============================================================ FORMS + CALCULATOR (contact form, cost calculator, Tarifrechner) ============================================================ */ .field { margin-bottom: 20px; } .field__label { display: block; font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .input, .select, .textarea { width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--border-2); background: var(--bg); font-family: inherit; font-size: 15.5px; color: #33413A; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(91,138,114,.15); } .textarea { min-height: 140px; resize: vertical; } .checkbox-row { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: #4A5A50; cursor: pointer; } .checkbox-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--green); width: 17px; height: 17px; } /* Segmented control (tier toggle, GOT-Satz picker) — buttons wired via JS */ .segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .segmented--2 { grid-template-columns: repeat(2, 1fr); } .segmented button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 6px; min-height: 48px; border-radius: 14px; border: 1.5px solid var(--border-2); background: var(--white); color: var(--heading); font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .segmented button:hover { border-color: var(--green); } .segmented button.is-active, .segmented button[aria-pressed="true"] { border-color: var(--green); background: var(--tint); color: var(--green-dark); } .note { font-size: 14.5px; line-height: 1.65; color: #5E6E64; background: #F4F8F5; border-radius: 14px; padding: 14px 18px; } .calc-result { background: var(--tint); border-radius: var(--r); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .calc-result__label { font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--green-dark); } .calc-result__sub { font-size: 14px; color: #5E6E64; margin-top: 3px; } .calc-result__value { font-family: var(--font-head); font-weight: 900; font-size: 30px; color: var(--green-darker); white-space: nowrap; } /* ============================================================ ARTICLE / BLOG CARD (Ratgeber hub, homepage previews) ============================================================ */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .article-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; text-decoration: none; transition: transform .18s, box-shadow .18s; } .article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .article-card img { width: 100%; height: 180px; object-fit: cover; } .article-card__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .article-card__tag { align-self: flex-start; background: var(--tint); color: var(--green-dark); font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); } .article-card__title { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--heading); line-height: 1.3; overflow-wrap: anywhere; } .article-card__excerpt { font-size: 14.5px; color: #4A5A50; margin: 0; } .article-card__meta { margin-top: auto; font-size: 13px; color: var(--muted-2); } /* ============================================================ MOBILE NAV (hamburger). Wire .is-open on .nav via a click handler on .nav-toggle in JS (see README). Desktop: toggle hidden. ============================================================ */ .nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); cursor: pointer; align-items: center; justify-content: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; display: block; width: 20px; height: 2px; background: var(--heading); position: relative; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } /* ============================================================ RESPONSIVE — the DCs were desktop-only; this is the intended mobile behaviour. Principles: never horizontal-scroll; collapse multi-col grids; stack the article rail below content; hit targets >= 44px; step type down one notch. ============================================================ */ @media (max-width: 1023px) { .hero--split .hero__inner { grid-template-columns: 1fr; gap: 32px; } .hero__media { order: -1; } .hero__media img { height: 300px; } .bento, .stats-row, .card-grid { grid-template-columns: repeat(2, 1fr); } .span-2 { grid-column: auto; } /* nav → hamburger drawer schon ab Tablet: Desktop-Nav (Logo + 7 Items + Button) passt erst ab ~1024 px einzeilig in die 68-px-Leiste — darunter würde sie umbrechen */ .nav-toggle { display: inline-flex; } .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--header-rule); box-shadow: 0 12px 24px rgba(46,74,58,0.08); padding: 8px 20px 16px; display: none; } .nav.is-open { display: flex; } .nav a { padding: 13px 0; white-space: normal; } .nav .btn { margin-top: 8px; text-align: center; } } @media (max-width: 767px) { body { font-size: 16px; } .hero h1 { font-size: 32px; } .hero__lead { font-size: 17px; } /* vw-Clamp: schmale Phones schrumpfen die H2, damit lange Komposita ("Hundehaftpflichtversicherungen") ohne Wortbruch passen */ .section-title, .section-head h2 { font-size: clamp(19px, 5.4vw, 25px); } .h3 { font-size: 20px; } .site-header__inner, .hero__inner, .layout, .prose-narrow, .container { padding-left: 20px; padding-right: 20px; } .hero__inner { padding-top: 36px; padding-bottom: 40px; } .section { padding: 44px 0; } .bento, .stats-row, .card-grid, .cat-grid { grid-template-columns: 1fr; } .cat-card { height: 260px; } .segmented { grid-template-columns: repeat(2, 1fr); } .card, .provider-card, .info-box, .cta-block, .promo-box { padding: 20px 20px; } .cta-block { padding: 28px 22px; } /* (Hamburger-Nav-Regeln liegen im 1023-px-Block — gelten hier weiter) */ /* sticky CTA spans width on phones */ .sticky-cta { left: 12px; right: 12px; width: auto; margin: 0 12px 12px; justify-content: space-between; } } /* ============================================================ Helpers used by the converted page templates in /pages ============================================================ */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card__title { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--heading); margin: 0 0 8px; } .card__text { font-size: 14.5px; line-height: 1.65; color: #4A5A50; margin: 0; } .author-box { display: flex; gap: 20px; align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: 22px; padding: 26px 30px; } .author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .figure { margin: 0; } .figure img { width: 100%; border-radius: var(--r-xl); display: block; background: var(--white); border: 1px solid var(--border); } .figure figcaption { font-size: 13.5px; color: var(--muted-2); margin-top: 10px; font-style: italic; } .source-note { font-size: 13.5px; color: var(--muted-2); line-height: 1.6; font-style: italic; margin: 12px 2px 0; } /* Article prose: styles raw HTML (e.g. rendered from Markdown) */ .rich p { font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; } .rich p:last-child { margin-bottom: 0; } .rich ul, .rich ol { margin: 0 0 18px; padding-left: 20px; } .rich li { font-size: 16px; line-height: 2; } .rich h3 { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--heading); margin: 28px 0 12px; } .rich strong { color: var(--heading); } @media (max-width: 767px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .author-box { flex-direction: column; gap: 14px; } } /* Homepage / hub helpers */ .section--tint { background: var(--tint); position: relative; overflow: hidden; } .pill-solid { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; padding: 8px 16px; border-radius: var(--r-pill); } .step-title { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--heading); margin: 16px 0 12px; } .media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } .media-row + .media-row { margin-top: 64px; } .media-row img { width: 100%; height: 300px; object-fit: cover; border-radius: 24px; box-shadow: 0 14px 36px rgba(46,74,58,0.14); display: block; } .media-row--reverse .media-row__media { order: -1; } @media (max-width: 767px) { .media-row { grid-template-columns: 1fr; gap: 24px; } .media-row + .media-row { margin-top: 40px; } .media-row--reverse .media-row__media { order: 0; } .step-title { font-size: 25px; } } /* Extra list-marker variants (fact bullet, warning, danger cross) */ .fact-list, .warn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fact-list > li, .warn-list > li { position: relative; padding-left: 30px; line-height: 1.55; } .fact-list > li::before { content: '•'; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--tint); color: var(--green-dark); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; } .warn-list > li::before { content: '!'; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: #FBF0E4; color: var(--amber); font-family: var(--font-head); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; } .cross-list--danger > li { color: var(--warn-text); } .cross-list--danger > li::before { background: #fff; border: 1px solid var(--warn-border); color: var(--warn-accent); } /* Link rows (hub "weiterführende Ratgeber" lists) */ .link-rows { display: grid; gap: 10px; } .link-row { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 15px 20px; font-size: 15px; font-weight: 700; color: var(--heading); text-decoration: none; } .link-row::before { content: '→'; color: var(--green); flex-shrink: 0; } .link-row:hover { background: #F4F8F5; color: var(--heading); } /* ============================================================ Rail einheitlich (site-weit): TOC-Markierung + kompakte Tipp-Karte ============================================================ */ .toc a.is-current { color: var(--green-darker); font-weight: 800; } .rail .tip-card { padding: 16px 18px; } .rail .tip-card .box-label { font-size: 11px; padding: 5px 12px; margin-bottom: 10px; } .rail .tip-card .btn { font-size: 14px; padding: 10px 14px; } .rail .tip-card h3 { font-size: 16px; margin: 0 0 6px; } .rail .tip-card p { margin: 0 0 12px; } /* Datentabellen intern scrollbar auf ALLEN Breiten (kein Seiten-H-Scroll): breite Vergleichstabellen (7 Spalten) passen nicht in die 780px-Spalte, ohne overflow-x:auto wären Spalten samt Anbieter-Links abgeschnitten. */ .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* ============================================================ Sitewide-Polish: Button-Lift, Bild-Zoom, Drawer-Animation, Sticky-CTA-Schließen ============================================================ */ } .btn:hover { transform: translateY(-1.5px); } .btn:active { transform: translateY(0); } .cat-card img, .article-card img { transition: transform .4s ease; } .cat-card:hover img, .article-card:hover img { transform: scale(1.05); } .sticky-cta__close { position: absolute; top: -10px; right: -4px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--white); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(46,74,58,.14); padding: 0; } .sticky-cta__close:hover { color: var(--heading); } /* ============================================================ HOMEPAGE V2 (index.html) — Hero mit Arch-Bild, Statbar im Hero, Schritt-Numerale. Nur additive Klassen (hp2-*). ============================================================ */ .hp2-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .8; pointer-events: none; } .hp2-hl { background: linear-gradient(180deg, transparent 62%, #F1E2BE 62%); border-radius: 4px; padding: 0 3px; } .hp2-arch-wrap { position: relative; } .hp2-arch-wrap .hp2-arch { width: 100%; height: 470px; object-fit: cover; border-radius: 300px 300px 32px 32px; border: 8px solid var(--white); box-shadow: 0 26px 64px rgba(46,74,58,.18); } .hp2-float { position: absolute; left: -26px; bottom: 28px; display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 12px 18px 12px 12px; box-shadow: 0 14px 36px rgba(46,74,58,.16); } .hp2-float__icon { width: 42px; height: 42px; border-radius: 14px; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hp2-float strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 14.5px; color: var(--heading); line-height: 1.35; white-space: nowrap; } .hp2-float small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; } .hp2-chips { gap: 10px; } .hp2-chip { background: var(--white); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 8px 16px 8px 10px; font-size: 13.5px; box-shadow: 0 2px 10px rgba(46,74,58,.06); white-space: nowrap; } .hp2-statbar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--white); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 18px 44px rgba(46,74,58,.10); padding: 28px 10px; margin: 64px 0 -104px; position: relative; z-index: 2; } .hp2-statbar .stat { background: none; border: 0; padding: 6px 18px; border-radius: 0; } .hp2-statbar .stat + .stat { border-left: 1px solid var(--rule); } .hp2-statbar .stat__num { font-size: 42px; } .hp2-after-statbar { padding-top: 168px; } .hp2-step { position: relative; } .hp2-pawmark { position: absolute; pointer-events: none; opacity: .08; } @media (max-width: 1023px) { .hp2-arch-wrap .hp2-arch { height: 340px; border-radius: 240px 240px 28px 28px; } .hp2-float { left: 12px; bottom: 16px; } .hp2-statbar { margin: 40px 0 -88px; } .hp2-after-statbar { padding-top: 150px; } } @media (max-width: 767px) { .hp2-arch-wrap .hp2-arch { height: 300px; border-width: 6px; } .hp2-statbar { grid-template-columns: 1fr; padding: 14px 22px; margin: 32px 0 -76px; } .hp2-statbar .stat { display: flex; align-items: baseline; gap: 14px; text-align: left; padding: 13px 0; } .hp2-statbar .stat + .stat { border-left: 0; border-top: 1px solid var(--rule); } .hp2-statbar .stat__num { font-size: 30px; min-width: 74px; } .hp2-statbar .stat__label { margin-top: 0; font-size: 14px; } .hp2-after-statbar { padding-top: 128px; } .hero-actions .btn--lg { flex: 1 1 100%; } } /* ============================================================ FABLE-CHROME-EXTRA — Pflicht-Anhang an Fables styles.css. Kein Design-Change: self-hosted Fonts (DSGVO), unsichtbare Nav-Dropdowns (SEO-Links), Skip-Link, Consent-Banner-Styles, Rail-Klickbarkeits-Cap. Wird von build_fable_css.py angehaengt. ============================================================ */ /* Fonts self-hosted (ersetzt Google-CDN; Variable Fonts, latin) */ @font-face { font-family:'Nunito'; font-style:normal; font-weight:200 1000; font-display:swap; src:url('/fonts/nunito-var.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:200 1000; font-display:swap; src:url('/fonts/nunito-sans-var.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Nunito Sans'; font-style:italic; font-weight:200 1000; font-display:swap; src:url('/fonts/nunito-sans-italic-var.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Skip-Link (a11y) */ .skip-link { position:absolute; left:-9999px; top:0; z-index:9900; background:var(--green-darker); color:#fff; padding:10px 18px; border-radius:0 0 12px 0; font-weight:700; } .skip-link:focus { left:0; color:#fff; } /* Nav-Dropdowns: Desktop-Hover-Verhalten NUR ab 1024px — vorher lagen die hover/transform-Regeln ungescoped und iOS-Touch (:hover!) schob die Untermenues im offenen Drawer per translateX(-50%) nach links weg (Mitchy 13.07.!) */ .nav .header__dropdown-link { display:block; padding:10px 14px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--text); text-decoration:none; white-space:nowrap; } .nav .header__dropdown-link:hover { background:var(--tint); color:var(--green-dark); } .nav .header__dropdown-link.font-semibold { font-weight:800; color:var(--green-dark); border-top:1px solid var(--rule); margin-top:6px; padding-top:12px; } @media (min-width:1024px) { .nav .header__dropdown { position:relative; display:inline-flex; } .nav .header__dropdown > a { display:inline-flex; align-items:center; gap:5px; } .nav .header__dropdown-menu { position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px); min-width:250px; background:var(--white); border:1px solid var(--border); border-radius:var(--r); box-shadow:0 14px 36px rgba(46,74,58,.14); padding:8px; opacity:0; visibility:hidden; transition:opacity .15s, transform .15s, visibility .15s; z-index:70; } .nav .header__dropdown:hover .header__dropdown-menu, .nav .header__dropdown:focus-within .header__dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .nav .header__dropdown-menu::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; } } /* Mobile Drawer (nav.is-open): Untermenues IMMER inline sichtbar, hover-immun. Drawer capped + scrollbar — sonst waeren untere Eintraege nie erreichbar. */ @media (max-width:1023px) { .nav { max-height:calc(100vh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .nav .header__dropdown { display:block; position:static; } .nav .header__dropdown-menu { position:static !important; transform:none !important; opacity:1 !important; visibility:visible !important; box-shadow:none; border:0; border-left:2px solid var(--tint); border-radius:0; min-width:0; padding:0 0 6px 14px; transition:none !important; } } /* Consent-Banner (#pr-consent, von consent.js erzeugt) */ #pr-consent{position:fixed;bottom:0;left:0;right:0;z-index:9600;background:var(--white);color:var(--text);border-top:1px solid var(--border);box-shadow:0 -4px 12px rgba(46,74,58,.10);padding:1rem 1.25rem;font-family:inherit;font-size:.95rem;line-height:1.5} #pr-consent .pr-consent__inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between} #pr-consent .pr-consent__text{flex:1 1 400px;color:var(--text)} #pr-consent .pr-consent__text strong{color:var(--heading)} #pr-consent .pr-consent__text a{color:var(--green-dark);text-decoration:underline} #pr-consent .pr-consent__actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} #pr-consent .pr-consent__btn{padding:.75rem 1.4rem;min-height:44px;border-radius:999px;font-family:var(--font-head);font-size:.9rem;font-weight:800;line-height:1.2;cursor:pointer;border:1px solid var(--green);transition:background .15s,color .15s} #pr-consent .pr-consent__btn--accept{background:var(--green);color:#fff} #pr-consent .pr-consent__btn--accept:hover{background:var(--green-dark)} #pr-consent .pr-consent__btn--decline{background:#fff;color:var(--green-dark);border-color:var(--green-dark)} #pr-consent .pr-consent__btn--decline:hover{background:var(--tint)} @media (max-width:640px){ #pr-consent{padding:.9rem 1rem} #pr-consent .pr-consent__inner{flex-direction:column;align-items:stretch;gap:.75rem} #pr-consent .pr-consent__text{flex-basis:auto} #pr-consent .pr-consent__actions .pr-consent__btn{flex:1 1 auto;text-align:center} } /* Rail-Klickbarkeits-Cap: sticky-Sidebar nie hoeher als Viewport (Lektion 11.07.) */ @media (min-width:941px) { .rail { max-height:calc(100vh - 108px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; } .rail::-webkit-scrollbar { width:6px; } .rail::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:3px; } .rail::-webkit-scrollbar-track { background:transparent; } /* Tipp-Karte an die Sidebar-Unterkante andocken: bei langem Inhaltsverzeichnis scrollt das TOC darueber, die Tipp-Karte (CTA) bleibt komplett sichtbar statt unten abgeschnitten zu werden (Mitchy 17.07.). Nur Desktop – auf Mobile ist .rail static, dort waere sticky ein unerwuenschter schwebender CTA. !important schlaegt das inline position:relative (43 Karten mit Deko-Kreis); sticky bleibt Containing-Block, der Kreis bleibt eingefasst + overflow-geclippt. */ .rail .tip-card { position:sticky !important; bottom:0; } } /* Ueberschriften: lange dt. Komposita (Hundekrankenversicherung) brachen auf Mobil MITTEN im Wort OHNE Trennstrich ("...versicherun|g") — Vision-Audit 13.07. hyphens:auto greift NUR wenn ohnehin gebrochen werden muss (Desktop bleibt ungetrennt), dann aber mit sauberem Trennstrich (lang=de gesetzt). */ h1,h2,h3,h4,h5,h6 { hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; } /* Mobile: breite Tabellen scrollen im Wrapper statt Seiten-Overflow (27px-Bug); Deko-Blobs sicher clippen */ .table-wrap { overflow-x:auto; } .hero { overflow:hidden; } @media (max-width:640px) { .table .price, .table td.price, .table th.price { white-space:normal; } } /* Footer: auf dem Phone einspaltig (2x173px + Gaps sprengten 390px-Viewport) */ @media (max-width:520px) { .site-footer__grid { grid-template-columns:1fr; gap:26px; } } /* H1 mobil: "Tierkrankenversicherung" (32px ~ 390px breit) sprengte die Box — hero overflow:hidden SCHNITT BUCHSTABEN AB. Kleinere Größe statt Worttrennung (Regel: Überschriften nie trennen); break-word nur als letztes Sicherheitsnetz. */ @media (max-width:480px) { h1 { font-size:clamp(21px, 6.5vw, 26px) !important; max-width:100%; min-width:0; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; } .hero__inner > * { min-width:0; max-width:100%; } } /* Mobile-Fixes Fable-Welle 13.07.: zweispaltige Inline-Style-Checklisten sprengten 375px (rechte Spalte abgeschnitten); !important schlaegt inline-style */ @media (max-width:640px) { .check-list, .cross-list { grid-template-columns:1fr !important; column-count:1 !important; } /* nowrap-Buttons mit langem Text sprengen 375px — mobile umbrechen lassen */ .btn { white-space:normal; } /* Statbar (Homepage-Hero v2): mehr Innenluft unten (Font-Scaling-Geraete schnitten "Leistungen" an) + kompakterer Abstand zur naechsten Sektion */ .hp2-statbar { padding:14px 22px 20px; margin-bottom:-60px; } .hp2-after-statbar { padding-top:92px; } /* GOT-Kostenrechner mobil (Mitchy 13.07.): Ergebnis gestapelt statt 4-zeilig-gequetschtem Label neben dem Preis; Tier-Buttons untereinander */ .tier-toggle { flex-direction:column; align-items:stretch; gap:10px; } .tier-toggle button { width:100%; justify-content:center; white-space:normal; padding:14px 18px; font-size:16px; } .calc-result { flex-direction:column; align-items:stretch; gap:2px; padding:18px 20px; } .calc-result__sub { font-size:14.5px; line-height:1.45; margin-top:4px; } .calc-result__value { font-size:34px; white-space:normal; margin-top:10px; } .select { width:100%; font-size:16px; } /* 16px verhindert iOS-Auto-Zoom */ .segmented button { min-height:56px; } } /* ============================================================ TABELLEN MOBIL: kein Horizontal-Scrollen mehr (Mitchy 13.07.). B22-JS setzt data-label aus dem thead + role-Attribute (Semantik bleibt fuer Screenreader trotz display:block erhalten) und klassifiziert: t-stack (>=3 Spalten -> Zeilen werden Karten) / t-flow (2 Spalten -> fliesst normal, Zellen brechen um). Best Practice "stacked cards". ============================================================ */ @media (max-width:640px) { .table-wrap { overflow-x:visible !important; } .table-wrap table, table.t-flow, table.t-stack { min-width:0 !important; width:100%; } /* 2-Spalter: fixed layout + anywhere zwingt auch Slash-Strings ("Praxis/Region/GOT-Satz") in die Spaltenbreite */ table.t-flow { table-layout:fixed; } table.t-flow th, table.t-flow td { white-space:normal !important; overflow-wrap:anywhere; } /* 50/50 belassen: langer rechter Header ("KOSTENBANDBREITE") braucht ~48% — ein breiterer Namens-Split brach IHN. Lange Namen ("Fremdkoerperentfernung") trennen auf echten Geraeten sauber via hyphens:auto (mit Trennstrich); der nackte Bruch tritt nur in Playwright-WebKit auf (kein Hyphen-Dict). */ /* rowspan-Komplextabellen: einziger erlaubter Scroll-Fallback */ .t-scroll-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; } .t-scroll-wrap table { min-width:560px !important; } /* colspan-Gruppentitel-Zeilen im Stack: volle Breite, getoent */ table.t-stack tr.t-group { background:var(--tint); border-color:var(--border-2); padding:2px 14px; } table.t-stack tr.t-group > td { border-top:0 !important; font-weight:800; color:var(--green-darker); justify-content:flex-start; text-align:left; } table.t-stack tr.t-group > td::before { display:none; } table.t-stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } table.t-stack, table.t-stack tbody, table.t-stack tr, table.t-stack td, table.t-stack th { display:block; width:100%; box-sizing:border-box; } table.t-stack tr { border:1px solid var(--border); border-radius:14px; padding:4px 14px; margin:0 0 10px; background:var(--white); } table.t-stack td, table.t-stack tbody th { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; border:0 !important; border-top:1px solid var(--rule) !important; text-align:right; white-space:normal !important; } table.t-stack tr > :first-child { border-top:0 !important; font-weight:800; color:var(--heading); text-align:left; justify-content:flex-start; } table.t-stack td::before, table.t-stack tbody th::before { content:attr(data-label); font-weight:700; font-size:13px; color:var(--muted); text-align:left; flex:0 0 44%; } table.t-stack tr > :first-child::before { display:none; } /* Gruener Highlight-Streifen randlos bis an die Kartenkanten (Mitchy 13.07.: "durchziehen, sonst klebt das K komisch am Rand"). Negativer Margin hebt das tr-Padding auf, Text bleibt via padding eingerueckt; overflow:hidden am tr clippt den Full-Bleed sauber an die runden Ecken. */ table.t-stack tr { overflow:hidden; } table.t-stack td.is-highlight, table.t-stack th.is-highlight { width:calc(100% + 28px); margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; } } /* Grid/Flex-Blowout-Schutz: breite Tabellen (min-width 560) duerfen Layout-Kinder nicht weiten — sonst scrollt die ganze Seite statt des .table-wrap */ .layout > *, .hub-main, main.content { min-width:0; } /* Hub-Container auf Header-Breite ausrichten (Mitchy 13.07.: "Content-Window = Menue-Breite, linkeste Logo-Kante bis rechtester Button, einheitlich"). katze/pferd/ratgeber-Hubs standen inline auf 960/1140px zentriert -> Content war schmaler + eingerueckt ggue. Hero/Header. main.hub-main (0,1,1) schlaegt die Inline-Regel .hub-main (0,1,0). Jetzt 1200/32 wie der Header; Prosa/ Headings bleiben linksbuendig & lesbar (820px, wie der Hero-Lead), nur Karten- Grids/Tabellen nutzen die volle Bandbreite. */ main.hub-main { max-width:var(--container); padding-left:var(--gutter); padding-right:var(--gutter); } /* Prosa/Headings lesbar (820px) — Descendant (Fliesstext ist teils in
    verschachtelt). Karten-interne p/h3 sind ohnehin schmaler -> Cap wirkungslos. Grids/Tabellen/Karten selbst werden NICHT gecappt -> volle Bandbreite. */ main.hub-main :is(p, h2, h3, h4, ul, ol, blockquote, .lead-box, .field__label) { max-width:820px; } /* Mobil: Hub-Gutter = Hero-Gutter (20px). Muss NACH obiger Regel stehen, sonst gewaenne var(--gutter)=32px per Quell-Reihenfolge. */ @media (max-width:767px) { main.hub-main { padding-left:20px; padding-right:20px; } } /* Sticky-CTA/Popups KOMPLETT abgeschafft (Mitchy 13.07.: "braucht kein Mensch, wir verlieren Leute") — Markup wird beim Intake entfernt; dieses Netz faengt jeden Rest (auch conversion.js-pr-sticky auf Altseiten). */ .sticky-cta, .pr-sticky-cta { display:none !important; } /* Nav-Chevrons: Dropdown-Eltern-Links bekommen denselben Pfeil wie die Alt-Seiten (.header__dropdown-toggle::after in redesign.min.css) — Mitchy 13.07.: Menue muss auf allen Seiten identisch aussehen. Nur Desktop: iOS feuert :hover bei Touch (WebKit-Gate-Regel). */ @media (min-width: 1024px) { .nav .header__dropdown > a:first-child { display: inline-flex; align-items: center; gap: 7px; } .nav .header__dropdown > a:first-child::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); flex-shrink: 0; transition: transform .15s; } .nav .header__dropdown:hover > a:first-child::after { transform: rotate(225deg); } } /* Footer-Bottom: .site-footer a { display:block } (Grid-Spalten) traf faelschlich auch die Bottom-Bar-Links -> "Impressum" / "·" / "Datenschutz" jeweils eigene Zeile, Separator verwaist (Vision-Audit 13.07.). Bottom-Links wieder inline. */ .site-footer__bottom a { display:inline; padding:0; } /* Stat-Kacheln + Tabellenzellen: overflow-wrap:anywhere brach lange Komposita ("Hundehaftpflic|ht", "DECKUNGSSUM|ME", "entzuendungshemme|nde") an BELIEBIGER Stelle OHNE Trennstrich und schlug damit hyphens:auto. break-word laesst zuerst die Silbentrennung greifen (mit Strich), bricht nur als letztes Mittel hart. table-layout:fixed haelt die Spaltenbreiten -> kein Overflow-Risiko. */ .tile__value, .tile__label, .provider-card__name, table.t-flow th, table.t-flow td, table.t-stack td, table.t-stack th { -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; } /* Provider-Vergleichskarten auf schmalem Handy (<=440px): 2-spaltige Stat-Kacheln waren zu eng -> "Hundehaftpflic|ht"/"DECKUNGSSUM|ME" brachen mitten im Wort (Playwright-WebKit trennt nicht per hyphens:auto). Einspaltig + Header gestapelt = volle Breite, alles passt OHNE Trennung. */ @media (max-width:440px){ .provider-cards .tile-grid, .card-grid .tile-grid { grid-template-columns:1fr !important; } .provider-card__header { flex-direction:column; align-items:flex-start; gap:.6rem; } } /* hp2-Hero (Homepage): .hero--split hat KEINE Deko-Blobs, braucht also kein overflow:hidden — das clippte aber die Straddle-Statbar (.hp2-statbar, margin-bottom negativ), sodass die Label-Zeile abgeschnitten wurde und die weisse Folgesektion sie ueberdeckte (Mitchy 13.07.). overflow sichtbar + Padding-Klasse (.hp2-aft) gefixt schafft Raum fuer den Ueberhang. */ .hero--split { overflow-x: clip; overflow-y: visible; } /* Stat-Tiles: NIE eine Kachel allein in der letzten Reihe (Waise) — Mitchy 13.07. Quantity-Queries geben pro Kachelzahl ausgewogene Reihen (4->2+2, 5->3+2, 6->3+3). 3 Kacheln (1 Reihe) + 8 (5+3) sind schon waisenfrei. Mobil einspaltig. */ .tile-grid:has(> .tile:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} .tile-grid:has(> .tile:nth-child(5):last-child), .tile-grid:has(> .tile:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)} @media(max-width:560px){.tile-grid{grid-template-columns:1fr !important}.tile-grid > .tile[style*="span 2"]{grid-column:auto !important}} /* ================== KONSOLIDIERUNG 14.07.2026 (Fable / .site-header) ================== Verifiziert gegen Live (Playwright Chromium+WebKit). Behebt nur visuell bestaetigte Defekte. KEINE Header-Geometrie-Aenderung (Fable ist Referenz). hyphens:auto BEWUSST beibehalten (WebKit-verifiziert, kein H1-Overflow @360). Codex-Handoff 2026-07-14, selektiv uebernommen. */ /* 1) sr-only: semantische Vergleichs-Spaltenlabels waren als grauer Text sichtbar */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} /* 2) Hamburger -> X: klares Auf/Zu-Feedback */ .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{transition:transform .18s ease,top .18s ease,background .18s ease} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} /* 3) Cookie-Banner mobil kompakter (Live 218px/26% -> ~165px/20%) */ @media (max-width:640px){ #pr-consent{padding:.65rem .75rem;font-size:.84rem;line-height:1.35} #pr-consent .pr-consent__inner{flex-direction:column;align-items:stretch;gap:.55rem} #pr-consent .pr-consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} #pr-consent .pr-consent__actions .pr-consent__btn{width:100%;padding:.65rem .75rem;font-size:.82rem;text-align:center} } /* 4) Lange CTAs mobil: Full-Width + weniger Padding -> max ~2 Zeilen statt 3-4. Buttons nie mit Silbentrennung (anders als Ueberschriften). */ .btn{word-break:normal;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none} @media (max-width:560px){ .btn--amber,.btn--lg{display:flex;width:100%;justify-content:center;text-align:center} } @media (max-width:400px){ .btn--amber,.btn--lg{padding-left:14px;padding-right:14px;font-size:14.5px} } /* Lange Affiliate-CTAs in Callouts brauchen mehr Breite (Ziel 2 statt 3 Zeilen) */ @media (max-width:480px){.callout{padding-left:16px;padding-right:16px}} /* 5) Footer: Touch-Ziele >=44px (Branding-Logo unberuehrt) */ @media (max-width:767px){ .site-footer__grid a{display:flex;align-items:center;min-height:44px;padding:6px 0} .site-footer__bottom a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px} } /* 6) Provider-Card-Kopf darf umbrechen; Anbietername wird nie zerquetscht */ .provider-card__head,.provider-card__header{flex-wrap:wrap;gap:8px} .provider-card__head>a,.provider-card__header>a{flex:0 0 auto} /* ===== TABLES-820 14.07.2026: Vergleichstabellen (t-stack, >=3 Spalten) auch auf Tablet-Portrait (641-820px) als Karten stapeln. t-flow (2 Spalten) NICHT betroffen. ===== */ @media (min-width:641px) and (max-width:820px){ .content .table-wrap{overflow-x:visible !important} table.t-stack{min-width:0 !important;width:100%} table.t-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} table.t-stack,table.t-stack tbody,table.t-stack tr,table.t-stack td,table.t-stack th{display:block;width:100%;box-sizing:border-box} table.t-stack tr{border:1px solid var(--border);border-radius:14px;padding:4px 14px;margin:0 0 10px;background:var(--white);overflow:hidden} table.t-stack tr.t-group{background:var(--tint);border-color:var(--border-2);padding:2px 14px} table.t-stack tr.t-group>td{border-top:0 !important;font-weight:800;color:var(--green-darker);justify-content:flex-start;text-align:left} table.t-stack tr.t-group>td::before{display:none} table.t-stack td,table.t-stack tbody th{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border:0 !important;border-top:1px solid var(--rule) !important;text-align:right;white-space:normal !important} table.t-stack tr>:first-child{border-top:0 !important;font-weight:800;color:var(--heading);text-align:left;justify-content:flex-start} table.t-stack td::before,table.t-stack tbody th::before{content:attr(data-label);font-weight:700;font-size:13px;color:var(--muted);text-align:left;flex:0 0 44%} table.t-stack tr>:first-child::before{display:none} } /* ===== HUK-Alternativen-Modul (hka) — 16.07.2026 FLACH im Seiten-Stil (Mitchy: kein Box-in-Box; Tabelle/Transparenz = Standard-Komponenten) ===== */ .hka-kicker{display:inline-block;font-size:max(.8rem,13px);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .hka-subhead{font-family:var(--font-head);font-size:19px;font-weight:800;color:var(--heading);margin:26px 0 12px} /* 3 Karten -> NIE 2 Spalten (Waisen-Kachel-Regel); minmax(0,1fr) gegen Button-Label-Sprengung (Lektion 15.07.) */ .hka__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:20px 0 4px} @media(max-width:820px){.hka__cards{grid-template-columns:1fr}} .hka-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;padding:1.15rem 1.2rem;background:var(--white)} .hka-card__name{font-family:var(--font-head);font-size:1.12rem;font-weight:700;margin:0 0 .35rem;color:var(--heading)} .hka-card__badge{display:inline-block;align-self:flex-start;background:var(--tint);color:var(--green-dark);font-size:max(.875rem,14px);font-weight:600;border-radius:var(--r-pill);padding:.2rem .7rem;margin-bottom:.7rem} .hka-card ul{margin:0 0 1rem;padding-left:1.15rem;font-size:max(.95rem,15px);line-height:1.6} .hka-card ul li{margin-bottom:.35rem} .hka-card .btn{margin-top:auto;font-size:13.5px;padding-left:12px;padding-right:12px;white-space:normal;text-align:center;line-height:1.35;min-height:44px} @media(max-width:640px){.hka-card .btn{width:100%}} /* -- Fix 2026-07-16: scrollbar-gutter fehlte im Fable-CSS -> 7.5px Header-Versatz vs Alt-System bei Overlay-Scrollbars (Codex-Restbefund) */ html{scrollbar-gutter:stable}