/* SteinRein Brand-Kit 5.1 - CSS Custom Properties + Kernklassen
   Freigegeben: PO 2026-08-27. Quelle der Wahrheit: steinrein-website-5-1.tokens.json
   Visuelle Referenz: https://claude.ai/code/artifact/6451fd06-5e67-490e-bc25-f07822425366 */

:root {
  /* Farben - Primitive */
  --sr-turquoise-brand: #00A6D7;   /* Baender, Deko, Icons; weisser Text nur >= 17px fett */
  --sr-turquoise-action: #009DCB;  /* Buttons/CTAs; Label >= 18px Lato 700 (3,1:1) */
  --sr-turquoise-action-dark: #007FA4; /* Hover, Links, Fokus (4,6:1) */
  --sr-brown: #8A6A46;             /* das eine Braun (5,3:1) */
  --sr-brown-dark: #604B34;
  --sr-brown-mosaic-light: #A1886B;
  --sr-sand: #BC9D7A;
  --sr-anthracite: #333333;
  --sr-text-secondary: #5B5B5B;
  --sr-text-muted: #8A8A8A;
  --sr-surface-tint: #F3F3F3;
  --sr-surface-soft: #FAFAFA;
  --sr-border: #D6D6D6;
  --sr-error: #E95160;
  --sr-success: #3D8C40;
  --sr-topic-tint: #DFF1FA;
  --sr-step-tile: #EDF2F6;
  --sr-hero-eyebrow: #9ADCF0;
  --sr-google-star: #FBBC05;

  /* Typografie */
  --sr-font-display: Raleway, Arial, sans-serif; /* nur 700 */
  --sr-font-body: Lato, Arial, sans-serif;       /* 400 / 700 */
  --sr-h1: 700 clamp(30px, 2.2vw + 22px, 42px)/1.15 var(--sr-font-display);
  --sr-h2: 700 clamp(26px, 1.6vw + 20px, 34px)/1.2 var(--sr-font-display);
  --sr-h3: 700 clamp(22px, 0.8vw + 19px, 26px)/1.3 var(--sr-font-display);
  --sr-h4: 700 clamp(19px, 0.4vw + 18px, 21px)/1.35 var(--sr-font-display);
  --sr-body: 400 16px/1.65 var(--sr-font-body);
  --sr-meta: 400 13.5px/1.5 var(--sr-font-body);

  /* Raster, Form, Schatten */
  --sr-space-1: 8px;  --sr-space-2: 16px; --sr-space-3: 24px; --sr-space-4: 32px;
  --sr-space-5: 48px; --sr-space-6: 64px; --sr-space-7: 96px;
  --sr-container: 1200px;
  --sr-reading: 720px;
  --sr-radius: 4px;
  --sr-radius-pill: 999px;
  --sr-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --sr-shadow-md: 0 6px 16px rgba(0,0,0,.10);
  --sr-shadow-lg: 0 16px 32px rgba(0,0,0,.14);
  --sr-motion: 200ms ease-out;
}

/* Basistext */
.sr-body { font: var(--sr-body); color: var(--sr-text-secondary); max-width: 70ch; }
h1, .sr-h1 { font: var(--sr-h1); color: var(--sr-anthracite); }
h2, .sr-h2 { font: var(--sr-h2); color: var(--sr-anthracite); }
h3, .sr-h3 { font: var(--sr-h3); color: var(--sr-anthracite); }
a { color: var(--sr-turquoise-action-dark); }
figcaption, .sr-caption { font: var(--sr-meta); color: var(--sr-brown); }

/* Pfeil-CTA (grosser Haupt-CTA): beidseitiges Parallelogramm, nie einseitig, nie gespiegelt */
.sr-cta {
  display: inline-block; background: var(--sr-turquoise-action); color: #fff;
  font: 700 19px/1.3 var(--sr-font-body); padding: 16px 52px; border: 0; cursor: pointer;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  transition: background var(--sr-motion);
}
.sr-cta:hover, .sr-cta:active { background: var(--sr-turquoise-action-dark); }

/* Skew-Button (kleiner CTA): 48px, Pseudo-Flaeche skew(-20deg) */
.sr-btn-skew {
  position: relative; z-index: 1; display: inline-block; color: #fff;
  font: 700 16px/1.3 var(--sr-font-body); padding: 12px 20px; margin: 0 14px;
  background: transparent; border: 0; cursor: pointer;
}
.sr-btn-skew::before {
  content: ""; position: absolute; inset: 0; left: -10px; width: calc(100% + 20px);
  background: var(--sr-turquoise-action); border-radius: var(--sr-radius);
  transform: skew(-20deg); z-index: -1; transition: background var(--sr-motion);
}
.sr-btn-skew:hover::before, .sr-btn-skew:active::before { background: var(--sr-turquoise-action-dark); }

/* Sekundaer-Button */
.sr-btn-secondary {
  display: inline-block; border: 2px solid var(--sr-anthracite); border-radius: var(--sr-radius);
  color: var(--sr-anthracite); font: 700 15px/1.3 var(--sr-font-body); padding: 11px 24px;
  background: transparent; cursor: pointer;
}

/* Fokus sichtbar, CI-Tuerkis statt Browser-Blau */
:where(a, button, .sr-cta, .sr-btn-skew, .sr-btn-secondary):focus-visible {
  outline: 3px solid var(--sr-turquoise-action-dark); outline-offset: 3px;
}

/* Formularfeld-Zustaende */
.sr-field {
  height: 44px; padding: 0 12px; font: 400 15px/1 var(--sr-font-body); color: var(--sr-anthracite);
  background: #fff; border: 1px solid var(--sr-border); border-radius: var(--sr-radius);
}
.sr-field:focus { border: 2px solid var(--sr-turquoise-action-dark); outline: none; }
.sr-field[aria-invalid="true"], .sr-field.is-error { border: 2px solid var(--sr-error); }
.sr-field.is-valid { border-color: var(--sr-success); }
.sr-field-error-msg { font: 700 13px/1.4 var(--sr-font-body); color: var(--sr-error); margin-top: 6px; }

/* Video-Markenrahmen: links Braun, rechts Tuerkis (Logo-Farbduett) */
.sr-video-frame {
  padding: 6px; border-radius: var(--sr-radius);
  background: linear-gradient(90deg, var(--sr-brown) 0 50%, var(--sr-turquoise-brand) 50% 100%);
}

@media (prefers-reduced-motion: reduce) {
  .sr-cta, .sr-btn-skew::before { transition: none; }
}

/*
 * SteinRein self-hosted font delivery v1
 * Local files only; no Google Fonts runtime request.
 * Source provenance and integrity: FONT_ASSET_MANIFEST_V1.json
 */

/* Raleway 700 — Latin Extended */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/raleway-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway 700 — Latin */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/raleway-700-latin.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;
}

/* Lato 400 — Latin Extended */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato 400 — Latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/lato-400-latin.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;
}

/* Lato 700 — Latin Extended */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato 700 — Latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/lato-700-latin.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;
}

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;font:var(--sr-body);color:var(--sr-text-secondary);background:#fff;hyphens:manual}img{max-width:100%;height:auto}p{max-width:70ch;margin:0 0 20px}h1,h2,h3{margin:0 0 24px;overflow-wrap:break-word}h3{font-size:22px;line-height:1.3}a{text-underline-offset:4px}a:focus-visible,summary:focus-visible{outline:3px solid var(--sr-turquoise-action-dark);outline-offset:4px}.wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}.draft{background:var(--sr-topic-tint);font-size:14px;color:var(--sr-anthracite);padding:10px 0}.header{border-bottom:1px solid var(--sr-border)}.header-inner{min-height:116px;display:flex;align-items:center;gap:32px}.logo{width:215px;height:40px;margin:16px 40px 16px 0}.header-label{font-weight:700;color:var(--sr-brown);margin-right:auto}.quiet-link{font-weight:700;padding:12px 0;min-height:44px}.trade-nav{display:flex;flex-wrap:wrap;gap:8px 24px;padding-block:12px;font-size:14px}.trade-nav a,.trade-nav span{padding:10px 0;min-height:44px}.trade-nav [aria-current]{font-weight:700;color:var(--sr-brown)}.skip{position:absolute;top:-150px;left:16px;background:#fff;color:var(--sr-anthracite);padding:16px;z-index:3}.skip:focus{top:16px}.hero{background:var(--sr-surface-soft);border-bottom:1px solid var(--sr-border)}.hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:64px;align-items:center;padding-block:48px}.breadcrumb{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;margin-bottom:24px}.eyebrow{font-size:16px;font-weight:700;color:var(--sr-brown);margin-bottom:16px}.intro{font-size:18px;line-height:1.65}.hero-image{margin:0}.hero-image img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:4px}.hero-image figcaption{padding-top:8px}.cta{display:inline-block;min-height:56px;text-align:center;background:var(--sr-turquoise-action);color:#fff;text-decoration:none;font:700 19px/1.3 var(--sr-font-body);padding:16px 32px;clip-path:polygon(20px 0,100% 0,calc(100% - 20px) 100%,0 100%);transition:background var(--sr-motion);max-width:100%}.cta:hover{background:var(--sr-turquoise-action-dark)}.cta:focus-visible{outline:0;box-shadow:inset 0 0 0 4px var(--sr-brown-dark);background:var(--sr-turquoise-action-dark)}.reassurance{font-size:14px;margin-top:16px;margin-bottom:0}.definition{padding-block:64px;max-width:850px}.definition>p:not(.eyebrow){font-size:18px}.problems{background:var(--sr-brown);padding-block:64px}.problems>.wrap>.eyebrow,.problems>.wrap>h2{color:#fff}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.cards article{background:#fff;padding:32px;border-radius:4px}.cards p{margin-bottom:0}.number{display:block;font:700 26px var(--sr-font-display);color:var(--sr-brown);margin-bottom:24px}.fit-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;padding-block:80px}.offer-box{background:var(--sr-surface-tint);padding:32px;border-top:6px solid var(--sr-turquoise-brand);border-radius:4px}.offer-box ul{padding-left:24px;margin-bottom:32px}.offer-box li{padding-bottom:16px}.exclusive-note{border-top:1px solid var(--sr-border);padding-top:20px;font-size:14px}.steps-section{background:var(--sr-surface-soft);padding-block:64px}.steps{list-style:none;counter-reset:steps;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;margin-top:32px}.steps li{counter-increment:steps}.steps li:before{content:counter(steps,decimal-leading-zero);font:700 26px var(--sr-font-display);display:block;color:var(--sr-turquoise-action-dark);padding-bottom:16px}.steps strong{display:block;color:var(--sr-anthracite);font-size:18px;margin-bottom:12px}.no-reservation{background:var(--sr-topic-tint);padding:16px 24px;max-width:none;margin-top:24px}.prices{padding-block:64px}.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.price{border:1px solid var(--sr-border);padding:24px;border-radius:4px}.price-value{color:var(--sr-brown-dark);font:700 34px var(--sr-font-display);margin-bottom:20px}.price-value span{display:block;font:700 16px/1.5 var(--sr-font-body);margin-top:12px}.price>p:last-child{margin-bottom:0}.price-note{margin-top:24px;max-width:none}.internal-note{border-left:4px solid var(--sr-brown);background:var(--sr-surface-tint);padding:20px;max-width:none;font-size:14px}.faq{padding-block:24px 80px;max-width:900px}.faq details{border-bottom:1px solid var(--sr-border)}.faq summary{cursor:pointer;font-weight:700;color:var(--sr-anthracite);padding:20px 8px;font-size:18px;min-height:56px}.faq details p{padding:0 8px 8px}.closing{background:var(--sr-topic-tint);padding-block:64px;text-align:center}.closing p{margin-inline:auto}.closing .eyebrow{color:var(--sr-brown)}footer{background:var(--sr-brown-dark);color:#fff;padding-block:48px}.footer-inner{display:flex;gap:64px;justify-content:space-between;align-items:center}.footer-inner img{margin:16px 32px 32px 0}.footer-inner p{font-size:14px;margin-bottom:0}section[id]{scroll-margin-top:24px}@media(max-width:1024px){.hero-grid{gap:32px}.cards{gap:16px}.cards article{padding:24px}.fit-grid{gap:32px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.header-inner{gap:16px}.header-label{display:none}.logo{margin-right:auto}.price-grid{gap:16px}.price{padding:20px}}@media(max-width:640px){.wrap{width:calc(100% - 32px)}.header-inner{min-height:100px}.logo{width:180px;height:auto;margin-right:16px}.quiet-link{font-size:14px}.hero-grid{grid-template-columns:1fr;padding-block:32px}.hero-copy{min-width:0}.hero-image{max-width:480px;width:100%;justify-self:center}.definition,.fit-grid,.prices{padding-block:48px}.cards,.fit-grid,.price-grid{grid-template-columns:1fr}.cards article{padding:24px}.problems,.steps-section,.closing{padding-block:48px}.cta{font-size:19px;padding-inline:26px;white-space:normal}.steps{grid-template-columns:1fr;gap:16px}.steps li{border-bottom:1px solid var(--sr-border);padding-bottom:8px}.steps li:before{float:left;margin-right:16px}.steps li p{clear:both;padding-top:8px}.footer-inner{display:block}.footer-inner>p{margin-top:24px}.header-inner .quiet-link{max-width:100px}.trade-nav{gap:0 20px}.faq{padding-bottom:48px}.hero-image figcaption{font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta{transition:none}}@media(forced-colors:active){.cta{clip-path:none;border:2px solid ButtonText}.cta:focus-visible{outline:3px solid Highlight}.internal-note{border:2px solid CanvasText}}
/* Brand-Kit 5.1: original square signet; native disclosure retains keyboard semantics. */
.faq summary{display:flex;align-items:flex-start;gap:16px;list-style:none}
.faq summary::marker{content:""}
.faq summary::-webkit-details-marker{display:none}
.faq-signet{display:block;flex:0 0 28px;width:28px;height:28px;object-fit:contain;margin-top:1px}
.faq-question{flex:1;min-width:0}
.faq-toggle{flex:0 0 24px;text-align:center;color:var(--sr-turquoise-action-dark);font-size:26px;line-height:28px}
.faq-toggle::before{content:"+"}
.faq details[open] .faq-toggle::before{content:"−"}
.faq details p{padding-left:52px;padding-right:48px}
@media(max-width:640px){.faq summary{gap:12px}.faq details p{padding-left:48px;padding-right:8px}}
/* Postal-region orientation complements the offer; it is not an availability selector. */
.territory-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.territory-copy{min-width:0}
.territory-map{margin:0;width:100%;max-width:520px;justify-self:center}
.territory-map img{display:block;width:100%;height:auto;object-fit:contain}
.territory-map figcaption{font-size:14px;line-height:1.6;color:var(--sr-brown-dark);margin-top:16px;max-width:55ch}
.territory-map>a{display:block;border-radius:4px}
.territory-map small{display:block;font-size:12px;line-height:1.6;color:var(--sr-text-secondary);margin-top:8px}
@media(max-width:1024px){.territory-layout{gap:32px}}
@media(max-width:760px){.territory-layout{grid-template-columns:1fr}.territory-map{max-width:520px}.territory-copy .price-note{margin-bottom:0}}

.breadcrumb a{color:var(--sr-brown-dark)}.closing .eyebrow{color:var(--sr-brown-dark)}footer a,footer a:hover{color:#fff}

/* R22: Partner-Zielgruppen und CTAs folgen dem SteinRein-Türkis. */
:root{--sr-partner-action:#007FA4;--sr-partner-action-dark:#007FA4;--sr-partner-action-soft:#DFF1FA}
.logo-link{display:inline-flex;align-items:center;margin-right:40px;border-radius:4px}
.logo-link .logo{margin:16px 0}
.header-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border-radius:6px;background:var(--sr-partner-action);color:#fff;text-decoration:none;font-weight:700;font-size:14px;line-height:1.25;text-align:center;transition:background var(--sr-motion)}
.header-cta:hover,.header-cta:active{background:var(--sr-partner-action-dark);color:#fff;text-decoration:underline}
.header-cta:focus-visible{outline:3px solid var(--sr-brown-dark);outline-offset:3px;background:var(--sr-partner-action-dark)}
.header-cta-secondary{background:#fff;color:var(--sr-partner-action);box-shadow:inset 0 0 0 2px var(--sr-partner-action)}
.header-cta-secondary:hover,.header-cta-secondary:active,.header-cta-secondary:focus-visible{background:var(--sr-partner-action-soft);color:var(--sr-partner-action-dark)}
.registration-benefits{list-style:none;padding:0;margin:24px 0}
.registration-benefits li{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;color:var(--sr-anthracite)}
.registration-benefits li::before{content:"✓";flex:0 0 auto;color:var(--sr-partner-action-dark);font-weight:700}
.cta{background:var(--sr-partner-action)}
.cta:hover,.cta:active,.cta:focus-visible{background:var(--sr-partner-action-dark)}
.cta-secondary{background:#fff;color:var(--sr-partner-action-dark);box-shadow:inset 0 0 0 2px var(--sr-partner-action)}
.cta-secondary:hover,.cta-secondary:active,.cta-secondary:focus-visible{background:var(--sr-partner-action-soft);color:var(--sr-partner-action-dark)}
.header-cta:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--sr-brown-dark);background:var(--sr-partner-action)}
.header-cta-secondary:focus-visible{box-shadow:inset 0 0 0 2px var(--sr-partner-action),0 0 0 5px var(--sr-partner-action);background:var(--sr-partner-action-soft);color:var(--sr-partner-action-dark)}
.cta:focus-visible{outline:0;box-shadow:inset 0 0 0 4px #fff;background:var(--sr-partner-action)}
.cta-secondary:focus-visible{box-shadow:inset 0 0 0 4px var(--sr-partner-action);background:var(--sr-partner-action-soft);color:var(--sr-partner-action-dark)}
.cta-group{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:28px}
.footer-logo-link{display:inline-block;border-radius:4px}
@media(max-width:1024px){.header-inner{flex-wrap:wrap;padding-block:12px}.logo-link{margin-right:auto}.logo-link .logo{margin:8px 0}.header-actions{flex:1 1 480px}}
@media(max-width:760px){.header-inner{align-items:center}.logo-link .logo{width:180px;margin-right:0}.header-actions{flex:1 0 100%;justify-content:stretch}.header-cta{flex:1 1 220px}.cta-group{align-items:stretch}.cta-group .cta{width:100%}}