/*
Theme Name: Domina Vicky
Theme URI: https://domina-vicky.de
Author: Lodestar Studio
Description: Eigenes Theme nach Richtung E. Dunkel, Gold als Linie, Oxblood als Flaeche. Mobile first. Keine externen Dienste.
Version: 0.4.0
Requires at least: 6.4
Requires PHP: 8.1
License: proprietaer
Text Domain: domina-vicky
*/

:root{
  --grund:#0B0909;
  --karte:#100C0C;
  --gold:#C9A863;
  --gold-hell:#DCC08A;
  --gold-heller:#E4CE9A;
  --oxblood:#6E1220;
  --signal:#C8102E;
  --text:#EDE6DC;
  --text-2:#CFC7BC;
  --gedaempft:#A8A096;
  --schwach:#8F877E;
  --linie:rgba(201,168,99,.18);
  --linie-stark:rgba(201,168,99,.3);
  --linie-knopf:rgba(201,168,99,.55);
  --titel:"Cormorant Garamond",Georgia,serif;
  --text-schrift:"Archivo",Helvetica,Arial,sans-serif;
  --hand:"Qwitcher Grypen",cursive;
  --kurve:cubic-bezier(.16,1,.3,1);
  --rand:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--grund)}
body{
  color:var(--text);
  font-family:var(--text-schrift);
  font-size:14px;
  line-height:1.75;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-heller)}
::selection{background:var(--oxblood);color:#F3EEE6}
h1,h2,h3,p{margin:0}
button{font:inherit}

/* Sprungmarke fuer Tastatur */
.dv-skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--grund);
  color:var(--text);padding:12px 18px;border:1px solid var(--gold)}
.dv-skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Korn */
.dv-korn{position:fixed;inset:0;z-index:9000;pointer-events:none;mix-blend-mode:overlay;
  background-size:180px 180px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}

/* Bausteine */
.dv-rand{padding-left:var(--rand);padding-right:var(--rand)}
.dv-strich{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}
.dv-klein{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--text)}
.dv-hand{font-family:var(--hand);color:var(--gold-hell);line-height:1.3}
.dv-fliess{color:var(--text-2);max-width:46ch}

.dv-knopf{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:16px 26px;border:1px solid var(--linie-knopf);color:var(--text);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:gap 780ms var(--kurve),border-color 780ms var(--kurve),background 780ms var(--kurve)}
.dv-knopf:hover{gap:24px;border-color:var(--gold);color:var(--text)}
.dv-knopf svg{color:var(--gold);flex:none}
.dv-knopf--signal{background:var(--signal);border-color:var(--signal);color:#fff;font-weight:500}
.dv-knopf--signal:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.dv-knopf--signal svg{color:#fff}
.dv-knopf--voll{display:flex;width:100%}

/* Wortmarke */
.dv-marke{display:grid;justify-items:center;gap:2px;color:var(--text)}
.dv-marke__name{font-family:var(--titel);font-size:19px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-hell)}
.dv-marke__zusatz{font-size:7px;letter-spacing:.34em;text-transform:uppercase;color:var(--schwach)}
.dv-marke svg{color:var(--gold)}

/* Kopf */
.dv-kopf{position:sticky;top:0;z-index:8500;background:var(--grund);
  border-bottom:1px solid var(--linie);display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px var(--rand)}
.dv-kopf__rechts{display:flex;align-items:center;gap:16px}
.dv-kopf__rechts a{display:inline-flex;color:var(--gedaempft)}
.dv-kopf__rechts a:hover{color:var(--gold)}
.dv-burger{appearance:none;cursor:pointer;background:transparent;border:0;padding:6px 0;
  display:grid;gap:5px}
.dv-burger span{display:block;width:22px;height:1px;background:var(--gold)}

/* Menue */
.dv-menue{position:fixed;inset:0;z-index:9200;background:var(--grund);overflow-y:auto;
  padding:var(--rand);opacity:0;pointer-events:none;transform:translateY(-14px);
  scrollbar-width:none;
  transition:opacity 760ms var(--kurve),transform 760ms var(--kurve)}
.dv-menue::-webkit-scrollbar{display:none}
.dv-menue.ist-offen{opacity:1;pointer-events:auto;transform:none}
.dv-menue__kopf{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--rand);border-bottom:1px solid var(--linie)}
.dv-menue__kopf span{font-family:var(--titel);font-size:17px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-hell)}
.dv-menue__zu{appearance:none;cursor:pointer;background:transparent;border:0;
  color:var(--text);display:inline-flex}
.dv-menue__liste{display:grid;gap:2px;padding:34px 0 44px;list-style:none;margin:0}
.dv-menue__liste a{display:inline-flex;align-items:center;gap:12px;font-family:var(--titel);
  font-size:30px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.dv-menue__liste a:hover{color:var(--gold-hell)}
.dv-menue__liste .dv-privat a,.dv-menue__liste a.dv-privat{color:var(--gedaempft)}

/* Titelbereich */
.dv-titel{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden}
.dv-titel__bild{position:absolute;inset:0;background-size:cover;background-position:62% 20%}
.dv-titel__schleier{position:absolute;inset:0;background-image:
  linear-gradient(to top,rgba(11,9,9,.97) 0%,rgba(11,9,9,.72) 32%,rgba(11,9,9,.2) 72%),
  linear-gradient(100deg,rgba(11,9,9,.9) 0%,rgba(11,9,9,.25) 52%,rgba(110,18,32,.18) 100%)}
.dv-titel__inhalt{position:relative;width:100%;padding:0 var(--rand) 40px;display:grid;gap:16px}
.dv-titel h1{font-family:var(--titel);font-weight:300;font-size:clamp(38px,11vw,62px);
  line-height:1.04;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hell)}
.dv-titel .dv-hand{font-size:44px;margin-top:10px}
.dv-titel .dv-fliess{max-width:38ch;margin-top:6px}
.dv-titel .dv-knopf{margin-top:12px;width:100%}

/* Ueber mich */
.dv-ueber{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--linie)}
.dv-ueber__bild{position:relative;min-height:46vh;background-size:cover;background-position:50% 28%}
/* Kein Verlauf: auf diesem Bild steht kein Text, er wuerde es nur abdunkeln. */
.dv-ueber__text{padding:48px var(--rand) 56px;display:grid;gap:18px;justify-items:center;
  text-align:center}
.dv-ueber__text svg{color:var(--gold)}
.dv-ueber h2{font-family:var(--titel);font-weight:300;font-size:clamp(28px,7vw,40px);
  line-height:1.1;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hell)}
.dv-ueber__unter{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gedaempft)}

/* Abschnittslinie */
.dv-linie{display:flex;align-items:center;gap:18px;margin-bottom:34px}
.dv-linie::before,.dv-linie::after{content:"";flex:1;height:1px;background:var(--linie-stark)}
.dv-linie span{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-hell)}

/* Sessions */
.dv-sessions{padding:64px var(--rand) 72px}
.dv-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  list-style:none;margin:0;padding:0}
.dv-karte{border:1px solid rgba(201,168,99,.22);background:var(--karte);padding:26px 16px;
  display:grid;gap:12px;justify-items:center;text-align:center;
  transition:border-color 760ms var(--kurve)}
.dv-karte:hover{border-color:var(--linie-knopf)}
.dv-karte svg{color:var(--gold)}
.dv-karte__name{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.dv-karte__text{font-size:13px;color:var(--gedaempft)}
.dv-sessions__mehr{display:flex;justify-content:center;margin-top:30px}

/* Kacheln */
.dv-kacheln{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--linie);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.dv-kachel{position:relative;min-height:260px;display:flex;align-items:flex-end;
  padding:var(--rand);background-color:var(--grund);background-size:cover;
  transition:opacity 780ms var(--kurve)}
.dv-kachel:hover{opacity:.82}
.dv-kachel__inhalt{display:grid;gap:6px}
.dv-kachel__titel{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-hell)}
.dv-kachel__zeile{display:inline-flex;align-items:center;gap:12px;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.dv-kachel__zeile svg{color:var(--gold);flex:none}

/* Kontakt */
.dv-kontakt{padding:64px var(--rand) 0;display:grid;gap:22px;justify-items:center;text-align:center}
.dv-kontakt__daten{display:grid;gap:6px;justify-items:center}
.dv-kontakt__daten a{font-family:var(--titel);font-size:clamp(22px,6vw,32px);line-height:1.2;
  overflow-wrap:anywhere}
.dv-kontakt__mail{color:var(--gold-hell)}
.dv-kontakt__tel{color:var(--text)}
.dv-kontakt__ort{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gedaempft);margin-top:6px}

/* Fuss */
.dv-fuss{margin-top:64px;border-top:1px solid var(--linie)}
.dv-fuss__oben{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;
  padding:44px var(--rand) 34px;justify-items:center;text-align:center}
.dv-fuss__hand{font-size:38px}
.dv-fuss__rechts{display:grid;gap:14px;justify-items:center}
.dv-fuss__sozial{display:flex;align-items:center;gap:18px}
.dv-fuss__sozial a{display:inline-flex;color:var(--gedaempft)}
.dv-fuss__sozial a:hover{color:var(--gold)}
.dv-fuss__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;list-style:none;margin:0;padding:0}
.dv-fuss__nav a{color:var(--gedaempft)}
.dv-fuss__nav a:hover{color:var(--gold)}
.dv-fuss__unten{border-top:1px solid rgba(201,168,99,.12);padding:18px var(--rand) 40px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gedaempft);text-align:center}
.dv-fuss__recht{display:flex;align-items:center;gap:12px}
.dv-fuss__recht a{color:var(--gedaempft)}
.dv-fuss__trenner{color:rgba(201,168,99,.45)}
.dv-ab18{border:1px solid var(--linie-knopf);padding:5px 10px;color:var(--gold)}

/* Einfache Inhaltsseiten */
.dv-seite{padding:56px var(--rand) 72px;max-width:760px;margin:0 auto}
.dv-seite h1{font-family:var(--titel);font-weight:300;font-size:clamp(30px,8vw,46px);
  line-height:1.12;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hell);
  margin-bottom:28px}
.dv-seite h2{font-family:var(--titel);font-weight:300;font-size:26px;letter-spacing:.06em;
  color:var(--gold-hell);margin:34px 0 10px}
.dv-seite p,.dv-seite li{color:var(--text-2)}
.dv-seite p{margin-bottom:1.1em}
.dv-seite ul,.dv-seite ol{padding-left:1.2em;margin-bottom:1.1em}

/* Einblenden beim Scrollen */
.dv-zeigen{opacity:0;transform:translateY(20px);
  transition:opacity 900ms var(--kurve),transform 900ms var(--kurve)}
.dv-zeigen.ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .dv-zeigen{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Desktop */
@media (min-width:901px){
  :root{--rand:64px}
  .dv-titel{min-height:92vh}
  .dv-titel__inhalt{max-width:46%;padding:0 0 0 var(--rand)}
  .dv-titel .dv-knopf{width:auto;justify-self:start}
  .dv-ueber{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dv-ueber__bild{min-height:100%}
  .dv-ueber__text{padding:88px var(--rand)}
  .dv-karten{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dv-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dv-fuss__oben{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;text-align:left}
  .dv-fuss__oben .dv-marke{justify-items:start}
  .dv-fuss__rechts{justify-items:end}
  .dv-fuss__hand{text-align:center}
}

.dv-kontakt__label{color:var(--gold-hell)}

/* ------------------------------------------------ Eingang 18+ */
.dv-eingang{
  position:fixed;inset:0;z-index:9500;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;
  padding:28px var(--rand);
  background:
    radial-gradient(90% 70% at 50% 42%,rgba(110,18,32,.22),transparent 68%),
    var(--grund);
}
.dv-korn-an .dv-eingang::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-size:180px 180px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.dv-eingang__tafel{
  position:relative;z-index:1;width:100%;max-width:560px;
  border:1px solid var(--linie);padding:40px 26px 34px;
  display:grid;gap:16px;justify-items:center;text-align:center;
}
.dv-eingang__strich{display:block;width:44px;height:1px;background:var(--linie-stark)}
.dv-eingang__marke{
  font-family:var(--titel);font-size:13px;letter-spacing:.28em;color:var(--gold);
  border:1px solid var(--linie-knopf);padding:5px 10px 4px 14px;line-height:1;
}
.dv-eingang__titel{
  font-family:var(--titel);font-weight:300;font-size:clamp(28px,8vw,40px);
  line-height:1.1;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-hell);
}
.dv-eingang__text{color:var(--text-2);max-width:42ch}
.dv-eingang__knoepfe{display:grid;gap:12px;width:100%;margin-top:8px;align-items:stretch}
.dv-eingang__knoepfe .dv-knopf{width:100%;letter-spacing:.14em;padding:17px 16px;text-align:center}
.dv-eingang__klein{font-size:11px;line-height:1.7;color:var(--gedaempft);max-width:40ch}
.dv-eingang__recht{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gedaempft);
  display:flex;gap:10px;align-items:center;
}
.dv-eingang__recht a{color:var(--gedaempft)}
.dv-eingang__recht a:hover{color:var(--gold)}

/* Wer bestaetigt hat, sieht die Tafel nicht. Ohne JavaScript bleibt sie stehen. */
.dv-eingetreten .dv-eingang{display:none}
.dv-gesperrt body{overflow:hidden}
.dv-eingang.ist-weg{opacity:0;pointer-events:none;transition:opacity 520ms var(--kurve)}

@media (min-width:600px){
  .dv-eingang__tafel{padding:52px 44px 40px}
  .dv-eingang__knoepfe{grid-template-columns:1fr 1fr;gap:14px}
}