/* Design tokens: Akzentfarbe und Grundfarben hier ändern. Keine externen Fonts. */
:root {
  --bg:#171815;
  --panel:#20211d;
  --text:#f0f0e7;
  --muted:#a3a59b;
  --line:#3b3d35;
  --accent:#ffffff;
  --max:1440px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px
}
::selection {
  background:var(--accent);
  color:var(--bg)
}
.wrap {
  width:calc(100% - 96px);
  max-width:var(--max);
  margin-inline:auto
}
.header {
  min-height:98px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-bottom:1px solid var(--line)
}
.logo {
  font-weight:950;
  letter-spacing:-1.3px;
  font-size:23px;
  white-space:nowrap
}
.logo i {
  font-style:normal;
  font-size:10px;
  vertical-align:top;
  margin-left:3px
}
.header nav {
  display:flex;
  gap:36px;
  font-size:13px
}
.header nav a:hover,.footer a:hover {
  color:var(--accent)
}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  background:var(--accent);
  color:var(--bg);
  padding:19px 24px;
  font-size:14px;
  font-weight:700;
  border:1px solid var(--accent);
  transition:background .2s,transform .2s
}
.button:hover {
  background:#e8e8e8;
  transform:translateY(-2px)
}
.button span {
  font-size:22px;
  line-height:1
}
.button.small {
  padding:12px 18px;
  font-size:12px;
  gap:28px
}
.hero-meta {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:1.4px;
  margin:28px 0 12px
}
.dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  margin-right:9px
}
.hero h1 {
  font-size:clamp(65px,13.9vw,215px);
  letter-spacing:-.078em;
  line-height:1.06;
  margin:0 0 28px;
  font-weight:950;
  white-space:nowrap
}
.brand-star {
  display:inline-block;
  color:var(--accent);
  font-size:.63em;
  vertical-align:11%;
  margin-left:.1em
}
.hero-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  min-height:565px
}
.hero-copy {
  padding:38px 32px 0 0;
  display:flex;
  align-items:flex-start;
  flex-direction:column
}
.eyebrow {
  font:10px/1.5 'Courier New',monospace;
  letter-spacing:1.6px;
  font-weight:bold;
  margin:0 0 26px
}
.hero h2,.section h2 {
  font-size:clamp(40px,4.65vw,70px);
  letter-spacing:-3px;
  line-height:1.02;
  margin:0 0 24px;
  font-weight:600
}
em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400
}
.hero h2 em {
  color:var(--accent)
}
.hero-copy>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:0 0 30px
}
.hero-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:auto;
  padding:42px 0 22px;
  font-size:9px;
  letter-spacing:1.2px
}
.hero-foot a {
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:20px
}
.hero-image {
  margin:0;
  position:relative;
  min-height:565px;
  overflow:hidden;
  background:#555
}
.hero-image img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  object-position:50% 10%;
  filter:brightness(.79)
}
.hero-image figcaption {
  position:absolute;
  bottom:20px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  font:9px monospace;
  letter-spacing:1.5px;
  color:#fff
}
.image-note {
  position:absolute;
  top:15px;
  left:15px;
  background:#171815bf;
  color:#fff;
  padding:6px 8px;
  font:8px monospace;
  letter-spacing:1px
}
.image-sticker {
  position:absolute;
  right:28px;
  top:28px;
  background:var(--accent);
  color:var(--bg);
  transform:rotate(8deg);
  padding:19px 22px;
  font-weight:900;
  font-size:24px;
  line-height:.95;
  letter-spacing:-1px
}
.image-sticker span {
  display:block;
  font:7px monospace;
  letter-spacing:1px;
  margin-top:10px
}
.ticker {
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:30px;
  background:var(--accent);
  color:var(--bg);
  padding:21px 24px;
  margin-top:48px;
  overflow:hidden;
  font-size:13px;
  font-weight:800;
  letter-spacing:1px;
  white-space:nowrap
}
.ticker b {
  font-size:26px;
  font-weight:400
}
.section {
  padding-block:100px
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:43px
}
.section-heading h2 {
  margin:0;
  font-size:52px
}
.section-heading>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.7
}
.muted {
  color:var(--muted)
}
.editorial-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:24px
}
.editorial {
  margin:0
}
.editorial>div {
  aspect-ratio:3/4;
  overflow:hidden;
  position:relative;
  background:var(--panel)
}
.editorial:nth-child(2) {
  padding-top:52px
}
.editorial img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s;
  filter:saturate(.78)
}
.editorial:hover img {
  transform:scale(1.035)
}
.editorial figcaption {
  display:flex;
  justify-content:space-between;
  font:10px monospace;
  letter-spacing:1px;
  padding:17px 0
}
.caption {
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
  margin-top:24px
}
.story {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:65px
}
.story-star {
  display:inline-block;
  font-size:150px;
  color:var(--accent);
  line-height:1;
  margin-top:18px
}
.story h2 {
  font-size:52px
}
.story>div>p:not(.eyebrow) {
  max-width:620px;
  font-size:16px;
  color:var(--muted);
  line-height:1.8
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:30px
}
.tags span {
  border:1px solid var(--line);
  border-radius:30px;
  padding:9px 14px;
  font:10px monospace
}
.connect {
  background:var(--accent);
  color:var(--bg)
}
.connect .section-heading {
  margin-bottom:48px
}
.connect-arrow {
  font-size:95px;
  line-height:1
}
.social-list>a {
  border-top:1px solid #17181550;
  display:flex;
  align-items:center;
  gap:28px;
  padding:30px 10px;
  transition:padding .2s,background .2s
}
.social-list>a:last-child {
  border-bottom:1px solid #17181550
}
.social-list>a:hover {
  background:#ffffff30;
  padding-left:20px
}
.social-icon {
  width:36px;
  height:36px;
  flex:none
}
.script-icon {
  font:bold italic 42px Georgia
}
.social-list h3 {
  margin:0 0 7px;
  font-size:27px;
  font-weight:500;
  letter-spacing:-1px
}
.social-list p {
  font-size:12px;
  margin:0;
  line-height:1.6
}
.social-action {
  margin-left:auto;
  font:10px monospace;
  display:flex;
  align-items:center;
  gap:35px
}
.social-action b {
  font:35px Arial
}
.connect-note {
  font-size:11px;
  margin:24px 0 0;
  line-height:1.6
}
.connect a:focus-visible {
  outline-color:var(--bg)
}
.footer {
  padding-top:48px;
  padding-bottom:28px
}
.footer-top,.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.footer-top {
  padding-bottom:40px
}
.footer-top p {
  font-family:Georgia,serif;
  font-style:italic;
  color:var(--muted)
}
.footer-socials {
  display:flex;
  gap:22px;
  font-size:11px
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:24px;
  font-size:10px;
  color:var(--muted)
}
.footer-bottom nav {
  display:flex;
  gap:25px
}
.skip {
  position:fixed;
  left:20px;
  top:-100px;
  background:var(--accent);
  color:#111;
  padding:15px;
  z-index:20
}
.skip:focus {
  top:15px
}
dialog {
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  padding:40px;
  max-width:460px;
  width:calc(100% - 40px)
}
dialog::backdrop {
  background:#000b
}
dialog h2 {
  font-size:36px;
  letter-spacing:-1px;
  margin:0
}
dialog p {
  line-height:1.7
}
dialog .close {
  position:absolute;
  right:14px;
  top:8px;
  border:0;
  color:var(--text);
  background:none;
  font-size:28px
}
.legal {
  max-width:850px;
  padding-block:65px 100px
}
.legal h1 {
  font-size:clamp(34px,6vw,64px);
  letter-spacing:-2px;
  overflow-wrap:anywhere
}
.legal h2 {
  font-size:22px;
  margin-top:40px
}
.legal p,.legal li {
  font-size:15px;
  line-height:1.8;
  color:var(--muted)
}
.legal a {
  text-decoration:underline;
  text-underline-offset:4px
}
.legal .notice {
  padding:20px;
  border:1px solid var(--accent);
  color:var(--text)
}
.placeholder {
  color:var(--accent);
  overflow-wrap:anywhere
}
.legal address {
  font-style:normal;
  line-height:1.8
}
.legal ul {
  padding-left:22px
}
.reveal {
  opacity:1;
  transform:none
}
@media(prefers-reduced-motion:no-preference) {
  .reveal.pending {
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s,transform .6s
  }
  .reveal.visible {
    opacity:1;
    transform:none
  }
}
@media(min-width:1700px) {
  .hero h1 {
    font-size:215px
  }
}
@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 48px)
  }
  .hero-grid {
    grid-template-columns:1fr 1fr;
    min-height:510px
  }
  .hero-image {
    min-height:510px
  }
  .hero-copy {
    padding-top:24px
  }
  .hero h2 {
    font-size:52px
  }
  .hero-meta {
    font-size:8px
  }
  .section-heading h2,.story h2 {
    font-size:42px
  }
  .editorial-grid {
    gap:16px
  }
  .section {
    padding-block:75px
  }
  .story {
    gap:35px
  }
  .footer-top p {
    display:none
  }
  .hero h1 {
    font-size:14vw
  }
  .ticker {
    justify-content:flex-start;
    font-size:11px
  }
  .footer-bottom>span:last-child {
    display:none
  }
}
@media(max-width:640px) {
  .wrap {
    width:calc(100% - 36px)
  }
  .header {
    min-height:78px;
    gap:10px
  }
  .logo {
    font-size:20px
  }
  .header nav {
    display:none
  }
  .button.small {
    padding:10px 12px;
    gap:16px;
    font-size:10px
  }
  .hero-meta {
    margin-top:22px;
    font-size:7px;
    letter-spacing:.8px
  }
  .hero-meta>span:last-child {
    display:none
  }
  .hero h1 {
    font-size:14vw;
    letter-spacing:-.075em;
    margin-bottom:20px
  }
  .hero-grid {
    grid-template-columns:1fr
  }
  .hero-copy {
    padding:20px 0 0
  }
  .hero h2 {
    font-size:57px
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:20px
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:14px
  }
  .hero-foot {
    padding:28px 0 18px
  }
  .hero-image {
    min-height:440px
  }
  .image-sticker {
    font-size:22px;
    right:20px;
    top:25px
  }
  .ticker {
    margin-top:28px;
    padding:17px 18px;
    gap:28px
  }
  .section {
    padding-block:60px
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    margin-bottom:30px
  }
  .section-heading h2,.story h2 {
    font-size:39px;
    letter-spacing:-2px
  }
  .section-heading>p {
    margin:0
  }
  .editorial-grid {
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .editorial:nth-child(2) {
    padding-top:35px
  }
  .editorial:last-child {
    display:none
  }
  .editorial figcaption {
    font-size:8px;
    letter-spacing:0
  }
  .caption {
    font-size:9px
  }
  .story {
    grid-template-columns:1fr;
    gap:15px
  }
  .story-star {
    display:none
  }
  .story>div>p:not(.eyebrow) {
    font-size:14px
  }
  .connect .section-heading {
    position:relative;
    padding-right:10px
  }
  .connect h2 {
    font-size:36px
  }
  .connect-arrow {
    display:none
  }
  .social-list>a {
    gap:17px;
    padding:25px 0
  }
  .social-icon {
    width:29px;
    height:32px
  }
  .social-list h3 {
    font-size:23px
  }
  .social-list p {
    font-size:11px;
    max-width:220px
  }
  .social-action {
    font-size:0;
    gap:0
  }
  .social-action b {
    font-size:28px
  }
  .footer-top {
    align-items:flex-start;
    flex-direction:column;
    gap:24px
  }
  .footer-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }
  .footer-bottom nav {
    gap:20px
  }
  .legal {
    padding-top:35px
  }
  .legal h1 {
    letter-spacing:-1px
  }
  .legal p,.legal li {
    font-size:14px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}

/* Originales Kundenlogo: Der Bildausschnitt wird nur per CSS gesetzt.
   Invertierung und Screen-Blending passen das schwarze JPEG an den dunklen Grund an.
   Die unveränderte Originaldatei liegt in assets/images/logo.jpeg. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.logo-mark {
  position: relative;
  display: inline-block;
  flex: 0 0 70px;
  width: 70px;
  height: 52px;
  overflow: hidden;
  mix-blend-mode: screen;
}
.logo-mark img {
  position: absolute;
  width: 100px;
  height: auto;
  max-width: none;
  left: -22px;
  top: -37px;
  /* Papiergrau auf Weiß setzen; nach Invertierung blendet Screen es aus. */
  filter: grayscale(1) contrast(3) invert(1);
}
.logo-wordmark {
  font-size: 17px;
  letter-spacing: -0.8px;
}
@media (max-width: 640px) {
  .logo { gap: 7px; }
  .logo-wordmark { font-size: 13px; }
}

/* Reduzierte Landingpage: Vinted ist die primäre Aktion. */
.minimal-heading { padding: 36px 0 25px; }
.minimal-heading .eyebrow { margin-bottom: 10px; color: var(--muted); }
.minimal-heading h1 { margin: 0; font-size: clamp(60px, 13.7vw, 205px); line-height: 1; letter-spacing: -.075em; font-weight: 950; }
.minimal-heading h1>span { color: var(--accent); font-size: .6em; vertical-align: 12%; margin-left: .12em; }
.shop-hero { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--panel); }
.shop-photo { position: relative; margin: 0; height: 480px; overflow: hidden; }
.shop-photo>img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.shop-intro { padding: 50px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.shop-intro h1 { font-size: clamp(42px,4.4vw,68px); line-height: 1.02; letter-spacing: -2.5px; margin: 0 0 22px; }
.shop-intro h1 em { color: var(--accent); }
.shop-intro>p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 32px; }
.shop-button { width: 100%; max-width: 350px; padding: 22px 24px; font-size: 16px; }
.shop-button span { font-size: 28px; }
.shop-note { font-size: 10px; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.compact-selection { padding-top: 65px; padding-bottom: 50px; }
.compact-label { display: flex; justify-content: space-between; margin-bottom: 18px; font: 10px monospace; letter-spacing: 1.5px; }
.minimal-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.minimal-gallery img { display: block; width: 100%; height: 380px; object-fit: cover; object-position: 50% 30%; }
.compact-selection .caption { margin-top: 12px; }
.vinted-panel { background: var(--accent); color: var(--bg); padding: 45px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: background .2s; }
.vinted-panel:hover { background: #e8e8e8; }
.vinted-panel:focus-visible { outline-offset: 5px; }
.vinted-panel .eyebrow { display: block; margin-bottom: 14px; }
.vinted-title { display: block; font-size: clamp(32px,5vw,66px); letter-spacing: -2px; line-height: 1.1; }
.panel-arrow { font-size: 55px; transition: transform .2s; }
.vinted-panel:hover .panel-arrow { transform: translate(4px,-4px); }
.secondary-socials { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 40px; font-size: 12px; }
.secondary-socials>span { color: var(--muted); }
.secondary-socials>div { display: flex; gap: 28px; }
.secondary-socials a:hover { color: var(--accent); }
.footer { border-top: 1px solid var(--line); padding-top: 25px; }
.footer-top { padding-bottom: 22px; }
@media(max-width: 900px) {
  .shop-intro { padding: 28px; }
  .shop-photo { height: 420px; }
  .minimal-gallery img { height: 300px; }
}
@media(max-width: 640px) {
  .minimal-heading { padding: 27px 0 22px; }
  .minimal-heading h1 { font-size: 13.7vw; }
  .minimal-heading .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .shop-hero { grid-template-columns: 1fr; }
  .shop-intro { grid-row: 1; padding: 25px 22px 28px; }
  .shop-intro h1 { font-size: 45px; margin-bottom: 13px; }
  .shop-intro>p { font-size: 12px; margin-bottom: 23px; }
  .shop-button { max-width: none; padding: 18px; font-size: 15px; }
  .shop-note { font-size: 9px; }
  .shop-photo { height: 330px; }
  .compact-selection { padding-top: 38px; padding-bottom: 24px; }
  .minimal-gallery { gap: 8px; }
  .minimal-gallery img { height: 180px; }
  .vinted-panel { padding: 27px 22px; gap: 12px; }
  .vinted-panel .eyebrow { font-size: 8px; letter-spacing: .7px; }
  .vinted-title { font-size: 32px; letter-spacing: -1.5px; }
  .panel-arrow { font-size: 36px; }
  .secondary-socials { font-size: 11px; padding-bottom: 30px; }
  .secondary-socials>div { gap: 18px; }
  .footer-top { flex-direction: row; align-items: center; }
  .footer-socials { display: none; }
}

/* Abstand zwischen Header und reduziertem Hero. */
.minimal-hero { padding-top: 28px; }

/* Kompakte Social-Leiste zwischen Hero und Bildstrecke. */
.social-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding-block: 12px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.social-strip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding-inline: 8px;
  font-size: 12px;
  color: var(--muted);
  transition: color .2s;
}
.social-strip a:hover { color: var(--accent); }
.social-strip svg { width: 20px; height: 20px; flex: none; }
.social-strip + .compact-selection { padding-top: 30px; }
@media (max-width: 640px) {
  .social-strip { margin-top: 16px; padding-block: 6px; gap: 24px; }
  .social-strip + .compact-selection { padding-top: 26px; }
}

/* Icon-Links mit ausreichend großer Klickfläche und WhatsApp-CTA. */
.social-strip { gap: 12px; }
.social-strip > a { min-width: 44px; }
.social-strip .whatsapp-cta {
  background: var(--accent);
  color: var(--bg);
  padding: 0 16px;
  margin-left: 10px;
  font-weight: 700;
  border: 1px solid var(--accent);
}
.social-strip .whatsapp-cta:hover { background: #e8e8e8; color: var(--bg); }
@media(max-width: 380px) {
  .social-strip { gap: 4px; }
  .social-strip .whatsapp-cta { margin-left: 3px; padding-inline: 10px; gap: 6px; font-size: 11px; }
}

/* Transparenter Community-CTA und eigenständige About-Seite. */
.social-strip .whatsapp-cta {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.social-strip .whatsapp-cta:hover {
  background: #ffffff12;
  color: #fff;
}
.about-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  font-size: 13px;
  white-space: nowrap;
}
.about-link:hover, .about-link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.about-page { padding-block: 80px 110px; }
.about-page h1 {
  font-size: clamp(60px, 9vw, 130px);
  line-height: 1;
  letter-spacing: -.055em;
  margin: 0 0 45px;
}
.about-copy { max-width: 540px; }
.about-copy p { color: var(--muted); font-size: 17px; line-height: 1.8; }
.about-copy .button { margin-top: 22px; }
@media(max-width: 640px) {
  .about-page { padding-block: 48px 65px; }
  .about-link { gap: 9px; font-size: 12px; }
  .about-copy p { font-size: 15px; }
}

/* Drei Navigationslinks gemeinsam in der Mitte des Headers. */
.header { display: grid; grid-template-columns: 1fr auto 1fr; }
.header > .logo { justify-self: start; }
.header > nav { display: flex; justify-content: center; gap: 30px; }
.header > nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.header > nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
@media(max-width: 760px) {
  .header { grid-template-columns: 1fr; gap: 0; padding-block: 10px 4px; }
  .header > .logo { justify-self: center; }
  .header > nav { display: flex; justify-self: center; gap: 26px; font-size: 12px; }
}

/* About us: persönliche Geschichte mit zwei lokalen Fotos. */
.about-story h1 {
  font-size: clamp(36px, 4.8vw, 72px);
  letter-spacing: -.045em;
  line-height: 1.12;
  margin-bottom: 60px;
}
.about-story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 95px);
  align-items: center;
  margin-top: 60px;
}
.about-photo { margin: 0; }
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
.about-story-copy p { color: var(--muted); font-size: 16px; line-height: 1.85; margin: 0 0 24px; }
.about-story-copy strong { color: var(--text); }
.about-story-row-reverse .about-photo { grid-column: 2; grid-row: 1; }
.about-story-row-reverse .about-story-copy { grid-column: 1; grid-row: 1; }
.about-story-copy .about-closing { font: italic 30px/1.3 Georgia, serif; color: var(--text); margin-top: 36px; }
.about-story-copy .about-hashtag { font-size: 12px; letter-spacing: 1px; }
.about-story-copy .button { margin-top: 8px; }
@media(max-width: 760px) {
  .about-story h1 { margin-bottom: 30px; }
  .about-story h1 br { display: none; }
  .about-story-row { grid-template-columns: 1fr; gap: 28px; margin-top: 35px; }
  .about-story-row-reverse .about-photo,
  .about-story-row-reverse .about-story-copy { grid-column: auto; grid-row: auto; }
  .about-story-copy p { font-size: 15px; }
}

/* Organisches Schwarz-Anthrazit-Muster für die zuvor weißen CTAs. */
.button,
.vinted-panel {
  background-color: #080808;
  background-image: url('assets/button-pattern.svg');
  background-size: 480px auto;
  background-position: center;
  color: #fff;
  border: 1px solid #777;
}
.button:hover,
.vinted-panel:hover {
  background-color: #080808;
  background-image: url('assets/button-pattern.svg');
  border-color: #fff;
  color: #fff;
}
.vinted-panel { background-size: 720px auto; }
.button,
.vinted-panel .vinted-title,
.vinted-panel .eyebrow { text-shadow: 0 1px 3px #000; }

/* Unteren Vinted-CTA etwas kompakter halten. */
.vinted-panel { padding: 30px 36px; }
.vinted-title { font-size: clamp(28px, 4vw, 50px); }
.vinted-panel .eyebrow { margin-bottom: 10px; }
.vinted-panel .panel-arrow { font-size: 42px; }
@media(max-width: 640px) {
  .vinted-panel { padding: 21px 20px; }
  .vinted-title { font-size: 28px; }
  .vinted-panel .panel-arrow { font-size: 30px; }
}

/* Dezentes Logo-Wasserzeichen hinter dem Hero-Text. */
.shop-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.shop-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: url('assets/images/logo.jpeg');
  background-repeat: no-repeat;
  background-size: 125% auto;
  background-position: 65% 48%;
  filter: grayscale(1) contrast(3) invert(1);
  mix-blend-mode: screen;
  opacity: .055;
}

/* Mehr Abstand vor dem primären Hero-Button. */
.shop-intro .shop-button { margin-top: 20px; }

/* Hero: Text oben, CTA unten, freie Mitte für das Logo. */
.shop-intro {
  justify-content: flex-start;
  padding: 34px 40px;
}
.shop-intro h1 { margin-bottom: 12px; }
.shop-intro > p { margin-bottom: 0; }
.shop-intro .shop-button { margin-top: auto; }
.shop-intro::before {
  background-size: 90% auto;
  background-position: 60% 53%;
  opacity: .09;
}
@media(max-width: 900px) {
  .shop-intro { padding: 28px; }
}
@media(max-width: 640px) {
  .shop-intro { min-height: 435px; padding: 25px 22px 28px; }
  .shop-intro::before { background-size: 100% auto; background-position: 60% 51%; }
}

/* Flacherer Vinted-Button im Hero; ausreichende Klickhöhe bleibt erhalten. */
.shop-intro .shop-button {
  padding-block: 11px;
  min-height: 46px;
}


/* Abgerundeter Community-CTA ohne Plattform-Icon. */
.social-strip .whatsapp-cta { border-radius: 999px; padding-inline: 20px; }

/* Schlangenförmige Kontur für CTAs, unabhängig von ihrer Breite. */
.button,
.vinted-panel,
.social-strip .whatsapp-cta {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  isolation: isolate;
}
.button::after,
.vinted-panel::after,
.social-strip .whatsapp-cta::after {
  content: "";
  position: absolute;
  inset: -5px;
  background: url('assets/wavy-outline.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
.button:hover,
.vinted-panel:hover,
.social-strip .whatsapp-cta:hover {
  background: transparent;
  color: #fff;
}
.button::before,
.vinted-panel::before {
  content: "";
  position: absolute;
  inset: 5px 9px;
  z-index: -1;
  border-radius: 18px;
  background: #080808 url('assets/button-pattern.svg') center / 480px auto;
}
.vinted-panel::before { background-size: 720px auto; }

/* Vinted-CTAs wieder mit geradem Rand und dunklem Wellenmuster. */
.shop-intro .shop-button,
.vinted-panel {
  border: 1px solid #777;
  border-radius: 0;
  background: #080808 url('assets/button-pattern.svg') center / 480px auto;
  color: #fff;
}
.vinted-panel { background-size: 720px auto; }
.shop-intro .shop-button::before,
.shop-intro .shop-button::after,
.vinted-panel::before,
.vinted-panel::after { content: none; }
.shop-intro .shop-button:hover,
.vinted-panel:hover {
  background-color: #080808;
  background-image: url('assets/button-pattern.svg');
  border-color: #fff;
}

/* Bewegter, feiner Community-Umriss; respektiert reduzierte Bewegung. */
.social-strip .whatsapp-cta::after { background: none; }
.social-strip .whatsapp-cta .team-outline {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
}
.team-outline path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}
.social-strip .whatsapp-cta {
  transition: transform .25s ease;
}
.social-strip .whatsapp-cta:hover { transform: translateY(-2px); }
.social-strip .whatsapp-cta:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .social-strip .whatsapp-cta:hover,
  .social-strip .whatsapp-cta:active { transform: none; }
}

/* Rechte Hero-Fläche: zurückhaltendes Button-Muster und kleines Logo mittig. */
.shop-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url('assets/button-pattern.svg') center / 620px auto;
  opacity: .16;
}
.shop-intro::before {
  inset: 50% auto auto 50%;
  width: 150px;
  height: 110px;
  transform: translate(-50%, -50%);
  background-size: 214px auto;
  background-position: -47px -79px;
  opacity: .22;
}
@media(max-width: 640px) {
  .shop-intro::before {
    background-size: 214px auto;
    background-position: -47px -79px;
  }
}

/* Papierhintergrund vollständig ausblenden und das Zeichen ins Muster einbetten. */
.shop-intro::before {
  background-color: transparent;
  filter: grayscale(1) contrast(12) invert(1);
  mix-blend-mode: screen;
  opacity: .2;
}

/* Hero ohne Hintergrundlogo und mit größerem Claim. */
.shop-intro::before { content: none; }
.shop-intro h1 {
  font-size: clamp(52px, 5.6vw, 82px);
  line-height: 1.02;
}
@media (min-width: 641px) and (max-width: 900px) {
  .shop-intro h1 { font-size: clamp(44px, 6.2vw, 56px); }
}
@media (max-width: 640px) {
  .shop-intro h1 { font-size: clamp(49px, 13.5vw, 72px); }
}

/* Claim und CTA als kompakte Gruppe mittig im Hero. */
.shop-intro { justify-content: center; }
.shop-intro h1 { margin-top: 0; margin-bottom: 36px; }
.shop-intro .shop-button { margin-top: 0; }

/* Einheitliche Monospace-Schrift wie „The Vintage Edit“.
   Ausnahmen: Markenname im Header und der Hero-Claim. */
body, body * { font-family: monospace !important; }
.header .logo-wordmark { font-family: Arial, Helvetica, sans-serif !important; }
.shop-intro h1 { font-family: Arial, Helvetica, sans-serif !important; }
.shop-intro h1 em { font-family: Georgia, 'Times New Roman', serif !important; }

/* Hero-Ausschnitt auf die Tracksuits statt die Gesichter ausrichten. */
.shop-photo > img {
  object-position: 50% 45%;
  transform: scale(1.18);
  transform-origin: center bottom;
}

/* Neues Querformat im Hero ohne den bisherigen Porträt-Zoom. */
.shop-photo > img { object-position: center; transform: none; }

/* Flacherer Vinted-CTA am Seitenende. */
.vinted-panel { padding-block: 18px; }
.vinted-panel .eyebrow { margin-bottom: 6px; }
@media (max-width: 640px) {
  .vinted-panel { padding-block: 14px; }
}

/* Leichter Community-CTA mit Hinweis auf die kommende Gruppe. */
.social-strip .whatsapp-cta { font-weight: 400; }
.community-announcement {
  margin-top: 14px;
  margin-bottom: 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.community-announcement + .compact-selection { padding-top: 30px; }

/* Kleine Social-Icons im Footer mit gut bedienbarer Klickfläche. */
.footer-socials { display: flex; gap: 8px; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.footer-socials svg { width: 19px; height: 19px; }
@media(max-width: 380px) {
  .footer-top { flex-wrap: wrap; }
}

/* Community-Link ohne Umriss. */
.social-strip .whatsapp-cta { border: none; }
.social-strip .whatsapp-cta::after { content: none; }

/* Runde, kräftige Bubble-Typografie für den Store-CTA. */
.vinted-panel .bubble-title {
  font-family: 'Arial Rounded MT Bold', 'Arial Rounded MT', ui-rounded, 'Trebuchet MS', sans-serif !important;
  font-weight: 900;
  font-size: clamp(30px, 4.2vw, 54px);
  letter-spacing: -.035em;
  line-height: 1.15;
  -webkit-text-stroke: .65px currentColor;
  text-shadow: none;
}
@media(max-width: 640px) {
  .vinted-panel .bubble-title { font-size: clamp(25px, 7.5vw, 36px); }
}

/* Markanter Sportswear-Schriftzug für den Store-CTA. */
.vinted-panel .bubble-title {
  font-family: Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif !important;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .035em;
  -webkit-text-stroke: 0;
}

/* Kompaktere Hero-Höhe auf Desktop und Mobilgeräten. */
.shop-photo { height: 400px; }
@media (min-width: 641px) and (max-width: 900px) {
  .shop-photo { height: 360px; }
}
@media (max-width: 640px) {
  .shop-intro { min-height: 350px; }
  .shop-photo { height: 280px; }
}

/* Hero auf die mittlere Musterfläche reduzieren, ohne Wiederholungsstreifen. */
.shop-photo { height: 276px; }
.shop-intro { min-height: 276px; padding: 16px 40px; }
.shop-intro::after {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.shop-intro h1 {
  font-size: clamp(44px, 4.5vw, 64px);
  margin-bottom: 20px;
}
.shop-intro .shop-note { margin-top: 10px; }
@media (max-width: 900px) {
  .shop-intro { padding-inline: 24px; }
}
@media (max-width: 640px) {
  .shop-intro { min-height: 276px; padding: 18px 22px; }
  .shop-intro h1 { font-size: clamp(44px, 12vw, 60px); }
  .shop-photo { height: 276px; }
}

/* Mobile Kopfzeile: Logo links, beide Menülinks daneben. */
@media (max-width: 760px) {
  .header {
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    padding-block: 10px;
  }
  .header > .logo { justify-self: start; }
  .header > nav { justify-self: end; gap: 16px; font-size: 12px; }
}
@media (max-width: 400px) {
  .header { column-gap: 8px; }
  .header .logo-wordmark { font-size: 11px; }
  .header .logo { gap: 3px; }
  .header > nav { gap: 10px; font-size: 11px; }
}