/* STYLES: kontakt.html */
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:'Inter', sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.mono{ font-family:'JetBrains Mono', monospace; }
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }
/* NAV */
nav{
position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; align-items:center; justify-content:space-between;
padding: 20px clamp(20px, 5vw, 64px);
transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
border-bottom: 1px solid transparent;
}
nav.scrolled{ background:rgba(10,20,32,0.75); backdrop-filter:blur(10px); border-bottom-color:rgba(94,234,212,0.1); }
.nav-mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.nav-mark img{ height:32px; width:32px; display:block; }
.nav-mark span{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:17px; letter-spacing:-0.015em; }
.nav-mark em{ font-style:normal; font-weight:600; color:var(--accent); }
.nav-link{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-muted); text-decoration:none; letter-spacing:0.02em; }
.nav-link:hover{ color:var(--text); }
.nav-cta{
font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--bg);
background:var(--accent); padding:9px 18px; border-radius:2px; text-decoration:none; letter-spacing:0.02em;
}
/* GRID REASSEMBLE EFFECT — #grid_reassemble_effect */
.stage-wrapper{ position:relative; height:220vh; }
.stage{
position:sticky; top:0; width:100%;
/* 100vh meint auf iOS die Hoehe OHNE Browserleiste — der untere Rand
der Buehne liegt dann hinter der Leiste und der Scroll-Hinweis wird
abgeschnitten. 100svh ist die tatsaechlich sichtbare Hoehe.
Die erste Zeile bleibt als Rueckfall fuer aeltere Browser. */
height:100vh;
height:100svh;
overflow:hidden;
display:flex; align-items:center; justify-content:center;
background:
radial-gradient(ellipse at 50% 40%, rgba(94,234,212,0.06), transparent 60%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
/* transition faengt Deckkraftspruenge bei schnellem Scrollen ab */
.grid-lines{ position:absolute; inset:0; transition:opacity 0.22s linear; }
.grid-line{ position:absolute; background: var(--line); will-change: transform, opacity; }
.grid-line--v{ top:0; bottom:0; width:1px; }
.grid-line--h{ left:0; right:0; height:1px; }
.grid-line.bright{ background: var(--line-bright); }
.stage-content{ position:relative; z-index:5; text-align:center; padding:0 24px; opacity:1; }
.eyebrow{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--accent); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:22px; display:block; }
.stage-content h1{ font-size: clamp(34px, 6vw, 68px); line-height:1.08; color:var(--text); }
.stage-content h1 em{ font-style:normal; color:var(--accent); }
.stage-sub{ margin-top:22px; font-size: clamp(15px,2vw,19px); color:var(--text-muted); max-width:520px; margin-left:auto; margin-right:auto; font-weight:400; }
.scroll-cue{
position:absolute; left:50%; transform:translateX(-50%);
/* env(...) beruecksichtigt den Bereich, den neuere Geraete unten fuer
die Home-Leiste reservieren; ohne solchen Bereich bleiben es 44px. */
bottom:calc(44px + env(safe-area-inset-bottom, 0px));
display:flex; flex-direction:column; align-items:center; gap:8px;
font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-muted);
letter-spacing:0.15em; z-index:5; pointer-events:none; will-change:opacity, transform;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--accent), transparent); animation: pulse-line 1.8s ease-in-out infinite; }
@keyframes pulse-line{ 0%,100%{opacity:.3;} 50%{opacity:1;} }
/* SECTIONS */
section{ position:relative; z-index:2; background:var(--bg-2); }
.wrap{ max-width:1080px; margin:0 auto; padding: 120px 24px; }
/* schliesst direkt an den Rastereffekt an */
.stage-wrapper + section .wrap{ padding-top:72px; }
.reveal{ opacity:0; transform:translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
/* Ansprechpartner */
.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-top:48px; }
.person{ background:var(--bg-2); padding:32px 28px; display:flex; align-items:center; gap:18px; }
.avatar{
width:52px; height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
border:1px solid var(--border); background:var(--accent-soft); color:var(--accent);
font-family:'JetBrains Mono',monospace; font-weight:500; font-size:15px; letter-spacing:0.03em;
}
.person h3{ font-size:17px; color:var(--text); font-weight:600; }
.person p{ margin-top:4px; font-size:13px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
@media (max-width:640px){ .people{ grid-template-columns:1fr; } }
/* Formular als "Datensatz" */
.form-section{ background:var(--bg); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:48px; }
.field{ background:var(--bg); padding:24px 26px; }
.field.full{ grid-column:1 / -1; }
.field label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px; }
.field input, .field textarea{
width:100%; background:transparent; border:none; outline:none; color:var(--text);
font-family:'Inter',sans-serif; font-size:15px; padding-bottom:8px; resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:#4A5D74; }
.field textarea{ min-height:110px; }
.form-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:32px; }
.form-note{ font-size:13px; color:var(--text-muted); max-width:420px; }
.submit-btn{
font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.03em; color:var(--bg);
background:var(--accent); border:none; padding:16px 32px; border-radius:2px; cursor:pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.submit-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(94,234,212,0.25); }
/* honeypot */
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* pflichtfelder: sternchen, feldbezogene meldungen, fehlerzustand */
.field .req{ color:var(--accent); margin-left:3px; }
.field-msg{
margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:11.5px;
line-height:1.5; color:#FF7B72;
}
.field.invalid{ box-shadow: inset 0 0 0 1px rgba(255,123,114,0.55); }
.field.invalid label{ color:#FF7B72; }
/* rueckmeldungen des formulars */
.form-error{
margin-top:16px; font-size:14px; line-height:1.7; color:#FF7B72;
border:1px solid rgba(255,123,114,0.4); background:rgba(255,123,114,0.08); padding:12px 16px;
}
.form-success{
margin-top:48px; border:1px solid rgba(94,234,212,0.4); background:var(--accent-soft); padding:32px 36px;
position:relative; overflow:hidden;
}
.form-success h3{ margin-top:14px; font-size:20px; color:var(--text); }
.form-success p{ margin-top:10px; font-size:14px; line-height:1.7; color:var(--text-muted); }
/* mini grid-break bei erfolgreicher uebermittlung */
.fs-grid{ position:absolute; inset:0; pointer-events:none; }
.fs-line{
position:absolute; background:var(--line-bright); opacity:0.55;
transition: transform 0.9s cubic-bezier(.22,.61,.36,1), opacity 0.9s ease;
}
.fs-line--v{ top:0; bottom:0; width:1px; }
.fs-line--h{ left:0; right:0; height:1px; }
.fs-content{ position:relative; z-index:2; }
.form-success.animating .fs-content{ opacity:0; transform:translateY(10px); transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s; }
.form-success.animating .fs-content.visible{ opacity:1; transform:none; }
footer{ background:var(--bg); padding:36px 24px; text-align:center; font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted); border-top:1px solid var(--border); }
footer a{ color:var(--text-muted); transition:color 0.2s ease; }
footer a:hover{ color:var(--accent); }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
.grid-line, .stage-content, .reveal{ transition:none !important; animation:none !important; }
}
/* CURSOR GLOW im Hero-Raster */
#gridGlow{
position:absolute; width:440px; height:440px; border-radius:50%;
background:radial-gradient(circle, rgba(94,234,212,0.10), transparent 62%);
pointer-events:none; transform:translate(-50%,-50%);
opacity:0; transition:opacity 0.5s ease; z-index:1;
}
/* NEWSLETTER-ANMELDUNG */
.nl-box{
margin-top:56px; border:1px solid var(--border); background:var(--card-bg);
display:grid; grid-template-columns:1.15fr 1fr; gap:0;
}
.nl-text{ padding:32px 34px; border-right:1px solid var(--border); }
.nl-text h3{ margin-top:12px; font-size:21px; line-height:1.35; }
.nl-text p{ margin-top:12px; font-size:14px; line-height:1.7; color:var(--text-muted); }
.nl-form{ padding:32px 34px; display:flex; flex-direction:column; justify-content:center; }
.nl-row{ display:flex; flex-direction:column; }
.nl-label{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.12em;
text-transform:uppercase; color:var(--text-muted);
}
.nl-form input[type="email"]{
margin-top:10px; background:var(--bg); border:1px solid var(--border); border-radius:2px;
padding:13px 15px; font-family:'Inter',sans-serif; font-size:15px; color:var(--text);
outline:none; transition:border-color 0.2s ease;
}
.nl-form input[type="email"]:focus{ border-color:var(--accent); }
.nl-form.invalid input[type="email"]{ border-color:#FF7B72; }
.nl-btn{
margin-top:16px; align-self:flex-start; cursor:pointer;
font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--bg);
background:var(--accent); border:none; border-radius:2px; padding:14px 28px;
transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}
.nl-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(94,234,212,0.25); }
.nl-btn:disabled{ opacity:0.6; cursor:default; transform:none; box-shadow:none; }
.nl-note{ margin-top:16px; font-size:12px; line-height:1.6; color:var(--text-muted); }
.nl-note a{ color:var(--accent); }
.nl-success{ padding:32px 34px; }
.nl-success h3{ margin-top:12px; font-size:19px; line-height:1.35; }
.nl-success p{ margin-top:10px; font-size:14px; line-height:1.7; color:var(--text-muted); }
@media (max-width:760px){
.nl-box{ grid-template-columns:1fr; }
.nl-text{ border-right:none; border-bottom:1px solid var(--border); }
}