/* Moderne Website-CSS – ronny-beier.de
   Die bisherigen Inhalte und Bilder bleiben erhalten.
*/
:root{
  --bg:#f4f4f4;
  --paper:rgba(255,255,255,.96);
  --text:#1f2933;
  --muted:#5b6773;
  --accent:#1d5fa7;
  --accent-dark:#123e6d;
  --border:#d6dbe1;
  --shadow:0 8px 30px rgba(0,0,0,.10);
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6;
  background:#e9e9e9 url('hintergrund1.jpg') fixed repeat;
}
a{color:var(--accent);text-decoration:underline}
a:hover{color:var(--accent-dark)}
img{max-width:100%;height:auto}
.site{
  width:min(1200px,calc(100% - 24px));
  margin:18px auto;
  background:var(--paper);
  border:1px solid rgba(0,0,0,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.site-header{
  padding:22px 24px 18px;
  background:linear-gradient(135deg,#173f67,#2d6da4);
  color:#fff;
}
.site-header h1{
  margin:0;
  font-size:clamp(1.55rem,3vw,2.35rem);
  line-height:1.15;
  font-weight:700;
}
.site-header p{margin:.35rem 0 0;opacity:.9}
.site-header .since{font-size:.82rem;opacity:.75}
.main-nav{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:8px 14px;
}
.main-nav ul{
  list-style:none;
  padding:0;margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.main-nav li{margin:0}
.main-nav a,.main-nav summary{
  display:block;
  padding:8px 11px;
  border-radius:8px;
  color:#263746;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.main-nav a:hover,.main-nav summary:hover{background:#edf4fa;color:#123e6d}
.main-nav .active{background:#dcecf9;color:#123e6d}
.main-nav details{position:relative}
.main-nav details[open] summary{background:#edf4fa}
.main-nav summary{list-style:none}
.main-nav summary::-webkit-details-marker{display:none}
.subnav{
  position:absolute;
  z-index:20;
  top:100%;left:0;
  min-width:210px;
  margin-top:3px;
  padding:7px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.subnav a{font-weight:500}
.content{
  padding:28px clamp(18px,4vw,48px) 42px;
  max-width:1100px;
  margin:auto;
}
.content h1,.content h2,.content h3{
  font-family:"Trebuchet MS",Arial,sans-serif;
  color:#172b3a;
  line-height:1.25;
}
.content h1{font-size:clamp(1.7rem,3vw,2.25rem);text-align:center}
.content h2{font-size:1.55rem;text-align:center}
.content h3{font-size:1.25rem}
.content p{margin:0 0 1rem}
.content .center{text-align:center}
.content .separator{
  display:block;
  width:min(502px,100%);
  height:auto;
  margin:16px auto;
}
.content table{
  width:100%;
  border-collapse:collapse;
  margin:1.2rem 0;
  background:#fff;
}
.content th,.content td{
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  text-align:left;
}
.content tr:nth-child(even){background:#f7f9fb}
.content img{vertical-align:middle}
.content .legacy-button{border:0}
.content .update{
  margin-top:2rem;
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
}
.content .card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;
}
.content .card{
  display:block;
  padding:18px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  text-decoration:none;
  color:inherit;
}
.content .card:hover{border-color:#a9c7df;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.content .card strong{display:block;color:#173f67;margin-bottom:4px}
.site-footer{
  padding:16px 24px;
  border-top:1px solid var(--border);
  background:#f6f8fa;
  color:var(--muted);
  font-size:.85rem;
  text-align:center;
}
@media(max-width:700px){
  .site{width:100%;margin:0;border-radius:0}
  .site-header{padding:18px}
  .main-nav ul{display:block}
  .main-nav li{margin:2px 0}
  .main-nav a,.main-nav summary{width:100%}
  .main-nav details{position:static}
  .subnav{position:static;box-shadow:none;margin:0 0 4px 10px;border-left:3px solid #dcecf9}
  .content{padding:22px 16px 32px;overflow-x:auto}
  .content table{font-size:.92rem;min-width:620px}
}