/* Webseitenwechsel — a personal practice, not a template catalogue. */
body[data-brand=webseitenwechsel] {
  --paper:#f3f0e8; --surface:#f9f7f1; --white:#f9f7f1;
  --ink:#191b19; --ink-soft:#30332e; --muted:#565a51; --line:#b9b9ac;
  --accent:#b33b24; --accent-dark:#8e2c1c; --accent-soft:#f1c4af; --sage:#e2e1d7;
  --sat-accent:#b33b24; --sat-paper:#e9e7dd;
  --font-body:Arial,"Helvetica Neue",Helvetica,sans-serif; --font-display:var(--font-body);
  --font-mono:var(--font-body); --focus:3px solid #b33b24;
  background:var(--paper); color:var(--ink); font-size:1rem; line-height:1.65;
}
body[data-brand=webseitenwechsel] .container { width:min(calc(100% - 3rem),80rem); max-width:80rem; }
body[data-brand=webseitenwechsel] :is(h1,h2,h3) { font-family:var(--font-display); font-weight:600; text-wrap:initial; }
body[data-brand=webseitenwechsel] h3 { font-size:clamp(1.25rem,1.7vw,1.6rem); line-height:1.25; }
body[data-brand=webseitenwechsel] :is(.sat-kicker,.eyebrow,.section-label,.studio-meta) { color:var(--accent); font-family:var(--font-body); font-size:.72rem; font-weight:600; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; }
body[data-brand=webseitenwechsel] .site-header { background:var(--paper); border-bottom:1px solid var(--line); }
body[data-brand=webseitenwechsel] .header-main { min-height:6rem; }
body[data-brand=webseitenwechsel] .wordmark { font-size:1.55rem; letter-spacing:-.075em; }
body[data-brand=webseitenwechsel] .wordmark span { font-style:normal; font-weight:500; }
body[data-brand=webseitenwechsel] .wordmark strong { font-size:1em; font-weight:800; }
body[data-brand=webseitenwechsel] .wordmark i { color:var(--accent); }
body[data-brand=webseitenwechsel] .site-navigation nav { background:var(--paper); box-shadow:none; }
body[data-brand=webseitenwechsel] .site-navigation nav a:not(.button) { font-size:.81rem; font-weight:500; }
body[data-brand=webseitenwechsel] .site-navigation > summary { border:0; border-bottom:1px solid var(--ink); padding-inline:0; letter-spacing:.04em; }
body[data-brand=webseitenwechsel] :is(.button,.sat-button,.studio-button) { display:inline-flex; align-items:center; justify-content:space-between; gap:1.7rem; max-width:100%; min-height:50px; padding:1rem 1.3rem; border:1px solid var(--ink); border-radius:0; background:var(--ink); color:var(--white); font-size:.95rem; font-weight:500; line-height:1.4; text-decoration:none; box-shadow:none; }
body[data-brand=webseitenwechsel] :is(.button,.sat-button,.studio-button):hover { background:var(--accent-dark); border-color:var(--accent-dark); color:var(--white); translate:none; }
body[data-brand=webseitenwechsel] :is(.button--secondary,.studio-button--secondary) { background:transparent; color:var(--ink); }
body[data-brand=webseitenwechsel] .site-navigation .button { font-size:.8rem; padding:.75rem 1rem; min-height:44px; }
body[data-brand=webseitenwechsel] .breadcrumb { background:var(--paper); border:0; }
body[data-brand=webseitenwechsel] .breadcrumb ol { font-size:.68rem; padding-block:1rem; text-transform:none; letter-spacing:0; }
body[data-brand=webseitenwechsel] .page-hero { background:var(--paper); border-bottom:1px solid var(--ink); padding-block:clamp(2rem,5vw,5rem) clamp(3rem,5vw,5rem); }
body[data-brand=webseitenwechsel] .page-hero-grid > .flow { max-width:72rem; }
body[data-brand=webseitenwechsel] .page-hero h1 { max-width:25ch; font-size:clamp(2.3rem,5.4vw,5rem); line-height:1.02; letter-spacing:-.055em; font-weight:600; }
body[data-brand=webseitenwechsel] .page-hero p:not(.eyebrow) { max-width:62ch; font-size:1.1rem; line-height:1.65; }
body[data-brand=webseitenwechsel] .page-hero .sat-hero-assurance { font-size:.8rem!important; color:var(--muted); }
body[data-brand=webseitenwechsel] .page-hero .sat-actions { gap:1rem 2rem; }
body[data-brand=webseitenwechsel] .page-hero .sat-actions > a:not(.sat-button) { font-size:.9rem; }
body[data-brand=webseitenwechsel] .section { background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); padding-block:clamp(3rem,5.5vw,5.5rem); }
body[data-brand=webseitenwechsel] :is(.section--ink,.section--accent,.section--paper) { background:var(--paper); color:var(--ink); }
body[data-brand=webseitenwechsel] .section--ink :is(.item-number,.process-number,.migration-after,.checklist li>span:first-child) { color:var(--accent); }
body[data-brand=webseitenwechsel] .section-header h2 { max-width:22ch; font-size:clamp(1.7rem,2.6vw,2.5rem); line-height:1.12; letter-spacing:-.04em; }
body[data-brand=webseitenwechsel] .section-intro { font-size:1rem; }
body[data-brand=webseitenwechsel] .item { border-color:var(--line); }
body[data-brand=webseitenwechsel] .item-number { font-size:.75rem; color:var(--accent); }
body[data-brand=webseitenwechsel] .section--ink .button--secondary { border-color:var(--ink); color:var(--ink); }
body[data-brand=webseitenwechsel] .section--ink .button--secondary:hover { color:var(--white); }
body[data-brand=webseitenwechsel] .section-note { border-left:2px solid var(--accent); background:transparent; padding:0 0 0 1.2rem; }
body[data-brand=webseitenwechsel] :is(.sat-detail,.sat-practice) { background:var(--paper); color:var(--ink); border-top:1px solid var(--line); }
body[data-brand=webseitenwechsel] .sat-trust { background:var(--ink); color:var(--white); border:0; }
body[data-brand=webseitenwechsel] .sat-trust :is(.sat-kicker,.sat-cost a:not(.sat-button)) { color:#efb39b; }
body[data-brand=webseitenwechsel] .sat-trust .sat-button { background:var(--white); color:var(--ink); border-color:var(--white); }
body[data-brand=webseitenwechsel] .sat-trust .sat-button:hover { background:#efb39b; }
body[data-brand=webseitenwechsel] .sat-trust .sat-cost { border-color:#8d9185; }
body[data-brand=webseitenwechsel] :is(.sat-trust,.sat-detail,.sat-practice) h2 { font-size:clamp(1.8rem,3vw,2.7rem); letter-spacing:-.045em; line-height:1.15; }
body[data-brand=webseitenwechsel] .sat-case { border:0; border-block:1px solid var(--line); padding:1.5rem 0; background:transparent; }
body[data-brand=webseitenwechsel] .sat-articles { gap:3rem; }
body[data-brand=webseitenwechsel] .sat-articles article { border-top:1px solid var(--ink); }
body[data-brand=webseitenwechsel] .sat-articles h3 { letter-spacing:-.025em; }
body[data-brand=webseitenwechsel] .sat-meta { color:var(--muted); }
body[data-brand=webseitenwechsel] .form-section { background:var(--paper); color:var(--ink); }
body[data-brand=webseitenwechsel] .form-layout { grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(2rem,5vw,5rem); }
body[data-brand=webseitenwechsel] .form-surface { background:var(--surface); padding:clamp(1.25rem,3vw,3rem); border-top:3px solid var(--ink); }
body[data-brand=webseitenwechsel] .form-surface > h2 { font-size:clamp(1.6rem,2.7vw,2.5rem); line-height:1.1; margin-bottom:2rem; }
body[data-brand=webseitenwechsel] .form-aside h2 { font-size:clamp(1.5rem,2.3vw,2.15rem); line-height:1.2; }
body[data-brand=webseitenwechsel] .contact-form legend { font-size:1.35rem; letter-spacing:-.03em; }
body[data-brand=webseitenwechsel] .contact-form :is(input,select,textarea) { border-color:#92978b; background:var(--paper); }
body[data-brand=webseitenwechsel] .contact-form :is(input,select,textarea):focus { background:#fff; box-shadow:none; }
body[data-brand=webseitenwechsel] .required-note { text-transform:none; letter-spacing:0; }
body[data-brand=webseitenwechsel] .site-footer { background:var(--paper); color:var(--ink); padding-block:4rem 2rem; border-top:1px solid var(--ink); }
body[data-brand=webseitenwechsel] .footer-brand p:last-child { color:var(--ink); font-weight:400; }
body[data-brand=webseitenwechsel] .footer-links li { border:0; }
body[data-brand=webseitenwechsel] .footer-links a { font-size:.9rem; min-height:40px; padding-block:.5rem; }
body[data-brand=webseitenwechsel] .footer-group h2 { color:var(--muted); font-weight:500; font-size:.75rem; letter-spacing:.06em; max-width:none; overflow-wrap:normal; }
body[data-brand=webseitenwechsel] .footer-bottom { color:var(--muted); border-color:var(--line); }
body[data-brand=webseitenwechsel] .legal-layout { padding-block:3rem; }
body[data-brand=webseitenwechsel] .legal-layout .prose h2 { font-size:1.65rem; }
/* Home: large typographic introduction, one real project and service index. */
.studio-hero { padding-block:clamp(2.5rem,5vw,5rem) 0; }
.studio-hero-top { display:flex; justify-content:space-between; gap:1rem 3rem; align-items:start; margin-bottom:3.5rem; }
.studio-meta { margin:0; }
body[data-brand=webseitenwechsel] .studio-title { font-size:clamp(3.5rem,8.9vw,8.3rem); max-width:18ch; line-height:.98; letter-spacing:-.07em; font-weight:600; margin:0; }
.studio-title span { display:block; }
.studio-title em { color:var(--accent); font-style:normal; }
.studio-hero-bottom { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:end; padding-block:3rem; }
.studio-intro { max-width:48ch; font-size:clamp(1.1rem,1.65vw,1.35rem); line-height:1.6; }
.studio-actions { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; }
.studio-actions > a:not(.studio-button) { display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; }
.studio-hero-bottom .studio-actions { justify-content:flex-end; }
.studio-work { margin:0; background:#deded4; padding:clamp(1rem,5vw,5rem); }
.studio-work a { display:block; }
.studio-work img { display:block; width:100%; height:auto; box-shadow:0 18px 40px #191b1915; }
.studio-work-caption { display:flex; justify-content:space-between; align-items:start; gap:1rem 3rem; padding-top:1.5rem; font-size:.85rem; line-height:1.5; }
.studio-work-caption > * { min-width:0; }
.studio-work-caption p { max-width:55ch; }
.studio-section { padding-block:clamp(3.5rem,7vw,7rem); border-bottom:1px solid var(--line); }
.studio-section-head { display:grid; grid-template-columns:1fr 2fr; align-items:start; gap:3rem; margin-bottom:3rem; }
body[data-brand=webseitenwechsel] .studio-section h2 { font-size:clamp(2rem,4.3vw,4rem); max-width:22ch; line-height:1.06; letter-spacing:-.05em; margin:0; }
.studio-services { border-top:1px solid var(--ink); }
.studio-service { display:grid; grid-template-columns:3rem 1fr 1.1fr; gap:2rem; padding-block:2rem; border-bottom:1px solid var(--line); align-items:start; }
.studio-index { color:var(--accent); font-size:.8rem; padding-top:.4rem; }
body[data-brand=webseitenwechsel] .studio-service h3 { font-size:clamp(1.6rem,2.6vw,2.6rem); letter-spacing:-.05em; margin:0; }
.studio-service p { max-width:52ch; }
.studio-service a { text-decoration:none; }
.studio-service a:hover { text-decoration:underline; text-decoration-color:var(--accent); }
.studio-service a > span { color:var(--accent); }
.studio-columns { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,7vw,7rem); }
.studio-columns p + p { margin-top:1.2rem; }
.studio-columns .studio-actions { margin-top:1.5rem; }
.studio-process { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.studio-process li { padding:1.3rem 0; border-bottom:1px solid var(--line); }
.studio-process li strong { display:block; font-size:1.2rem; margin-bottom:.6rem; }
.studio-closing { background:var(--ink); color:var(--white); padding-block:clamp(3.5rem,7vw,7rem); }
.studio-closing .studio-meta { color:#efb39b; }
body[data-brand=webseitenwechsel] .studio-closing h2 { font-size:clamp(2.7rem,5.5vw,5.3rem); max-width:20ch; line-height:1.02; letter-spacing:-.055em; margin:1.5rem 0; }
.studio-closing p { max-width:57ch; }
.studio-closing .studio-actions { margin-top:2rem; }
body[data-brand=webseitenwechsel] .studio-closing .studio-button { background:var(--white); color:var(--ink); border-color:var(--white); }
body[data-brand=webseitenwechsel] .studio-closing .studio-button:hover { background:#efb39b; }
@media(min-width:64rem) {
 body[data-brand=webseitenwechsel] .section-layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(3rem,6vw,6rem); }
 body[data-brand=webseitenwechsel] .section-header { top:2rem; }
}
@media(max-width:63.999rem) {
 .studio-hero-bottom,.studio-columns { grid-template-columns:1fr; }
 .studio-hero-bottom .studio-actions { justify-content:flex-start; }
 .studio-service { grid-template-columns:2rem 1fr; gap:1rem; }
 .studio-service > p,.studio-service > div:last-child { grid-column:2; }
 .studio-section-head { grid-template-columns:1fr; gap:1.2rem; }
 body[data-brand=webseitenwechsel] .form-layout { grid-template-columns:1fr; }
 .studio-work-caption { flex-wrap:wrap; }
}
@media(max-width:42rem) {
 body[data-brand=webseitenwechsel] .container { width:calc(100% - 2.5rem); }
 body[data-brand=webseitenwechsel] .header-main { min-height:5rem; }
 body[data-brand=webseitenwechsel] .wordmark { font-size:1.35rem; }
 body[data-brand=webseitenwechsel] .studio-title { font-size:clamp(2.65rem,10.8vw,4.4rem); }
 .studio-hero-top { flex-direction:column; margin-bottom:2rem; gap:.5rem; }
 .studio-hero-bottom { padding-block:2rem; }
 .studio-service { padding-block:1.5rem; }
 .studio-work-caption { font-size:.75rem; }
 body[data-brand=webseitenwechsel] .page-hero h1 { font-size:clamp(2rem,8vw,3rem); }
 body[data-brand=webseitenwechsel] .page-hero p:not(.eyebrow) { font-size:1rem; }
 body[data-brand=webseitenwechsel] :is(.button,.sat-button,.studio-button) { font-size:.9rem; }
}
@media(prefers-reduced-motion:no-preference) {
 body[data-brand=webseitenwechsel] :is(.button,.sat-button,.studio-button) { transition:background-color .18s ease,color .18s ease; }
}
/* Personal material and content-specific rhythm. */
body[data-brand=webseitenwechsel] .studio-title { max-width:none; }
.studio-intro .studio-actions { margin-top:1.8rem; justify-content:flex-start; }
.studio-intro .studio-actions + p { margin-top:1.5rem; font-size:.85rem; }
body[data-brand=webseitenwechsel] .studio-work h2 { font-size:clamp(2.7rem,6vw,6rem); line-height:1; letter-spacing:-.065em; max-width:none; }
.studio-work-caption > div { flex:1; }
.studio-work-caption h3 { margin:.75rem 0; max-width:27ch; }
.studio-work-caption a { display:inline-block; padding-block:.75rem; }
.studio-process li { display:grid; grid-template-columns:2rem 1fr; gap:1rem; }
.studio-process li h3 { margin-bottom:.6rem; }
.studio-person { display:flex; align-items:end; gap:1.2rem; margin:2rem 0; }
.studio-person img { width:clamp(8rem,14vw,12rem); max-width:45%; height:auto; filter:grayscale(1); }
.studio-person figcaption { max-width:22ch; font-size:.8rem; line-height:1.55; }
body[data-brand=webseitenwechsel] .contact-hero { padding-block:2rem 2.8rem; }
body[data-brand=webseitenwechsel] .contact-hero h1 { font-size:clamp(2.5rem,5vw,4.5rem); }
body[data-brand=webseitenwechsel] .contact-hero .studio-actions { margin-top:1.5rem; }
body[data-brand=webseitenwechsel] .form-aside .studio-person { margin-top:0; }
body[data-brand=webseitenwechsel] .field-help { text-transform:none; letter-spacing:0; font-size:.78rem; }
body[data-brand=webseitenwechsel] .checklist { border-color:var(--line); }
body[data-brand=webseitenwechsel] .form-aside .checklist { grid-template-columns:1fr; }
body[data-brand=webseitenwechsel] .form-aside .checklist li { border-right:0; padding-inline:0; }
body[data-brand=webseitenwechsel] .about-hero .page-hero-grid { display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.about-portrait { margin:0; }
.about-portrait img { width:100%; height:auto; display:block; filter:grayscale(1); }
.about-portrait figcaption { font-size:.75rem; padding-top:.8rem; }
body[data-brand=webseitenwechsel] .reference-screenshot--lead { margin-top:0; }
body[data-brand=webseitenwechsel] .reference-screenshot--lead img { border:0; }
body[data-brand=webseitenwechsel] .reference-screenshot--lead figcaption { font-size:.8rem; }
@media(max-width:63.999rem) { body[data-brand=webseitenwechsel] .about-hero .page-hero-grid { grid-template-columns:1fr; } .about-portrait { width:min(100%,22rem); } }
/* Final contrast and narrow-screen corrections from visual review. */
body[data-brand=webseitenwechsel] .studio-work .studio-meta { color:#9a301f; }
body[data-brand=webseitenwechsel] .studio-closing .studio-meta { color:#efb39b; }
.studio-work { padding-inline:0; }
.studio-work figure { margin:0; }
.studio-work-caption { display:grid; grid-template-columns:1fr 1fr; }
.studio-person img,.about-portrait img { filter:none; }
body[data-brand=webseitenwechsel] .contact-hero h1 { max-width:none; font-size:clamp(2.2rem,3.7vw,3.4rem); }
@media(max-width:63.999rem) { .studio-work-caption { grid-template-columns:1fr; gap:1.3rem; } }
/* A long reference case must not leave an empty title column beside its full length. */
body[data-brand=webseitenwechsel] .section-layout:has(.reference-case) { display:block; }
body[data-brand=webseitenwechsel] .section-layout:has(.reference-case) > .section-header { max-width:64rem; margin-bottom:2rem; }
body[data-brand=webseitenwechsel] .section-layout:has(.reference-case) > .section-header h2 { max-width:35ch; }