/* Entwurf 01. Alle Regeln sind auf den Hero oder seine Entwurfsleiste begrenzt.
   Feste Airtable-IDs erlauben Änderungen an einem einzelnen Element.
   Originalfoto und Original-Logo werden nach eindeutiger Zuordnung ergänzt. */
:root {
  color-scheme: dark;
  --hero-forest: #102c24;
  --hero-backdrop: #304c40;
  --hero-sage: #aac4ac;
  --hero-mint: #dcebdc;
  --hero-lime: #c4ff37;
  --hero-ivory: #f1f6ed;
  --hero-font: "Arial", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--hero-backdrop); font-family: var(--hero-font); color: var(--hero-ivory); }
.draft-header { max-width: 1680px; margin: auto; display: flex; justify-content: space-between; gap: 2rem; padding: 2.7rem clamp(1.5rem, 5.3vw, 6rem) 2.4rem; align-items: center; position:relative; min-height:15rem; }
.brand-orbit{position:relative;display:grid;place-items:center;border-radius:50%;isolation:isolate;flex:0 0 auto}
.brand-orbit:before{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;background:#fff;box-shadow:0 14px 32px rgba(5,24,19,.2)}
.brand-orbit:after{content:"";position:absolute;z-index:1;left:50%;top:50%;width:138%;height:138%;transform:translate(-50%,-50%);border:1px solid rgba(220,235,220,.72);border-radius:50%;background:rgba(21,63,48,.56);box-shadow:0 0 0 2.2rem rgba(21,63,48,.34),0 0 0 2.25rem rgba(196,255,55,.05)}
.brand-orbit img{position:relative;z-index:3;display:block;object-fit:contain}
.brand-orbit--header{width:10.5rem;height:10.5rem;margin-left:0}
.brand-orbit--header:before{background:#fff;box-shadow:0 14px 32px rgba(5,24,19,.2)}
.brand-orbit--header:after{display:block}
.brand-orbit--photo{position:absolute;z-index:2;top:8%;right:clamp(2rem,5vw,4rem);width:7rem;height:7rem}
.brand-orbit--photo .potential__brand{position:relative;inset:auto;width:76%;height:auto;filter:none}
.brand-orbit--footer{width:4.5rem;height:4.5rem}
.brand-orbit--footer:after{width:132%;height:132%;box-shadow:0 0 0 .65rem rgba(21,63,48,.34)}
.brand-orbit--footer img{width:76%;height:auto}
.draft-header__category { font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; }
.draft-header__state { font-size: .875rem; color: var(--hero-sage); }
.draft-header__state span { padding: 0 .7rem; }
.draft-header__nav { display:grid;grid-template-columns:auto auto;align-items:center;gap:.7rem;justify-content:end }
.draft-header__nav .header-contact { justify-self:end; min-width:8rem; min-height:44px; padding:.55rem .9rem; justify-content:space-between; }
.draft-header__nav a { color: var(--hero-forest); background: var(--hero-lime); border: 1px solid var(--hero-forest); border-radius: 3px; display: inline-flex; align-items: center; gap: 1rem; padding: .85rem 1.05rem; font-size: .875rem; font-weight: 600; text-decoration: none; }
.draft-header__nav a:hover { background: var(--hero-ivory); }
.draft-header__nav a:focus-visible { outline: 3px solid var(--hero-lime); outline-offset: 4px; }
.hero { position:relative; isolation:isolate; }
.hero:before { content:""; position:absolute; z-index:0; pointer-events:none; left:-27rem; top:-39rem; width:64rem; height:64rem; border-radius:50%; background:radial-gradient(circle,transparent 0 16rem,#dcebdc 16.05rem 16.24rem,transparent 16.3rem 23rem,#aac4ac 23.05rem 23.24rem,transparent 23.3rem 30rem,#c4ff37 30.05rem 30.24rem,transparent 30.3rem); opacity:.9; }
.hero__opening { max-width: 1680px; margin: 0 auto; padding: clamp(4rem, 7.8vw, 8.5rem) clamp(1.5rem, 5.3vw, 6rem) 4.6rem; position:relative; z-index:1; }
.hero__business-card { position: absolute; z-index: 2; top: 23%; right: clamp(3.5rem, 8vw, 9rem); width: clamp(17rem, 28vw, 29rem); margin: 0; filter: drop-shadow(0 .8rem .75rem rgba(5,24,19,.2)) drop-shadow(0 1.6rem 2.1rem rgba(5,24,19,.24)); transform: rotate(-3deg); }
.hero__business-card img { display: block; width: 100%; height: auto; clip-path: polygon(1.5% 1.5%, 98.5% 1%, 99% 98%, 1% 99%); }
.hero__headline { margin: 0; font-size: clamp(3.1rem, 9.85vw, 10.4rem); line-height: 1.04; letter-spacing: -.061em; font-weight: 700; max-width: 14ch; }
.hero__headline > span { display: block; }
.hero__headline em { font-style: normal; color: var(--hero-lime); }
.hero__headline .hero__new { position: relative; display: inline-block; isolation: isolate; color: #102c24; font-size: .84em; padding: .08em .17em; margin-left: .04em; vertical-align: .015em; transform: rotate(-5deg); }
.hero__new > span { position: relative; z-index: 2; }
.hero__new::before, .hero__new::after { content: ""; position: absolute; pointer-events: none; z-index: -1; inset: -.13em -.11em; clip-path: polygon(0% 40%, 13% 31%, 8% 8%, 29% 19%, 40% 0%, 49% 18%, 68% 2%, 71% 22%, 94% 13%, 88% 36%, 100% 49%, 88% 61%, 96% 87%, 73% 78%, 65% 100%, 51% 83%, 33% 98%, 28% 80%, 7% 89%, 12% 65%); background: #dcebdc; }
.hero__new::after { background: #c4ff37; transform: scale(.91); filter: none; }
.hero__statement-row > .hero__statement { grid-column: 2; }
@media (max-width: 760px) { .hero__statement-row > .hero__statement { grid-column: 1; } }
.hero__statement-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 8vw; margin-top: clamp(3.5rem, 6vw, 6rem); align-items: start; }
.hero__rule { height: 1px; background: #557364; margin-top: .8rem; max-width: 9rem; }
.hero__statement { margin: 0; max-width: 25ch; font-size: clamp(1.3rem, 1.9vw, 2rem); line-height: 1.4; color: var(--hero-sage); letter-spacing: -.015em; }
.hero__invitation { background: var(--hero-mint); color: var(--hero-forest); padding: clamp(3rem, 4.7vw, 5rem) max(clamp(1.5rem, 5.3vw, 6rem), calc((100vw - 1488px) / 2)); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 9vw, 10rem); align-items: start; }
.hero__subheadline { margin: 0; font-size: clamp(1.9rem, 3.1vw, 3.3rem); line-height: 1.18; letter-spacing: -.035em; font-weight: 500; max-width: 21ch; }
.hero__body { margin: .25rem 0 1.9rem; font-size: 1.125rem; line-height: 1.65; max-width: 41ch; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__button { min-height: 3.5rem; font: inherit; font-size: 1rem; font-weight: 600; display: inline-flex; gap: 2.6rem; align-items: center; justify-content: space-between; padding: 1rem 1.35rem; border-radius: 3px; border: 1px solid transparent; color: var(--hero-forest); cursor: default; }
.hero__button--primary { background: var(--hero-lime); border-color: var(--hero-forest); }
.hero__button--secondary { background: transparent; border-color: #779785; }
.hero__button:focus-visible { outline: 3px solid var(--hero-forest); outline-offset: 4px; }
.hero__button > span { font-size: 1.35rem; line-height: 1; }
.hero__draft-note { font-size: .8125rem; color: #425b4c; margin: 1rem 0 0; line-height: 1.5; }
@media (min-width: 1700px) { .hero__invitation { padding-left: max(6rem, calc((100vw - 1488px) / 2)); padding-right: max(6rem, calc((100vw - 1488px) / 2)); } }
@media (max-width: 700px) {
  .draft-header { padding-top: 1.7rem; padding-bottom: 1rem; align-items: center; gap: 1.2rem; min-height:11rem; }
  .brand-orbit--header{width:7.5rem;height:7.5rem;margin-left:0}
  .draft-header{flex-wrap:wrap}
  .draft-header__nav{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .draft-header__nav a{font-size:.875rem;padding:.7rem;gap:.5rem;height:100%}
  .draft-header__nav .header-contact{height:auto;min-width:0;width:80%}
  .brand-orbit--photo{width:5rem;height:5rem;right:1.25rem}
  .brand-orbit--footer{width:4rem;height:4rem}
  .draft-header__category { max-width: 16ch; line-height: 1.6; font-size: .8125rem; }
  .draft-header__state { max-width: 13ch; line-height: 1.6; text-align: right; font-size: .8125rem; }
  .draft-header__state span { display: none; }
  .hero:before { left:-25rem; top:-31rem; width:50rem; height:50rem; background:radial-gradient(circle,transparent 0 12rem,#dcebdc 12.05rem 12.2rem,transparent 12.26rem 17rem,#aac4ac 17.05rem 17.2rem,transparent 17.26rem 22rem,#c4ff37 22.05rem 22.2rem,transparent 22.26rem); }
  .hero__opening { padding-top: 4rem; padding-bottom: 3.3rem; }
  .hero__business-card { position: relative; top: auto; right: auto; width: min(19rem, 82vw); margin: 0 0 2.6rem auto; }
  .hero__headline { font-size: clamp(2.9rem, 10.65vw, 4.7rem); letter-spacing: -.055em; }
  .hero__statement-row { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 3rem; }
  .hero__rule { max-width: 3rem; background: var(--hero-lime); }
  .hero__statement { max-width: 28ch; font-size: 1.25rem; }
  .hero__invitation { grid-template-columns: 1fr; gap: 2.1rem; padding-top: 2.6rem; padding-bottom: 2.6rem; }
  .hero__subheadline { max-width: 22ch; font-size: clamp(1.8rem, 6.8vw, 2.65rem); }
  .hero__body { margin-top: 0; font-size: 1rem; }
  .hero__button { flex: 1 1 125px; gap: 1rem; padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.hero__button {text-decoration:none;cursor:pointer}
/* Concentric rays share the logo centre and fade before reaching the headline. */
.draft-header{--logo-center:calc(clamp(1.5rem,5.3vw,6rem) + 5.25rem)}
.draft-header::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:var(--logo-center);top:7.95rem;width:48rem;height:48rem;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,transparent 0 12rem,#dcebdc 12.03rem 12.13rem,transparent 12.17rem 17rem,#aac4ac 17.03rem 17.13rem,transparent 17.17rem 22rem,#c4ff37 22.03rem 22.13rem,transparent 22.17rem);opacity:.34;mask-image:linear-gradient(to bottom,#000 0 56%,transparent 86%)}
.hero::before{display:none}
.hero__headline{font-size:clamp(3.1rem,8vw,8.3rem);line-height:1.02;letter-spacing:-.055em;max-width:14ch}
.hero__opening{padding-top:clamp(4rem,6vw,6rem)}
@media(max-width:700px){.draft-header{--logo-center:calc(clamp(1.5rem,5.3vw,6rem) + 3.75rem)}.draft-header::before{top:5.45rem;width:34rem;height:34rem;background:radial-gradient(circle,transparent 0 9rem,#dcebdc 9.03rem 9.1rem,transparent 9.15rem 12rem,#aac4ac 12.03rem 12.1rem,transparent 12.15rem 15rem,#c4ff37 15.03rem 15.1rem,transparent 15.15rem);opacity:.27}.hero__headline{font-size:clamp(2.7rem,9.5vw,4.3rem)}}
/* Distinct mint/sage surfaces, followed by progressively heavier rays. */
.brand-orbit--header::after{background:#aac4ac;border-color:#dcebdc;box-shadow:0 0 0 2.2rem #527d60,0 0 0 2.25rem rgba(196,255,55,.25)}
.draft-header::before{background:radial-gradient(circle,transparent 0 12rem,#dcebdc 12.02rem 12.17rem,transparent 12.21rem 17rem,#aac4ac 17.02rem 17.34rem,transparent 17.38rem 22rem,#c4ff37 22.02rem 22.56rem,transparent 22.6rem);opacity:.57}
@media(max-width:700px){.draft-header::before{background:radial-gradient(circle,transparent 0 9rem,#dcebdc 9.02rem 9.15rem,transparent 9.19rem 12rem,#aac4ac 12.02rem 12.29rem,transparent 12.33rem 15rem,#c4ff37 15.02rem 15.46rem,transparent 15.5rem);opacity:.48}}