/* idck.de – Visitenkarte · Kozlovski IT-Dienstleistungen */

@font-face{font-family:"Plex Sans";src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#f7f6f2;
  --card:#ffffff;
  --line:#e2e0d8;
  --text:#1e2229;
  --muted:#4d535c;
  --accent:#1f6f78;
  --accent-ink:#ffffff;
  --accent-soft:rgba(31,111,120,.10);
  --dot:30,34,41;
  --shadow:0 1px 2px rgba(30,34,41,.04),0 12px 40px -12px rgba(30,34,41,.18);
  --sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --head:var(--sans);
  --radius:14px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#12161c;
  --card:#1a2028;
  --line:#2a323d;
  --text:#e6e9ed;
  --muted:#a3abb5;
  --accent:#4fd1c5;
  --accent-ink:#0b1014;
  --accent-soft:rgba(79,209,197,.12);
  --dot:79,209,197;
  --shadow:0 0 0 1px rgba(79,209,197,.06),0 20px 60px -20px rgba(0,0,0,.6);
  --head:var(--mono);
  --radius:8px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  display:flex;flex-direction:column;
  transition:background-color .4s ease,color .4s ease;
}
a{color:var(--accent)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;padding:10px 16px;background:var(--accent);color:var(--accent-ink);border-radius:6px;z-index:10}
.skip:focus{top:16px}

/* Punktraster */
#dots{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Bühne */
main{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:48px 16px 32px;perspective:1200px}

.card{
  position:relative;width:100%;max-width:580px;
  padding:48px 44px 40px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s ease-out,background-color .4s ease,border-color .4s ease,border-radius .4s ease;
  overflow:hidden;
}
/* Lichtreflex beim Kippen */
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),var(--accent-soft),transparent 60%);
  opacity:var(--glow,0);transition:opacity .4s ease;
}

/* Kopfzeile der Karte */
.eyebrow{margin:0 0 28px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:600}
.prompt{display:none;margin:0 0 28px;font-family:var(--mono);font-size:14px;color:var(--muted);min-height:1.6em}
.prompt .p-user{color:var(--accent)}
:root[data-theme="dark"] .eyebrow{display:none}
:root[data-theme="dark"] .prompt{display:block}

/* Wortmarke */
.mark{
  display:block;padding:0;margin:0 0 6px;border:0;background:none;color:var(--text);cursor:pointer;text-align:left;
  font-family:var(--head);font-weight:600;font-size:clamp(44px,11vw,68px);line-height:1.05;letter-spacing:-.035em;
  white-space:nowrap;
}
:root[data-theme="dark"] .mark{letter-spacing:-.04em}
.mark .l{display:inline-block;transition:color .4s ease,transform .5s cubic-bezier(.5,1.6,.4,1)}
.mark .l.ck{color:var(--accent)}
.mark .x{display:inline-grid;grid-template-columns:0fr;transition:grid-template-columns .7s cubic-bezier(.65,0,.25,1)}
.mark .x>span{overflow:hidden;white-space:pre;font-weight:400;color:var(--muted)}
.mark[data-state="care"] .x.care,.mark[data-state="name"] .x.name{grid-template-columns:1fr}
.mark[data-state="care"]{font-size:clamp(26px,6.4vw,40px)}
.mark[data-state="name"]{font-size:clamp(18px,4.9vw,40px)}
.mark{transition:font-size .7s cubic-bezier(.65,0,.25,1)}
.mark:hover .l{transform:translateY(-3px)}
.mark:hover .l:nth-of-type(2){transition-delay:.04s}
.mark:hover .l:nth-of-type(3){transition-delay:.08s}
.mark:hover .l:nth-of-type(4){transition-delay:.12s}
:root[data-theme="dark"] .mark .sep{color:var(--muted);font-weight:400}
.sep{display:none}
:root[data-theme="dark"] .mark[data-state="idck"] .sep{display:inline}

.hint{
  display:flex;align-items:center;gap:8px;min-height:28px;margin:0 0 32px;
  font-size:15px;color:var(--muted);
}
:root[data-theme="dark"] .hint{font-family:var(--mono);font-size:13px}
.hint-text{transition:opacity .3s ease}
.hint-text.fade{opacity:0}
.dotpulse{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.45}}

.rule{height:1px;margin:0 0 28px;background:var(--line);transform-origin:left;animation:grow 1s .5s cubic-bezier(.65,0,.25,1) both}
@keyframes grow{from{transform:scaleX(0)}}

h1{margin:0;font-family:var(--head);font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
:root[data-theme="dark"] h1{font-size:21px;letter-spacing:0}
.company{margin:2px 0 18px;color:var(--muted);font-size:16px}
:root[data-theme="dark"] .company{font-family:var(--mono);font-size:14px}
.claim{margin:0 0 22px;font-size:18px;max-width:30em}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0;list-style:none}
.tags li{
  padding:5px 12px;border-radius:999px;background:var(--accent-soft);color:var(--text);font-size:14px;
  transition:transform .3s cubic-bezier(.5,1.6,.4,1),background-color .3s;
}
:root[data-theme="dark"] .tags li{border-radius:4px;font-family:var(--mono);font-size:13px}
:root[data-theme="dark"] .tags li::before{content:"#";color:var(--accent);margin-right:2px}
.tags li:hover{transform:translateY(-2px) rotate(-1.5deg)}

.contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;
  border-radius:8px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;
  transition:transform .25s cubic-bezier(.5,1.6,.4,1),box-shadow .25s;
}
:root[data-theme="dark"] .btn{font-family:var(--mono);border-radius:4px;font-size:15px}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px var(--accent)}
.btn svg{width:18px;height:18px}
.copy{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;
  transition:border-color .2s,color .2s;
}
:root[data-theme="dark"] .copy{font-family:var(--mono);border-radius:4px;font-size:13px}
.copy:hover{border-color:var(--accent);color:var(--text)}
.copy svg{width:16px;height:16px}
.copy .ok{display:none}
.copy.done .ok{display:inline}
.copy.done .cp{display:none}
.copy.done{color:var(--accent);border-color:var(--accent)}

.where{display:flex;align-items:center;gap:6px;margin:24px 0 0;font-size:14px;color:var(--muted)}
.where svg{width:16px;height:16px;flex:none}
:root[data-theme="dark"] .where{font-family:var(--mono);font-size:13px}

.soon{
  margin:28px -44px -40px;padding:14px 44px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;
}
:root[data-theme="dark"] .soon{font-family:var(--mono)}
.soon .bar{flex:none;width:44px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.soon .bar::after{content:"";display:block;width:40%;height:100%;background:var(--accent);border-radius:2px;animation:load 2.6s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* Cursor im Prompt */
.cursor{display:inline-block;width:.6em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--accent);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Fuß */
footer{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;padding:0 16px 24px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}
:root[data-theme="dark"] footer{font-family:var(--mono);font-size:13px}

/* Auftritt */
.rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s}.d7{animation-delay:.65s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.card.rise{animation-duration:1s}


/* Rechtstexte */
.legal{position:relative;z-index:1;flex:1;width:100%;max-width:760px;margin:0 auto;padding:48px 16px 48px}
.legal .card{max-width:none;transform:none;padding:44px 40px}
.legal .card::after{display:none}
.legal h1{font-size:30px;margin-bottom:24px}
.legal h2{font-family:var(--head);font-size:19px;margin:32px 0 8px}
.legal p,.legal li{margin:0 0 12px}
.legal address{font-style:normal;margin:0 0 12px}
.back{display:inline-flex;align-items:center;gap:6px;margin:0 0 24px;font-size:15px;text-decoration:none}
:root[data-theme="dark"] .back{font-family:var(--mono)}
.todo{background:#fff3c4;color:#5a4300;padding:0 4px;border-radius:3px}
:root[data-theme="dark"] .todo{background:#4a3b00;color:#ffe08a}

@media (max-width:520px){
  body{font-size:16px}
  .card{padding:36px 24px 32px}
  .soon{margin:24px -24px -32px;padding:14px 24px}
  .legal .card{padding:32px 22px}
  .claim{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .card{transform:none!important}
}