/* ===========================================================================
   Hoster-Seiten rw-host.de - gemeinsame Gestaltung
   Tokens uebernommen aus template/RalfWenske26 von ralfwenske.de.
   Hell  = Plakat: warmes Off-White, Anton gross, zarte Petrolverlaeufe.
   Dunkel = Tiefe: dunkler Grund, Raster, kraeftiges Petrolfeld.
   Beide Male dasselbe Geruest - nur die Tokens wechseln.
   =========================================================================== */

:root{
  --bg:#F4F3EE;
  --ink:#0E0E0E;
  --mute:#5C5C58;
  --acc:#1F7C99;
  --accInk:#FFFFFF;
  --line:#0E0E0E;
  --hair:rgba(14,14,14,.10);
  --raster:rgba(14,14,14,.05);
  --raster-weite:72px;

  /* Verlaufsfeld: Farben als RGB-Tripel, Staerke getrennt steuerbar */
  --feld-grund:#F4F3EE;
  --feld-1:31,124,153;
  --feld-2:23,99,124;
  --feld-3:108,199,224;
  --feld-staerke:0.22;

  --f-text:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-titel:'Anton','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0F11;
    --ink:#ECEDE8;
    --mute:rgba(236,237,232,.70);
    --acc:#38A9C9;
    --accInk:#0B0F11;
    --line:#ECEDE8;
    --hair:rgba(236,237,232,.16);
    --raster:rgba(236,237,232,.05);

    --feld-grund:#0B0F11;
    --feld-1:31,124,153;
    --feld-2:56,169,201;
    --feld-3:108,199,224;
    --feld-staerke:0.46;
  }
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.65 var(--f-text);
  -webkit-font-smoothing:antialiased;
}

.feld{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.raster{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(var(--raster) 1px,transparent 1px),
    linear-gradient(90deg,var(--raster) 1px,transparent 1px);
  background-size:var(--raster-weite) var(--raster-weite);
  mask-image:radial-gradient(120% 90% at 50% 45%,#000 35%,transparent 100%);
}

.seite{
  /* min-height statt height: auf schmalen Telefonen darf die Seite wachsen
     und scrollen, statt den Knopf oder die Fusszeile abzuschneiden. */
  position:relative;z-index:2;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:clamp(22px,5vw,58px) clamp(22px,6vw,72px);
  max-width:1680px;margin:0 auto;
}

.marke{
  font:500 clamp(11px,1.5vw,13px)/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}

.mitte{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}

.code{
  font:400 clamp(76px,19vw,250px)/0.82 var(--f-titel);
  color:var(--acc);letter-spacing:-.012em;
  margin:0 0 clamp(8px,1.4vw,20px);
}

.titel{
  margin:0;
  font:400 clamp(28px,6.2vw,74px)/1.02 var(--f-titel);
  text-transform:uppercase;letter-spacing:.008em;
  max-width:15ch;text-wrap:balance;
}

.text{
  margin:clamp(14px,2vw,26px) 0 0;
  max-width:52ch;color:var(--mute);
  font-size:clamp(15.5px,1.9vw,19px);line-height:1.62;
}

.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.4vw,42px)}

.knopf{
  display:inline-flex;align-items:center;min-height:50px;padding:0 26px;
  border:1.5px solid var(--line);border-radius:999px;
  background:var(--acc);color:var(--accInk);
  font:600 15px/1 var(--f-text);text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.knopf:hover,.knopf:focus-visible{
  transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--line);
}
.knopf:focus-visible{outline:2px dashed var(--acc);outline-offset:4px}
.knopf--zweit{background:transparent;color:var(--ink)}

.fuss{
  margin-top:clamp(20px,3vw,34px);padding-top:clamp(14px,2vw,20px);
  border-top:1.5px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.5em 2em;justify-content:space-between;
  font:400 clamp(11px,1.5vw,13px)/1.5 var(--f-mono);color:var(--mute);
}
.fuss a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--hair)}
.fuss a:hover{color:var(--acc);border-color:var(--acc)}

/* Sehr niedrige Fenster: Zahl zuruecknehmen, damit nichts abgeschnitten wird */
@media (max-height:480px){
  .code{font-size:clamp(54px,13vh,96px)}
  .titel{font-size:clamp(24px,5vh,38px)}
}

@media (prefers-reduced-motion:reduce){
  .knopf,.knopf:hover,.knopf:focus-visible{transition:none;transform:none;box-shadow:none}
}

/* Platzhalterseite: statt einer erfundenen Zahl wird der Domainname zum Bild.
   Deshalb kleiner gesetzt, umbruchfaehig und mit Grossbuchstaben. */
.code--wort{
  font-size:clamp(34px,8.2vw,104px);
  line-height:0.96;
  text-transform:uppercase;
  letter-spacing:-.005em;
  overflow-wrap:anywhere;
  max-width:16ch;
}
@media (max-height:480px){ .code--wort{font-size:clamp(26px,6vh,52px)} }

/* Ohne JavaScript bleiben Marke und Domainname leer - dann sollen sie auch
   keinen Platz beanspruchen. Die Ueberschrift traegt die Aussage ohnehin. */
.code:empty,.marke:empty{display:none}