/* ===================================================================
 *  sw-s.info  —  Stadtwerke Soest GmbH
 *  Landing / domain-legitimacy page
 *  Brand palette sampled from the logo: red (lead) · orange · magenta
 *  Responsive · dependency-free
 * =================================================================== */

/* ---- Brand fonts (shipped locally by the site) -------------------- */
@font-face{
  font-family:"Merriweather";
  src:url(../fonts/Merriweather-Bold.ttf) format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Merriweather";
  src:url(../fonts/Merriweather-Regular.ttf) format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Merriweather";
  src:url(../fonts/Merriweather-Light.ttf) format("truetype");
  font-weight:300; font-style:normal; font-display:swap;
}

/* ---- Design tokens (exact logo colors) --------------------------- */
:root{
  --ink:          #1e1a1b;   /* near-black body text                  */

  --red:          #e3000f;   /* brand red — wordmark, primary         */
  --red-btn:      #b90010;   /* accessible red button bg              */
  --red-deep:     #900410;   /* red hover / deep headings             */

  --magenta:      #af0e80;   /* logo magenta — "our" identity + rules */
  --magenta-deep: #870a63;   /* accessible magenta text/hover         */

  --orange:       #ed6f00;   /* logo orange — warm accent, arrow      */

  --paper:        #ffffff;
  --mist:         #faf5f5;   /* calm near-white panel                 */
  --mist-2:       #f6ecef;
  --line:         #e9dcdf;   /* neutral-warm hairline                 */
  --muted:        #6d5d5f;   /* muted warm labels                     */

  --radius:   14px;
  --radius-sm:10px;
  --shadow:   0 1px 2px rgba(30,26,27,.05), 0 12px 32px -18px rgba(144,4,16,.30);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:"Merriweather", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- Reset -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.6;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--mist) 0%, rgba(250,245,245,0) 60%),
    var(--paper);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red-deep); text-decoration:none; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--red-btn); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 var(--radius-sm) 0; z-index:20;
}
.skip-link:focus{ left:0; }

/* ---- Header / logo (white card + silver shadow, per brand) -------- */
.site-header{
  padding-left: 1.5rem;
}
.logo-link{ display:inline-block; }
.logo{                                 /* 1:1 with the original site */
  width:15rem;
  object-fit:cover;
  box-shadow:5px 4px 11px 0px silver;
}
@media only screen and (max-width:940px){ .logo{ width:13rem; } }
@media only screen and (min-width:2000px){ .logo{ width:18rem; } }
.logo-link:focus-visible{ outline:3px solid var(--red); outline-offset:4px; }

/* ---- Layout wrapper ---------------------------------------------- */
.wrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:clamp(1rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 2rem) 3rem;
  flex:1 0 auto;
}

/* ---- Hero --------------------------------------------------------- */
.hero{ text-align:center; margin-bottom:clamp(2rem, 5vw, 3rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 1.1rem;
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  background:var(--mist-2);
  border:1px solid var(--line);
  padding:.45rem .9rem; border-radius:999px;
}
.eyebrow-mark{ width:1rem; height:1rem; color:var(--red); }

.wordmark{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(3rem, 13vw, 6rem);
  line-height:.95; letter-spacing:-.02em;
  margin:0 0 1.1rem;
  color:var(--red);
}
.wordmark::selection{ background:var(--red); color:#fff; }

.purpose{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.35rem .6rem; margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1rem, 3.2vw, 1.4rem);
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink);
}
.purpose .amp{ color:var(--orange); font-weight:700; font-size:1.15em; }

/* ---- Magenta rule (structural accent, echoes the logo) ----------- */
.rule{
  width:64px; height:4px; border:0;
  background:var(--magenta); border-radius:2px;
  margin:0 auto clamp(1.5rem, 4vw, 2.25rem);
}

/* ---- Signature: URL transformation ------------------------------- */
.transform{
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.25rem, 4vw, 2rem);
  box-shadow:var(--shadow);
  margin-bottom:clamp(1.75rem, 5vw, 2.75rem);
}
.url-row{ text-align:center; }
.url-label{
  display:block;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem;
}
.url{
  font-family:var(--mono);
  font-size:clamp(.82rem, 2.6vw, 1rem);
  line-height:1.4;
  word-break:break-all;
  display:inline-block;
  padding:.7rem 1rem;
  border-radius:var(--radius-sm);
  background:#fff;
  border:1px solid var(--line);
  max-width:100%;
}
.url-long{ color:var(--muted); }
.url-long .url-host{ color:var(--ink); font-weight:700; }
.url-short{
  border-color:var(--magenta);
  box-shadow:0 0 0 3px rgba(175,14,128,.14);
}
.url-short .url-host{ color:var(--magenta-deep); font-weight:700; }
.url-short .url-path{ color:var(--ink); }

.transform-arrow{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.75rem 0;
  color:var(--orange);
}
.transform-arrow svg{
  width:1.75rem; height:1.75rem;
  animation:bob 1.8s ease-in-out infinite;
}
.transform-word{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--orange);
}
@keyframes bob{
  0%,100%{ transform:translateY(-2px); }
  50%    { transform:translateY(3px); }
}

/* ---- Trust panel -------------------------------------------------- */
.trust{ margin-bottom:clamp(1.75rem, 5vw, 2.5rem); }
.trust h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.35rem, 4.5vw, 1.9rem);
  color:var(--red-deep);
  margin:0 0 .75rem;
  text-align:center;
}
.trust p{
  margin:0 auto .9rem;
  max-width:56ch;
  text-align:center;
  color:#332628;
}
.trust strong{ color:var(--red-deep); }

.trust-badge{
  display:flex; align-items:flex-start; gap:.75rem; text-align:left;
  background:var(--mist-2);
  border:1px solid var(--line);
  border-left:4px solid var(--red);
  border-radius:var(--radius-sm);
  padding:.9rem 1.1rem;
  margin-top:1.25rem;
}
.trust-badge svg{
  flex:0 0 auto; width:1.6rem; height:1.6rem; color:var(--red); margin-top:.1rem;
}
.trust-badge span{ font-size:.95rem; }

/* ---- Buttons ------------------------------------------------------ */
.actions{
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  margin-bottom:clamp(2rem, 6vw, 3rem);
}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--serif); font-weight:700;
  font-size:1rem;
  padding:.95rem 1.5rem;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn-arrow{ width:15px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.btn:hover .btn-arrow{ transform:translateX(4px); }
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

.btn-primary{
  background:var(--red-btn); color:#fff;
  box-shadow:0 10px 22px -12px rgba(185,0,16,.9);
}
.btn-primary:hover{ background:var(--red-deep); }

.btn-ghost{
  background:#fff; color:var(--red-deep); border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--red); background:var(--mist); }

/* ---- Social ------------------------------------------------------- */
.social{ text-align:center; margin-bottom:1rem; }
.social-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.95rem; font-weight:600; color:var(--muted);
  padding:.5rem .75rem; border-radius:999px;
  transition:color .2s ease, background .2s ease;
}
.social-link svg{ width:1.6rem; height:1.6rem; color:#3b5998; transition:transform .2s ease; }
.social-link:hover{ color:var(--red-deep); background:var(--mist); }
.social-link:hover svg{ transform:scale(1.08); }
.social-link:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

/* ---- Footer ------------------------------------------------------- */
.site-footer{
  flex-shrink:0;
  background:var(--mist);
  border-top:1px solid var(--line);
  padding:clamp(1.5rem, 4vw, 2.25rem) 1.25rem;
  text-align:center;
}
.footer-nav{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; justify-content:center;
  margin-bottom:1rem;
}
.footer-nav a{
  color:var(--red-deep); font-weight:600; font-size:.95rem;
  padding:.25rem 0; position:relative;
}
.footer-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--magenta); transition:width .22s ease;
}
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after{ width:100%; }
.footer-nav a:focus-visible{ outline:none; }

.copyright{
  display:inline-flex; align-items:center; gap:.4rem;
  margin:0; font-size:.85rem; color:var(--muted);
}
.copy-mark svg{ width:1rem; height:1rem; color:var(--red); display:block; }

/* ---- Responsive tweaks ------------------------------------------- */
@media (max-width:520px){
  .actions .btn{ width:100%; justify-content:center; }
  .site-header{ text-align:center; }
}
@media (min-width:640px){
  .url{ padding:.8rem 1.15rem; }
}

/* ---- Motion & contrast preferences ------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
@media (prefers-contrast:more){
  :root{ --line:#cf9aa8; --muted:#4d3a3c; }
}