/* Dressfolio Website. Drei Designs über html[data-design]: artdeco (Standard), masthead, avantgarde. */
@import url("fonts.css");

/* ---------- Design-Werte ---------- */
:root,
html[data-design="artdeco"] {
  color-scheme: dark;
  --bg: #0f1a24;
  --surface: #13212d;
  --fg: #e9dcc0;
  --muted: #cdbf9f;
  --faint: #a8977a;
  --accent: #c9a45c;
  --accent-strong: #e9cf8f;
  --on-accent: #0f1a24;
  --line: #3a4a58;
  --line-soft: #2a3a48;
  --switch-bg: #0b141c;
  --band-bg: #13212d;
  --band-fg: #e9dcc0;
  --band-muted: #cdbf9f;
  --font-display: "Poiret One", "Didot", serif;
  --font-body: "Josefin Sans", "Century Gothic", sans-serif;
  --body-weight: 300;
  --display-weight: 400;
  --display-tracking: 0.02em;
  --label-case: uppercase;
  --label-tracking: 0.28em;
  --photo-radius: 40px 40px 0 0;
  --button-cut: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --head-align: center;
  --t1: #3c4f63; --t2: #7a5c3e; --t3: #2f3d33; --t4: #8c7a63; --t5: #5a2f35; --t6: #46586b;
}
html[data-design="masthead"] {
  color-scheme: light;
  --bg: #fbfbfa;
  --surface: #f3f2ef;
  --fg: #111111;
  --muted: #333333;
  --faint: #5c5c5c;
  --accent: #111111;
  --accent-strong: #111111;
  --on-accent: #fbfbfa;
  --line: #111111;
  --line-soft: #d9d9d6;
  --switch-bg: #111111;
  --band-bg: #111111;
  --band-fg: #f3f1ec;
  --band-muted: #d4d1ca;
  --font-display: "Bodoni Moda", "Didot", serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --body-weight: 400;
  --display-weight: 400;
  --display-tracking: -0.015em;
  --label-case: uppercase;
  --label-tracking: 0.16em;
  --photo-radius: 0;
  --button-cut: none;
  --head-align: start;
  --t1: #2b2b2b; --t2: #c9c4ba; --t3: #6d6a64; --t4: #e2ddd3; --t5: #111111; --t6: #9a958c;
}
html[data-design="avantgarde"] {
  color-scheme: light;
  --bg: #efeee9;
  --surface: #e6e5df;
  --fg: #0c0c0c;
  --muted: #33332f;
  --faint: #55554f;
  --accent: #1d3bff;
  --accent-strong: #1d3bff;
  --on-accent: #ffffff;
  --line: #0c0c0c;
  --line-soft: #c8c6bd;
  --switch-bg: #efeee9;
  --band-bg: #0c0c0c;
  --band-fg: #ecebe6;
  --band-muted: #b9b8b2;
  --font-display: "Syne", "Arial Black", sans-serif;
  --font-body: "IBM Plex Mono", "Courier New", monospace;
  --body-weight: 400;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --label-case: none;
  --label-tracking: 0;
  --photo-radius: 0;
  --button-cut: none;
  --head-align: start;
  --t1: #1d3bff; --t2: #c8c6bd; --t3: #0c0c0c; --t4: #8a8a83; --t5: #d8d6cf; --t6: #3f3f3b;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: 17px;
  line-height: 1.65;
}
a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-wrap: balance; }
p { margin: 0; }
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.label {
  font-size: 13px;
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
  color: var(--accent);
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--bg); padding: 8px 12px; z-index: 10; }

/* ---------- Umschaltleiste ---------- */
.switch { background: var(--switch-bg); border-bottom: 1px solid var(--line); }
.switch .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; padding-block: 6px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.switch span { color: var(--faint); }
.switch button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 10px 2px; cursor: pointer;
  color: var(--muted); border-bottom: 1px solid transparent;
}
.switch button[aria-pressed="true"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
html[data-design="masthead"] .switch span { color: #a6a39d; }
html[data-design="masthead"] .switch button { color: #f3f1ec; }
html[data-design="masthead"] .switch button[aria-pressed="true"] { color: #f3f1ec; border-bottom-color: #f3f1ec; }
html[data-design="avantgarde"] .switch .wrap { justify-content: flex-start; letter-spacing: 0; text-transform: none; font-size: 13px; }
html[data-design="avantgarde"] .switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); padding-inline: 12px; border-bottom-color: transparent; }

/* ---------- Kopf ---------- */
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding-block: 26px; }
.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--fg); }
.logo:hover { color: var(--fg); }
.logo > span { display: none; }
html[data-design="artdeco"] .logo .l-artdeco,
html[data-design="masthead"] .logo .l-masthead,
html[data-design="avantgarde"] .logo .l-avantgarde { display: inline-flex; align-items: center; gap: 14px; }
.l-artdeco b { font-family: "Poiret One", serif; font-weight: 400; font-size: 30px; letter-spacing: 0.22em; }
.l-masthead b { font-family: "Bodoni Moda", serif; font-weight: 400; font-size: clamp(56px, 11vw, 128px); line-height: 1; letter-spacing: -0.02em; }
.l-avantgarde b { font-family: "Syne", sans-serif; font-weight: 800; font-size: 38px; line-height: 0.9; letter-spacing: -0.02em; }
.l-avantgarde i { font-style: normal; color: var(--accent); }
.menu { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; }
.menu a { text-decoration: none; padding-block: 8px; }
.lang { font-size: 13px; letter-spacing: 0.12em; color: var(--faint); }
.lang a { color: var(--faint); }
.deco-rule { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); height: 4px; }
html:not([data-design="artdeco"]) .deco-rule { display: none; }

html[data-design="masthead"] .site-head .wrap { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 18px; padding-bottom: 0; }
html[data-design="masthead"] .logo { justify-content: center; order: 2; }
html[data-design="masthead"] .lang { order: 1; text-align: right; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
html[data-design="masthead"] .menu { order: 3; justify-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 6px; font-weight: 700; color: var(--fg); }
html[data-design="masthead"] .menu a { color: var(--fg); }
html[data-design="avantgarde"] .site-head .wrap { align-items: flex-start; }
html[data-design="avantgarde"] .menu { letter-spacing: 0; text-transform: none; }
html[data-design="avantgarde"] .menu a { color: var(--fg); }
html[data-design="avantgarde"] .menu a::before { content: attr(data-index) " "; color: var(--accent); }

/* ---------- Hero ---------- */
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: 72px 88px; }
.hero-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.08; }
.hero .lead { max-width: 34em; font-size: 20px; color: var(--muted); }
.hero .note { font-size: 14px; color: var(--faint); }
.actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.button {
  display: inline-block; padding: 16px 28px; background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
  clip-path: var(--button-cut);
}
.button:hover { color: var(--on-accent); filter: brightness(1.08); }
.textlink { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 4px; }
.filterwords { display: none; }
html[data-design="masthead"] .hero h1 { font-size: clamp(44px, 6.5vw, 76px); line-height: 1.02; }
html[data-design="masthead"] .hero h1 em { font-style: italic; }
html[data-design="masthead"] .button { letter-spacing: 0.14em; font-weight: 700; }
html[data-design="avantgarde"] .hero h1 { font-size: clamp(42px, 6vw, 78px); line-height: 0.95; hyphens: auto; }
html[data-design="avantgarde"] .hero h1 em { font-style: normal; color: var(--accent); }
html[data-design="avantgarde"] .button { font-family: "Syne", sans-serif; font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 17px; }
html[data-design="avantgarde"] .textlink { letter-spacing: 0; text-transform: none; }
html[data-design="avantgarde"] .filterwords { display: flex; flex-wrap: wrap; gap: 0 26px; font-family: "Syne", sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; }
.filterwords span { color: var(--faint); }
.filterwords span:first-child { color: var(--fg); }
.filterwords sup { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: 14px; color: var(--accent); }

/* Handy-Modell */
.phone-wrap { flex: 1 1 300px; display: flex; justify-content: center; }
.phone { width: 300px; max-width: 100%; border: 1px solid var(--accent); border-radius: 36px; padding: 10px; }
.screen { border-radius: 28px; background: var(--bg); border: 1px solid var(--line-soft); padding: 18px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.screen-logo { text-align: center; font-family: var(--font-display); font-size: 18px; letter-spacing: 0.2em; }
.screen-menu { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); padding: 5px 0; display: flex; justify-content: center; gap: 14px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.screen-menu span:first-child { color: var(--accent); }
.screen-chips { display: flex; gap: 6px; font-size: 10px; overflow: hidden; }
.screen-chips span { padding: 3px 8px; border: 1px solid var(--line); white-space: nowrap; }
.screen-chips span:first-child { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.tiles i { aspect-ratio: 3 / 4.3; border-radius: var(--photo-radius); background: var(--t1); }
.tiles i:nth-child(6n+2) { background: var(--t2); }
.tiles i:nth-child(6n+3) { background: var(--t3); }
.tiles i:nth-child(6n+4) { background: var(--t4); }
.tiles i:nth-child(6n+5) { background: var(--t5); }
.tiles i:nth-child(6n+6) { background: var(--t6); }
html[data-design="masthead"] .screen-logo { font-size: 24px; letter-spacing: 0; }
html[data-design="masthead"] .screen-chips span { border: 0; padding: 0; margin-right: 6px; color: var(--faint); }
html[data-design="masthead"] .screen-chips span:first-child { background: none; color: var(--fg); border-bottom: 1px solid var(--fg); }
html[data-design="avantgarde"] .phone { border-width: 2px; border-color: var(--line); transform: rotate(3deg); }
html[data-design="avantgarde"] .screen-logo { text-align: left; font-weight: 800; letter-spacing: -0.02em; }
html[data-design="avantgarde"] .screen-menu { border: 0; justify-content: flex-start; letter-spacing: 0; text-transform: none; }
html[data-design="avantgarde"] .tiles i:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (prefers-reduced-motion: reduce) { html[data-design="avantgarde"] .phone { transform: none; } }

/* ---------- Abschnitte ---------- */
.section { padding-block: 92px; }
.section.band { background: var(--band-bg); color: var(--band-fg); }
.section.band p, .section.band li { color: var(--band-muted); }
.section-head { display: flex; flex-direction: column; align-items: var(--head-align); text-align: var(--head-align); gap: 12px; margin-bottom: 48px; }
html[data-design="artdeco"] .section-head { text-align: center; }
.section-head h2 { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.1; }
.section-head p { max-width: 36em; font-size: 18px; color: var(--muted); }
.section.band .section-head p { color: var(--band-muted); }
html[data-design="masthead"] .section-head { border-top: 3px double var(--line); padding-top: 18px; }
html[data-design="masthead"] .band .section-head { border-top-color: var(--band-fg); }
html[data-design="masthead"] .section-head .label { color: var(--fg); font-weight: 700; }
html[data-design="masthead"] .band .section-head .label { color: var(--band-fg); }
html[data-design="masthead"] .section-head p:not(.label) { font-family: "Bodoni Moda", serif; font-style: italic; }
html[data-design="avantgarde"] .section-head .label { font-size: 14px; }
html[data-design="avantgarde"] .section-head h2 { font-size: clamp(40px, 6vw, 56px); line-height: 0.95; }

/* Funktionen */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); list-style: none; margin: 0; padding: 0; }
.features li { background: var(--band-bg); padding: 34px 30px; display: flex; flex-direction: column; gap: 10px; }
.features h3 { font-size: 25px; color: var(--accent-strong); }
html:not([data-design="artdeco"]) .features h3 { color: inherit; }
html[data-design="masthead"] .features { background: none; border: 0; gap: 40px 48px; }
html[data-design="masthead"] .features li { background: none; padding: 16px 0 0; border-top: 1px solid var(--band-fg); }
html[data-design="masthead"] .features h3 { font-family: "Karla", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
html[data-design="masthead"] .features p { font-family: "Bodoni Moda", serif; font-size: 21px; line-height: 1.4; color: var(--band-fg); }
html[data-design="avantgarde"] .features { grid-template-columns: 1fr; background: none; border: 0; gap: 0; counter-reset: f; }
html[data-design="avantgarde"] .features li { background: none; padding: 22px 0; border-top: 1px solid #3a3a3d; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 28px; align-items: baseline; counter-increment: f; }
html[data-design="avantgarde"] .features li::before { content: "1." counter(f); color: #7d91ff; font-size: 14px; }
html[data-design="avantgarde"] .features h3 { font-weight: 700; font-size: 25px; letter-spacing: 0; }
@media (max-width: 720px) { html[data-design="avantgarde"] .features li { grid-template-columns: 1fr; } }

/* Ebenen */
.tiers { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.tier { flex: 1 1 290px; border: 1px solid var(--line); padding: 38px 30px; display: flex; flex-direction: column; gap: 16px; }
.tier h3 { font-size: 32px; }
.tier .price { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.tier p:not(.price) { color: var(--muted); }
.tier.full { border-color: var(--accent); background: var(--surface); }
html[data-design="artdeco"] .tier.full h3 { color: var(--accent-strong); }
html[data-design="masthead"] .tier { border: 0; border-top: 1px solid var(--line); padding: 22px 0; }
html[data-design="masthead"] .tier.full { background: none; }
html[data-design="masthead"] .tier.full h3 { font-style: italic; }
html[data-design="masthead"] .tier .price { color: var(--fg); font-weight: 700; }
html[data-design="avantgarde"] .tiers { align-items: flex-end; }
html[data-design="avantgarde"] .tier { border-width: 2px; }
html[data-design="avantgarde"] .tier:nth-child(2) { min-height: 300px; }
html[data-design="avantgarde"] .tier.full { min-height: 360px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html[data-design="avantgarde"] .tier.full p, html[data-design="avantgarde"] .tier.full .price { color: var(--on-accent); }
html[data-design="avantgarde"] .tier .price { letter-spacing: 0; text-transform: none; }

/* Warum */
.why { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; align-items: var(--head-align); text-align: var(--head-align); }
html[data-design="artdeco"] .why { text-align: center; align-items: center; }
.why .quote { font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 34px); line-height: 1.35; color: var(--fg); }
html[data-design="avantgarde"] .why .quote { font-weight: 700; line-height: 1.2; }
.why p { color: var(--muted); max-width: 38em; }
.why .sign { font-size: 15px; color: var(--faint); }
html[data-design="masthead"] .why .sign { font-family: "Bodoni Moda", serif; font-style: italic; }
.fan { width: 66px; height: 42px; }
html:not([data-design="artdeco"]) .fan { display: none; }

/* Designs */
.designs { display: flex; flex-wrap: wrap; gap: 24px; }
.designs figure { flex: 1 1 280px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.designs .swatch { height: 200px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); }
.sw-artdeco { background: #0f1a24; color: #c9a45c; font-family: "Poiret One", serif; font-size: 28px; letter-spacing: 0.2em; }
.sw-masthead { background: #fbfbfa; color: #111111; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 42px; }
.sw-avantgarde { background: #efeee9; color: #0c0c0c; font-family: "Syne", sans-serif; font-weight: 800; font-size: 38px; line-height: 0.92; flex-direction: column; align-items: flex-start !important; padding-left: 30px; }
.sw-avantgarde i { font-style: normal; color: #1d3bff; }
.designs figcaption { color: var(--muted); }
html[data-design="avantgarde"] .designs figure:nth-child(2) { padding-top: 48px; }
html[data-design="avantgarde"] .designs figure:nth-child(3) { padding-top: 96px; }

/* Datenschutz-Kurzfassung */
.privacy { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.privacy .section-head { flex: 1 1 340px; margin: 0; }
.privacy ul { flex: 999 1 480px; min-width: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.privacy li { padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.privacy li strong { color: var(--fg); font-weight: 600; }
html[data-design="avantgarde"] .section.privacy-band { background: var(--accent); color: var(--on-accent); }
html[data-design="avantgarde"] .privacy-band .label,
html[data-design="avantgarde"] .privacy-band li,
html[data-design="avantgarde"] .privacy-band li strong { color: var(--on-accent); }
html[data-design="avantgarde"] .privacy-band ul, html[data-design="avantgarde"] .privacy-band li { border-color: rgba(255, 255, 255, 0.45); }

/* Fragen */
.faq { max-width: 880px; display: flex; flex-direction: column; gap: 28px; }
html[data-design="artdeco"] .faq { margin: 0 auto; }
.faq h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--accent-strong); }
html:not([data-design="artdeco"]) .faq h3 { color: var(--fg); }
html[data-design="masthead"] .faq h3 { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; font-size: 24px; }
html[data-design="avantgarde"] .faq h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 22px; }
.faq p { color: var(--muted); }

/* Unterseiten */
.page { padding-block: 64px 96px; }
.page h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.1; margin-bottom: 18px; }
.page .intro { max-width: 40em; font-size: 19px; color: var(--muted); margin-bottom: 40px; }
.page h2 { font-size: 28px; margin: 44px 0 14px; }
.page h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; font-size: 18px; margin: 26px 0 8px; }
.page p, .page li { color: var(--muted); max-width: 46em; }
.page p + p { margin-top: 12px; }
.page ul { padding-left: 20px; }
.table-box { overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; }
th, td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
thead th { background: var(--surface); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
tbody th { font-weight: 600; color: var(--fg); }
tbody th small { display: block; font-weight: var(--body-weight); color: var(--faint); font-size: 14px; }
td { color: var(--muted); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.fineprint { font-size: 14px; color: var(--faint); margin-top: 14px; }
.placeholder { background: rgba(201, 164, 92, 0.18); padding: 0 4px; }

/* ---------- Fuß ---------- */
.site-foot { border-top: 1px solid var(--accent); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; padding-block: 36px 44px; font-size: 14px; color: var(--faint); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-foot a { text-decoration: none; padding-block: 6px; }
.foot-name { font-family: var(--font-display); font-size: 22px; color: var(--fg); }
html[data-design="artdeco"] .foot-name { letter-spacing: 0.22em; }
html[data-design="masthead"] .site-foot { background: #111111; border: 0; }
html[data-design="masthead"] .site-foot .wrap { color: #a6a39d; }
html[data-design="masthead"] .site-foot a, html[data-design="masthead"] .foot-name { color: #f3f1ec; }
html[data-design="avantgarde"] .site-foot { border-top: 2px solid var(--line); }
.hero { overflow-x: clip; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }
h1, h2 { overflow-wrap: break-word; hyphens: auto; }
.section.band figcaption { color: var(--band-muted); }
.lang a { text-decoration: none; padding: 4px 2px; }
.lang a:hover, .lang a:focus-visible { color: var(--fg); text-decoration: underline; }
.lang a[aria-current] { color: var(--fg); font-weight: 600; }

/* Smartphone: Umschaltleiste und Menü jeweils in einer Zeile */
@media (max-width: 720px) {
  .switch .wrap { flex-wrap: nowrap; justify-content: center; gap: 18px; padding-block: 4px; font-size: 11px; letter-spacing: 0.12em; }
  .switch .wrap > span { display: none; }
  .switch button { white-space: nowrap; }
  html[data-design="avantgarde"] .switch .wrap { justify-content: center; font-size: 12px; gap: 10px; }
  html[data-design="avantgarde"] .switch button[aria-pressed="true"] { padding-inline: 8px; }

  .site-head .wrap { flex-wrap: wrap; gap: 10px 16px; padding-block: 16px 10px; }
  .logo { order: 1; }
  .lang { order: 2; margin-left: auto; }
  .menu {
    order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 12px;
    font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; justify-content: space-between;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { padding-block: 6px; flex: none; }
  .nav-long { display: none; }

  html[data-design="masthead"] .site-head .wrap { flex-wrap: nowrap; gap: 10px; padding-top: 10px; }
  html[data-design="masthead"] .lang { margin-left: 0; padding-bottom: 6px; }
  html[data-design="masthead"] .menu { justify-content: space-between; padding-block: 4px; }
  html[data-design="avantgarde"] .menu { font-size: 12px; gap: 10px; }
  html[data-design="avantgarde"] .menu a::before { content: none; }
}
@media (max-width: 380px) { .menu { letter-spacing: 0.03em; gap: 8px; } }

/* Avantgarde: keine automatischen Trennstriche in Überschriften */
html[data-design="avantgarde"] h1,
html[data-design="avantgarde"] h2,
html[data-design="avantgarde"] h3 {
  overflow-wrap: normal;
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 16 7 7;
  -webkit-hyphenate-limit-before: 7; -webkit-hyphenate-limit-after: 7;
}
html[data-design="avantgarde"] .hero h1 { hyphens: manual; -webkit-hyphens: manual; font-size: clamp(25px, 4.6vw, 64px); }
@media (max-width: 720px) {
  html[data-design="avantgarde"] .hero h1 { font-size: 6.6vw; }
  html[data-design="avantgarde"] .page h1 { font-size: 28px; }
  html[data-design="avantgarde"] .page h2 { font-size: 22px; }
}
@media (max-width: 380px) { html[data-design="avantgarde"] .page h1 { font-size: 25px; } }