/* 7Studios: eine Visitenkarte auf einem Bildschirm. Farben von set7.events:
   Nacht #17131f / Fläche #2a2238, Papier #f5eee8, Tinte #17131f, Licht #f0913f bis #e0568b.
   Gemessen: Tinte auf Papier 15,9 · Tinte auf Licht-Orange 8,0 · Tinte auf Licht-Pink 5,3
   Papier auf Nacht 15,9 · Gedimmt #c6bcc5 auf Nacht 9,9 · Licht #f0913f auf Nacht 7,7 */
@font-face{font-family:"Familjen Grotesk";font-weight:400 700;font-display:swap;src:url(/fonts/FamiljenGrotesk-latin.woff2) format("woff2")}
@font-face{font-family:"Overpass Mono";font-weight:400 500;font-display:swap;src:url(/fonts/OverpassMono-latin.woff2) format("woff2")}
:root{
  --display:"Familjen Grotesk",system-ui,sans-serif;
  --mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --nacht:#17131f;--flaeche:#2a2238;--papier:#f5eee8;--papier-2:#eae1d7;--tinte:#17131f;
  --gedimmt:#c6bcc5;--licht:#f0913f;--pink:#e0568b;
  --dauer:1.7s;--kurve:cubic-bezier(.45,.05,.25,1);
  --kw:min(920px,92vw,calc((100dvh - 150px) * 1.545));
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{display:flex;flex-direction:column;background:radial-gradient(ellipse 80% 70% at 50% 40%,var(--flaeche) 0,var(--nacht) 75%);color:var(--papier);font:400 17px/1.5 var(--display);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--licht);outline-offset:3px;border-radius:2px}
.entwurf{flex:none;padding:7px 16px;text-align:center;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gedimmt);border-bottom:1px solid var(--flaeche)}

.buehne{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:16px;perspective:2200px}
.karte{position:relative;width:var(--kw);aspect-ratio:85/55;transform-style:preserve-3d;transition:transform var(--dauer) var(--kurve);container-type:inline-size}
.karte[data-seite=hinten]{transform:rotateY(180deg)}
.seite{position:absolute;inset:0;display:flex;flex-direction:column;padding:5.5cqw 6cqw 4.6cqw;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:1.4cqw 1.4cqw 0 var(--flaeche);border-radius:.4cqw}
.vorn{background:var(--papier);color:var(--tinte)}
.hinten{transform:rotateY(180deg);background:linear-gradient(135deg,var(--licht) 0%,#e9785f 52%,var(--pink) 100%);color:var(--tinte)}
.flaeche{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:inherit}
.flaeche:focus-visible{outline:3px solid var(--tinte);outline-offset:-8px}
.label{margin:0;font:500 1.35cqw/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.vorn h1{margin:3.4cqw 0 2.6cqw;max-width:15em;font:700 5.4cqw/1.08 var(--display);letter-spacing:-.025em;text-wrap:balance}
.text{max-width:38em}
.text p{margin:0 0 1.3cqw;font-size:2.45cqw;line-height:1.5;text-wrap:pretty}
.fuss-karte{margin:auto 0 0;display:flex;justify-content:space-between;align-items:end;gap:3cqw;font:500 1.35cqw/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;position:relative;pointer-events:none}
.fuss-karte .hinweis,.zurueck{opacity:.7}
.hinten .kontakt{margin:auto 0;display:grid;gap:1.4cqw;justify-items:start}
.hinten .name{margin:0 0 1cqw;font:700 3cqw/1.1 var(--display);letter-spacing:-.015em}
.mail{font:700 5.2cqw/1.1 var(--display);letter-spacing:-.02em;text-decoration:underline;text-decoration-thickness:.5cqw;text-underline-offset:.9cqw;overflow-wrap:anywhere}
.tel{font:500 3.9cqw/1.2 var(--mono);letter-spacing:.06em;text-decoration:none;padding:.6cqw 0}
.einladung{margin:2.2cqw 0 0;max-width:26em;font:500 2.5cqw/1.4 var(--display)}
.mail:hover,.tel:hover{text-decoration-color:var(--nacht)}
.tel:hover{text-decoration:underline;text-underline-offset:.7cqw}
.hinten .fuss-karte{pointer-events:auto}
.zurueck{background:none;border:0;padding:1cqw 0 1cqw 2cqw;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.zurueck:hover{opacity:1;text-decoration:underline}
.hinten{cursor:pointer}
.hinten .label,.hinten .zurueck{opacity:1}
.hinten a,.hinten button{cursor:pointer}

.fuss{flex:none;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 24px;padding:4px 16px calc(10px + env(safe-area-inset-bottom));font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gedimmt)}
.fuss button{min-height:44px;padding:0 6px;background:none;border:0;color:var(--papier);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;transition:text-decoration-color .18s ease,color .18s ease}
.fuss button:hover{color:var(--licht);text-decoration-color:var(--licht)}

/* Impressum und Datenschutz als Blatt */
dialog.blatt{width:min(760px,94vw);max-height:88dvh;padding:0;border:0;background:var(--papier);color:var(--tinte);box-shadow:14px 14px 0 var(--flaeche);overflow:auto}
dialog.blatt::backdrop{background:rgba(23,19,31,.82)}
.blatt-in{padding:clamp(24px,4vw,48px)}
.blatt h2{margin:0 0 .6em;font:700 clamp(28px,4vw,40px)/1.1 var(--display);letter-spacing:-.02em}
.blatt h3{margin:1.4em 0 .3em;font:700 18px/1.3 var(--display)}
.blatt p{margin:0 0 .6em;font-size:16px;line-height:1.6}
.blatt .label{margin-bottom:1.2em;color:#5c5866;opacity:1;font-size:11px}
.blatt a{text-decoration:underline;text-decoration-color:#9c4f19;text-decoration-thickness:2px;text-underline-offset:.22em;overflow-wrap:anywhere}
.blatt :focus-visible{outline-color:#9c4f19}
.zu{position:sticky;top:0;float:right;min-height:44px;margin:-8px -8px 8px 12px;padding:0 14px;background:var(--tinte);color:var(--papier);border:0;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.zu:hover{background:#2a2238}

/* Handy im Hochformat: die Karte steht hochkant, damit der Text lesbar bleibt */
@media (max-width:700px) and (orientation:portrait){
  :root{--kw:min(92vw,calc((100dvh - 150px) / 1.4))}
  .karte{aspect-ratio:5/7}
  .seite{padding:7cqw 7cqw 6cqw;box-shadow:2.4cqw 2.4cqw 0 var(--flaeche)}
  .label,.fuss-karte{font-size:3.1cqw}
  .vorn h1{margin:6cqw 0 4.4cqw;font-size:7.4cqw}
  .text p{font-size:4.5cqw;margin-bottom:2.6cqw}
  .hinten .name{font-size:6.4cqw}
  .mail{font-size:6.2cqw;text-decoration-thickness:.9cqw;text-underline-offset:1.4cqw}
  .tel{font-size:6.6cqw}
  .einladung{margin-top:4cqw;font-size:4.6cqw}
  .hinten .kontakt{gap:3cqw}
  .fuss{font-size:11px;letter-spacing:.08em;gap:0 10px}
}
/* Handy quer: niedrige, breite Karte, damit auch hier nichts scrollt */
@media (max-height:520px) and (orientation:landscape){
  :root{--kw:min(96vw,calc((100dvh - 92px) * 2.7))}
  .entwurf{padding:3px 12px;font-size:10px}
  .buehne{padding:8px 12px}
  .karte{aspect-ratio:2.7/1}
  .seite{padding:2.4cqw 3.2cqw 2cqw;box-shadow:.9cqw .9cqw 0 var(--flaeche)}
  .label,.fuss-karte{font-size:max(9px,1.15cqw)}
  .vorn h1{margin:1.4cqw 0 1.2cqw;max-width:none;font-size:3.7cqw}
  .text{max-width:none}
  .text p{font-size:1.95cqw;margin-bottom:.8cqw}
  .hinten .kontakt{gap:.8cqw}
  .hinten .name{font-size:2.5cqw;margin:0}
  .mail{font-size:4.3cqw;text-decoration-thickness:.35cqw;text-underline-offset:.6cqw}
  .tel{font-size:3.2cqw}
  .einladung{margin-top:1.2cqw;font-size:2cqw;max-width:none}
  .fuss{padding:0 12px 4px;font-size:10px}
  .fuss button{min-height:36px}
}
@media (prefers-reduced-motion:reduce){.karte{transition-duration:.01s}.fuss button{transition:none}}