/* luft*kuss – Studio | Regensburg */
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/poppins-light.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-medium.woff") format("woff"); }

:root {
  --gruen: #66B26A;
  --tuerkis: #83C5C2;
  --dunkel: #2E5A3C;
  --text: #24372B;
  --papier: #F8F6F0;
  --weiss: #ffffff;
  --streifen: repeating-linear-gradient(90deg, var(--gruen) 0 22px, var(--tuerkis) 22px 44px);
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--papier);
}
img { max-width: 100%; display: block; }
a { color: var(--dunkel); text-underline-offset: 3px; }
a:hover { color: var(--gruen); }
h1, h2, h3 { font-weight: 300; line-height: 1.15; margin: 0 0 .6em; color: var(--dunkel); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.01em; }
h3 { font-size: 1.35rem; font-weight: 400; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen); margin-bottom: .8em; }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 10; background: rgba(248,246,240,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(46,90,60,.08); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.logo img { height: 26px; width: auto; }
.nav { display: flex; gap: 28px; font-weight: 400; font-size: .95rem; }
.nav a { text-decoration: none; color: var(--text); }
.nav a:hover { color: var(--gruen); }
.nav .knopf-klein { background: var(--dunkel); color: var(--weiss); padding: 8px 18px; border-radius: 999px; }
.nav .knopf-klein:hover { background: var(--gruen); color: var(--weiss); }

/* Hero mit Streifen wie auf der Postkarte */
.hero { background: var(--streifen); color: var(--weiss); position: relative; overflow: hidden; }
.hero .wrap { min-height: min(82vh, 760px); display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
.hero h1 { color: var(--weiss); font-size: clamp(2.8rem, 7.5vw, 6rem); line-height: 1.08; letter-spacing: -.015em; margin: 0; text-shadow: 0 1px 24px rgba(30,70,40,.18); }
.hero h1 .stern { display: inline-block; width: .62em; height: .62em; vertical-align: .02em; margin: 0 .02em; }
.hero h1 .stern img { width: 100%; height: 100%; }
.hero .stern-gross { justify-self: center; width: min(100%, 380px); animation: drehen 60s linear infinite; filter: drop-shadow(0 6px 30px rgba(30,70,40,.15)); }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero .stern-gross { animation: none; } html { scroll-behavior: auto; } }

.unterzeile { background: var(--dunkel); color: var(--weiss); }
.unterzeile .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 22px; padding-bottom: 22px; }
.unterzeile p { margin: 0; font-size: 1.05rem; }
.unterzeile strong { font-weight: 500; }

/* Abschnitte */
section { padding: 96px 0; }
.intro { max-width: 720px; margin-bottom: 48px; }
.intro p { font-size: 1.15rem; }

.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.karte { background: var(--weiss); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(36,55,43,.06), 0 8px 28px rgba(36,55,43,.06); display: flex; flex-direction: column; }
.karte .bild { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--streifen); }
.karte .bild.gruen { background: var(--gruen); }
.karte .bild.tuerkis { background: var(--tuerkis); }
.karte .bild img { width: 34%; }
.karte .bild span { color: var(--weiss); font-size: 1.6rem; font-weight: 300; text-align: center; line-height: 1.2; padding: 0 20px; }
.karte .inhalt { padding: 24px 26px 28px; }
.karte .inhalt p { margin: 0; font-size: 1rem; }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(46,90,60,.12); }
.liste li::before { content: ""; flex: 0 0 14px; height: 14px; background: url("../img/star-green.svg") center / contain no-repeat; transform: translateY(2px); }

.dienst { background: var(--weiss); }
.haendler { background: var(--tuerkis); color: var(--text); }
.haendler h2 { color: var(--dunkel); }
.haendler .box { background: var(--papier); border-radius: 18px; padding: 36px; }
.haendler .box h3 { margin-bottom: .4em; }

.knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--dunkel); color: var(--weiss); text-decoration: none; font-weight: 400; padding: 14px 28px; border-radius: 999px; transition: background .2s; }
.knopf:hover { background: var(--gruen); color: var(--weiss); }
.knopf.hell { background: var(--weiss); color: var(--dunkel); }
.knopf.hell:hover { background: var(--papier); color: var(--dunkel); }

.termine .termin { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(46,90,60,.12); }
.termine .datum { font-weight: 500; color: var(--gruen); }
.platzhalter { background: #FFF6D6; border: 1px dashed #D9B84A; border-radius: 8px; padding: 2px 8px; font-size: .9em; }

/* Kontakt */
.kontakt { background: var(--streifen); color: var(--weiss); text-align: center; }
.kontakt .panel { background: var(--dunkel); border-radius: 24px; padding: 64px 32px; max-width: 760px; margin: 0 auto; }
.kontakt h2 { color: var(--weiss); }
.kontakt p { font-size: 1.15rem; }
.kontakt .stern-klein { width: 56px; margin: 0 auto 20px; }
.kontakt .wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* Fuß */
.fuss { background: var(--papier); padding: 48px 0; font-size: .95rem; }
.fuss .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.fuss img { height: 22px; width: auto; }
.fuss nav { display: flex; gap: 24px; }

/* Rechtstexte */
.recht { padding: 72px 0 96px; }
.recht .wrap { max-width: 800px; }
.recht h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.recht h2 { font-size: 1.4rem; font-weight: 400; margin-top: 2em; }
.recht h3 { font-size: 1.1rem; margin-top: 1.5em; }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; min-height: auto; padding-top: 72px; padding-bottom: 72px; }
  .hero .stern-gross { width: 180px; justify-self: start; order: -1; }
  .raster { grid-template-columns: 1fr; }
  .zweispaltig { grid-template-columns: 1fr; gap: 40px; }
  .nav a:not(.knopf-klein) { display: none; }
  section { padding: 72px 0; }
  .termine .termin { grid-template-columns: 1fr; gap: 2px; }
}

/* Vorabversion: Coming soon */
.vorab { min-height: 100vh; display: flex; flex-direction: column; }
.vorab .hero { flex: 1; display: flex; }
.vorab .hero .wrap { width: 100%; min-height: auto; }
.coming { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; background: var(--dunkel); color: var(--weiss); font-weight: 400; font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: .18em; text-transform: uppercase; padding: 12px 26px; border-radius: 999px; }
.coming img { width: 18px; height: 18px; }
.vorab .info { background: var(--dunkel); color: var(--weiss); }
.vorab .info .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-top: 28px; padding-bottom: 28px; }
.vorab .info p { margin: 0; }
.vorab .info a { color: var(--weiss); }
.vorab .info a:hover { color: var(--tuerkis); }
.markt-box { margin-top: 20px; max-width: 460px; background: var(--weiss); color: var(--text); border-radius: 18px; padding: 20px 26px; box-shadow: 0 8px 28px rgba(30,70,40,.15); }
.markt-box .markt-label { font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen); margin-bottom: 4px; }
.markt-box p { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.markt-box strong { font-weight: 500; color: var(--dunkel); }

/* ===== Kombination: Grün/Türkis + Rosa/Koralle ===== */
:root { --rosa: #F35DB6; --koralle: #F05360;
  --streifen-rosa: repeating-linear-gradient(90deg, var(--koralle) 0 22px, var(--rosa) 22px 44px); }
.eyebrow { color: var(--koralle); }
.knopf:hover, .nav .knopf-klein:hover { background: var(--koralle); }
a:hover, .nav a:hover { color: var(--koralle); }
.coming { background: var(--koralle); }
.markt-box .markt-label { color: var(--koralle); }
.liste li::before { background-image: url("../img/star-coral.svg"); }
.karte .bild.gruen { background: var(--koralle); }
.karte .bild.tuerkis { background: var(--streifen-rosa); }
.haendler { background: var(--rosa); }
.haendler .eyebrow { color: var(--dunkel) !important; }
.kontakt { background: var(--streifen-rosa); }
.termine .datum { color: var(--koralle); }

/* Coming-soon und Markt-Feld dunkelgrün mit weißer Schrift */
.coming { background: var(--dunkel); color: var(--weiss); }
.markt-box { background: var(--dunkel); color: var(--weiss); }
.markt-box .markt-label, .markt-box strong { color: var(--weiss); }

/* Stern hochgestellt wie im Logo */
.hero h1 .stern { width: .46em; height: .46em; vertical-align: .27em; margin: 0 .01em 0 0; }