/* Ulrike Ebel – Wartungsseite. Keine externen Ressourcen (DSGVO). */
:root{
  --tuerkis:#17d7e4;
  --tuerkis-hell:#62e6f5;
  --hauch:#eefcfd;
  --indigo:#3b2d93;
  --indigo-dunkel:#2a1f6e;
  --rot:#c8102e;
  --rot-dunkel:#9e0c24;
  --text:#1f1d2b;
  --text-leise:#4a4860;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  font-family:Roboto,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--hauch);
}
a{color:var(--indigo);text-underline-offset:.2em}
a:hover,a:focus-visible{color:var(--rot)}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

.band{
  background:linear-gradient(135deg,var(--tuerkis) 0%,var(--tuerkis-hell) 60%,#b9f4fa 100%);
  padding:1.25rem 0;
}
.band .inner{max-width:62rem;margin:0 auto;padding:0 1rem;display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.marke{font-size:1.6rem;font-weight:400;color:var(--indigo);text-decoration:none;letter-spacing:.01em}
.marke:hover{color:var(--indigo-dunkel)}
.marke small{display:inline-block;font-size:1rem;color:var(--rot-dunkel);font-weight:500;margin-left:.4rem}

main{flex:1;width:100%;max-width:62rem;margin:0 auto;padding:3rem 1rem 4rem}

/* Startseite */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.1;font-weight:400;color:var(--indigo);margin:0 0 .5rem}
.hero .hinweis{font-size:1.25rem;color:var(--text-leise);margin:0 0 2.5rem}
.hero .hinweis::before{content:"";display:block;width:3.5rem;height:3px;background:var(--rot);margin:0 0 1.25rem}
.portrait{margin:0}
.portrait img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 12px 32px rgba(42,31,110,.18)}

.kontakt{font-style:normal;background:#fff;border-left:4px solid var(--tuerkis);padding:1.25rem 1.5rem;border-radius:0 4px 4px 0}
.kontakt h2{font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--indigo);margin:0 0 .5rem}
.kontakt p{margin:0 0 .75rem}
.kontakt p:last-child{margin:0}
.kontakt dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;margin:0}
.kontakt dt{color:var(--text-leise)}
.kontakt dd{margin:0}

/* Rechtstexte */
.recht{max-width:44rem}
.recht h1{font-size:2.2rem;font-weight:400;color:var(--indigo);margin:0 0 1.5rem}
.recht h2{font-size:1.3rem;font-weight:500;color:var(--indigo);margin:2.25rem 0 .5rem}
.recht h3{font-size:1.05rem;font-weight:500;margin:1.5rem 0 .25rem}
.recht p,.recht ul{margin:0 0 1rem}
.recht ul{padding-left:1.25rem}
.recht address{font-style:normal;margin:0 0 1rem}
.zurueck{display:inline-block;margin-top:2rem}

footer{background:var(--indigo);color:#fff;padding:1.25rem 0;font-size:.95rem}
footer .inner{max-width:62rem;margin:0 auto;padding:0 1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:#fff}
footer a:hover,footer a:focus-visible{color:var(--tuerkis-hell)}
footer nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem}
footer :focus-visible{outline-color:var(--tuerkis-hell)}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:2rem}
  .portrait{order:-1;max-width:16rem}
  main{padding-top:2rem}
}
@media print{.band,footer nav{display:none}body{background:#fff}}