.ratgeberseite{ --rahmen: min(1340px, calc(100% - 40px)); background: var(--flaeche); }
.ratgeberseite .seitenkopf{
position: relative;
background: radial-gradient(circle at 82% 0, rgba(54,223,184,.12), transparent 30%), linear-gradient(135deg,#07111f,#0b2637);
}
.ratgeber-main{
overflow: hidden;
padding: 30px 0 124px;
background: radial-gradient(circle at 8% 8%, rgba(54,223,184,.07), transparent 22%), linear-gradient(180deg,#edf5f4 0,var(--flaeche) 420px,var(--flaeche) 100%);
}
.brotkrumen{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 24px; color:#71858e; font-size:.82rem; font-weight:650; }
.brotkrumen a{ color:#49646f; text-decoration:none; }
.brotkrumen a:hover{ color:var(--mint-dunkel); text-decoration:underline; }
.ratgeber-hero{
position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:clamp(34px,5vw,72px); align-items:center;
overflow:hidden; padding:clamp(38px,5vw,68px); border:1px solid rgba(255,255,255,.11); border-radius:34px; 

box-shadow:0 34px 92px rgba(8,30,42,.2);
}
.ratgeber-hero::before{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:64px 64px; content:""; mask-image:linear-gradient(135deg,#000,transparent 78%); pointer-events:none; }
.ratgeber-hero > *{ position:relative; z-index:1; }
.ratgeber-hero h1{ max-width:900px; margin:0 0 22px; color:#fff; font-size:clamp(2.15rem,3.65vw,3.45rem); overflow-wrap:anywhere; text-wrap:balance; }
.ratgeber-einleitung{ max-width:790px; margin-bottom:28px; color:rgba(235,246,250,.76); font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.7; }
.ratgeber-aktionen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.ratgeber-hero .sekundaer-knopf{ border-color:rgba(255,255,255,.2); color:#e9f7f8; background:rgba(255,255,255,.065); }
.ratgeber-hero .sekundaer-knopf:hover{ border-color:rgba(255,255,255,.32); color:#fff; background:rgba(255,255,255,.11); }
.ratgeber-stand{ margin:23px 0 0; color:rgba(217,235,240,.48); font-size:.76rem; font-weight:650; }
.ratgeber-kurzantwort,
.ratgeber-livekarte{ min-width:0; padding:28px; border:1px solid rgba(255,255,255,.16); border-radius:24px; background:rgba(255,255,255,.085); box-shadow:inset 0 1px rgba(255,255,255,.08),0 24px 65px rgba(0,10,20,.17); backdrop-filter:blur(12px); }
.ratgeber-kurzantwort > span,
.ratgeber-livekarte > span{ display:block; margin-bottom:11px; color:var(--mint); font-size:.72rem; font-weight:820; letter-spacing:.1em; text-transform:uppercase; }
.ratgeber-kurzantwort p,
.ratgeber-livekarte p{ margin-bottom:18px; color:rgba(242,249,251,.84); }
.ratgeber-kurzantwort a,
.ratgeber-livekarte a{ color:#fff; font-size:.9rem; font-weight:780; }
.ratgeber-livekarte > strong{ display:block; margin-bottom:20px; color:#fff; font-family:var(--schrift-zahlen); font-size:clamp(2.1rem,4vw,3.4rem); letter-spacing:-.045em; }
.ratgeber-livekarte dl{ display:grid; gap:10px; margin:0 0 20px; }
.ratgeber-livekarte dl div{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); }
.ratgeber-livekarte dt{ color:rgba(227,241,245,.52); font-size:.75rem; font-weight:700; }
.ratgeber-livekarte dd{ min-width:0; margin:0; color:#fff; font-size:.86rem; font-weight:690; overflow-wrap:anywhere; }
.ratgeber-livekarte code{ color:inherit; }
.ratgeber-layout{ display:grid; grid-template-columns:minmax(190px,230px) minmax(0,960px); justify-content:center; gap:clamp(34px,4vw,56px); align-items:start; margin-top:64px; }
.ratgeber-navigation{ position:sticky; top:22px; }
.ratgeber-navigation nav{ display:grid; gap:4px; padding:20px; border:1px solid #dce8e6; border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 16px 45px rgba(19,48,59,.06); backdrop-filter:blur(10px); }
.ratgeber-navigation strong{ margin-bottom:8px; color:var(--tinte); font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; }
.ratgeber-navigation a{ padding:8px 9px; border-radius:9px; color:#536b75; font-size:.82rem; font-weight:650; line-height:1.35; text-decoration:none; }
.ratgeber-navigation a:hover{ color:var(--mint-dunkel); background:var(--mint-hell); }
.ratgeber-artikel{ min-width:0; padding:clamp(30px,5vw,58px); border:1px solid #e0eae8; border-radius:30px; background:#fff; box-shadow:0 25px 75px rgba(15,42,53,.08); }
.ratgeber-artikel section{ scroll-margin-top:24px; }
.ratgeber-artikel section + section{ margin-top:64px; padding-top:58px; border-top:1px solid #e4ecea; }
.ratgeber-artikel h2{ margin-bottom:22px; font-size:clamp(1.75rem,3vw,2.55rem); text-wrap:balance; }
.ratgeber-artikel h3{ margin:30px 0 11px; color:#203b47; font-size:clamp(1.2rem,2vw,1.48rem); }
.ratgeber-artikel p{ max-width:86ch; margin-bottom:20px; }
.ratgeber-artikel p:last-child{ margin-bottom:0; }
.ratgeber-artikel > section > p,
.ratgeber-artikel > section > .ratgeber-liste li,
.ratgeber-artikel > section > .ratgeber-nummernliste li,
.ratgeber-artikel > section > .ratgeber-definitionen dd,
.ratgeber-artikel .ratgeber-hinweis p,
.ratgeber-artikel .ratgeber-merksatz p,
.ratgeber-artikel .ratgeber-beispiel p,
.ratgeber-artikel .ratgeber-schluss p,
.ratgeber-faq-liste details p{
text-align: justify;
text-justify: inter-word;
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
.ratgeber-liste,
.ratgeber-checkliste,
.ratgeber-nummernliste{ display:grid; gap:11px; margin:24px 0; padding-left:24px; }
.ratgeber-liste li,
.ratgeber-checkliste li,
.ratgeber-nummernliste li{ padding-left:5px; }
.ratgeber-checkliste{ padding:0; list-style:none; }
.ratgeber-checkliste li{ position:relative; padding:13px 16px 13px 44px; border:1px solid #dce9e6; border-radius:13px; background:#f8fbfa; }
.ratgeber-checkliste li::before{ position:absolute; top:15px; left:16px; width:18px; height:18px; border-radius:50%; color:#fff; background:var(--mint-dunkel); content:"✓"; font-size:.72rem; font-weight:900; line-height:18px; text-align:center; }
.ratgeber-schritte{ display:grid; gap:14px; margin:28px 0; padding:0; list-style:none; }
.ratgeber-schritte li{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; align-items:start; padding:20px; border:1px solid #dce8e6; border-radius:17px; background:#f8fbfa; }
.ratgeber-schritte li > span{ display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:#073e35; background:var(--mint-hell); font-family:var(--schrift-zahlen); font-weight:820; }
.ratgeber-schritte h3{ margin:0 0 7px; font-size:1.12rem; }
.ratgeber-schritte p{ margin:0; color:#5b7079; font-size:.94rem; }
.ratgeber-methoden{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }
.ratgeber-methoden article{ position:relative; min-width:0; padding:24px; border:1px solid #dce8e6; border-radius:18px; background:linear-gradient(155deg,#fff,#f7fbfa); box-shadow:0 12px 34px rgba(20,48,59,.05); }
.ratgeber-methoden article > span{ display:block; margin-bottom:18px; color:var(--mint-dunkel); font-family:var(--schrift-zahlen); font-size:.78rem; font-weight:850; letter-spacing:.08em; }
.ratgeber-methoden h3{ margin:0 0 10px; font-size:1.2rem; }
.ratgeber-methoden p{ margin:0; color:#5c717a; font-size:.93rem; }
.ratgeber-definitionen{ display:grid; gap:12px; margin:25px 0; }
.ratgeber-definitionen div{ display:grid; grid-template-columns:minmax(150px,.34fr) minmax(0,.66fr); gap:24px; padding:18px 20px; border:1px solid #dde9e7; border-radius:15px; background:#fafcfc; }
.ratgeber-definitionen dt{ color:var(--tinte); font-weight:780; }
.ratgeber-definitionen dd{ margin:0; color:#5b7079; }
.ratgeber-hinweis,
.ratgeber-merksatz,
.ratgeber-beispiel{ margin:28px 0; padding:20px 22px; border:1px solid #cce8e0; border-left:4px solid var(--mint-dunkel); border-radius:15px; background:#f1faf7; }
.ratgeber-hinweis.warnung{ border-color:#efd9ba; border-left-color:var(--orange); background:#fff8ed; }
.ratgeber-hinweis strong,
.ratgeber-merksatz strong,
.ratgeber-beispiel > span{ display:block; margin-bottom:6px; color:var(--tinte); font-size:.82rem; font-weight:820; letter-spacing:.04em; text-transform:uppercase; }
.ratgeber-hinweis p,
.ratgeber-merksatz p,
.ratgeber-beispiel p{ margin:0; }
.ratgeber-beispiel{ border-left-color:var(--cyan); background:#f2f9fc; }
.ratgeber-tabelle-wrap{ max-width:100%; margin:28px 0; overflow-x:auto; border:1px solid #dce8e6; border-radius:17px; background:#fff; }
.ratgeber-tabelle{ width:100%; min-width:650px; border-collapse:collapse; font-size:.88rem; line-height:1.5; }
.ratgeber-tabelle th,
.ratgeber-tabelle td{ padding:15px 17px; border-bottom:1px solid #e3ecea; text-align:left; vertical-align:top; }
.ratgeber-tabelle th{ color:#27434d; background:#edf7f4; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; }
.ratgeber-tabelle tr:last-child td{ border-bottom:0; }
.ratgeber-quellenzeile{ padding-top:12px; color:#6d818a; font-size:.83rem; }
.ratgeber-quellenzeile a{ font-weight:720; }
.ratgeber-schluss{ padding:clamp(26px,4vw,40px); border-radius:22px; color:rgba(235,246,250,.78); background:radial-gradient(circle at 90% 0,rgba(54,223,184,.18),transparent 28%),linear-gradient(135deg,#071522,#0b2a39); }
.ratgeber-schluss h2{ color:#fff; font-size:clamp(1.65rem,2.7vw,2.25rem); }
.ratgeber-schluss p{ color:rgba(235,246,250,.78); }
.ratgeber-schluss .primaer-knopf{ margin-top:8px; }
.ratgeber-faq,
.ratgeber-verwandt{ max-width:1220px; margin:72px auto 0; padding:clamp(30px,5vw,54px); border:1px solid #dfe9e7; border-radius:28px; background:#fff; box-shadow:0 24px 72px rgba(16,45,56,.07); }
.ratgeber-abschnittskopf{ max-width:780px; margin-bottom:30px; }
.ratgeber-abschnittskopf h2{ margin-bottom:14px; font-size:clamp(1.75rem,3vw,2.55rem); text-wrap:balance; }
.ratgeber-abschnittskopf p{ color:#617680; }
.ratgeber-faq-liste{ display:grid; gap:10px; }
.ratgeber-faq-liste details{ overflow:hidden; border:1px solid #dce8e6; border-radius:15px; background:#fbfdfc; }
.ratgeber-faq-liste summary{ position:relative; display:flex; justify-content:space-between; gap:20px; padding:18px 20px; color:var(--tinte); font-weight:760; list-style:none; }
.ratgeber-faq-liste summary::-webkit-details-marker{ display:none; }
.ratgeber-faq-liste summary span{ position:relative; flex:0 0 20px; width:20px; height:20px; }
.ratgeber-faq-liste summary span::before,
.ratgeber-faq-liste summary span::after{ position:absolute; top:9px; left:3px; width:14px; height:2px; border-radius:2px; background:var(--mint-dunkel); content:""; }
.ratgeber-faq-liste summary span::after{ transform:rotate(90deg); transition:transform .18s ease; }
.ratgeber-faq-liste details[open] summary span::after{ transform:rotate(0); }
.ratgeber-faq-liste details > div{ padding:0 20px 20px; color:#5d727b; }
.ratgeber-faq-liste details p{ margin:0; }
.ratgeber-kartenraster{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ratgeber-linkkarte{ position:relative; min-width:0; padding:24px; border:1px solid #dce8e6; border-radius:18px; background:linear-gradient(150deg,#fff,#f5faf9); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.ratgeber-linkkarte:hover{ border-color:#b9ddd4; box-shadow:0 17px 42px rgba(18,50,61,.08); transform:translateY(-3px); }
.ratgeber-linkkarte > span{ display:block; margin-bottom:12px; color:var(--mint-dunkel); font-size:.7rem; font-weight:820; letter-spacing:.08em; text-transform:uppercase; }
.ratgeber-linkkarte h3{ margin:0 0 10px; font-size:1.24rem; }
.ratgeber-linkkarte h3 a{ color:inherit; text-decoration:none; }
.ratgeber-linkkarte p{ margin-bottom:17px; color:#627780; font-size:.91rem; }
@media (max-width:1100px){
.ratgeber-hero{ grid-template-columns:1fr; }
.ratgeber-kurzantwort,
.ratgeber-livekarte{ max-width:720px; }
.ratgeber-layout{ grid-template-columns:1fr; max-width:1030px; margin-inline:auto; }
.ratgeber-navigation{ position:static; }
.ratgeber-navigation nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ratgeber-navigation strong{ grid-column:1/-1; }
}
@media (max-width:760px){
.ratgeberseite{ --rahmen: min(1340px, calc(100% - 30px)); }
.ratgeber-main{ padding-top:20px; padding-bottom:88px; }
.ratgeber-hero{ padding:30px 24px; border-radius:25px; }
.ratgeber-hero h1{ font-size:clamp(2rem,8.8vw,2.85rem); }
.ratgeber-aktionen,
.ratgeber-aktionen a{ width:100%; }
.ratgeber-kurzantwort,
.ratgeber-livekarte{ padding:22px; border-radius:19px; }
.ratgeber-livekarte dl div{ grid-template-columns:1fr; gap:3px; }
.ratgeber-layout{ gap:28px; margin-top:38px; }
.ratgeber-navigation nav{ grid-template-columns:1fr; }
.ratgeber-artikel,
.ratgeber-faq,
.ratgeber-verwandt{ padding:25px 20px; border-radius:22px; }
.ratgeber-artikel section + section{ margin-top:48px; padding-top:44px; }
.ratgeber-artikel > section > p,
.ratgeber-artikel > section > .ratgeber-liste li,
.ratgeber-artikel > section > .ratgeber-nummernliste li,
.ratgeber-artikel > section > .ratgeber-definitionen dd,
.ratgeber-artikel .ratgeber-hinweis p,
.ratgeber-artikel .ratgeber-merksatz p,
.ratgeber-artikel .ratgeber-beispiel p,
.ratgeber-artikel .ratgeber-schluss p,
.ratgeber-faq-liste details p{ text-align:left; }
.ratgeber-methoden,
.ratgeber-kartenraster{ grid-template-columns:1fr; }
.ratgeber-definitionen div{ grid-template-columns:1fr; gap:6px; }
.ratgeber-schritte li{ grid-template-columns:40px minmax(0,1fr); gap:14px; padding:17px; }
.ratgeber-schritte li > span{ width:36px; height:36px; }
}
@media (max-width:420px){
.brotkrumen{ font-size:.75rem; }
.ratgeber-hero{ margin-inline:-5px; padding:27px 20px; }
.ratgeber-artikel,
.ratgeber-faq,
.ratgeber-verwandt{ padding-inline:17px; }
.ratgeber-schritte li{ grid-template-columns:1fr; }
.ratgeber-schritte li > span{ margin-bottom:2px; }
.ratgeber-methoden article,
.ratgeber-linkkarte{ padding:20px; }
}
@media (prefers-reduced-motion:reduce){
.ratgeber-linkkarte{ transition:none; }
.ratgeber-linkkarte:hover{ transform:none; }
}
@media print{
.ratgeberseite .seitenkopf,
.ratgeber-navigation,
.ratgeber-aktionen,
.ratgeber-verwandt,
.ratgeberseite .fussbereich{ display:none!important; }
.ratgeber-main,
.ratgeber-hero,
.ratgeber-artikel,
.ratgeber-faq{ color:#000; background:#fff; box-shadow:none; }
.ratgeber-hero{ display:block; padding:0 0 25px; border:0; }
.ratgeber-hero h1,
.ratgeber-schluss h2{ color:#000; }
.ratgeber-einleitung,
.ratgeber-stand,
.ratgeber-schluss p{ color:#222; }
.ratgeber-kurzantwort,
.ratgeber-livekarte,
.ratgeber-schluss{ border:1px solid #aaa; color:#000; background:#fff; }
.ratgeber-layout{ display:block; margin-top:20px; }
.ratgeber-artikel,
.ratgeber-faq{ padding:0; border:0; }
}
.ratgeber-abschnitt:nth-of-type(even){
background: linear-gradient(180deg, #eaf5ff, #f5faff);
}
.ratgeber-artikel,
.ratgeber-faq details,
.ratgeber-verwandt a{
border-color: rgba(82, 145, 203, 0.2);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 20px 54px rgba(16, 70, 133, 0.09);
}
.ratgeber-hero{
color: rgba(245, 251, 255, 0.88);
background:
radial-gradient(circle at 82% 13%, rgba(104, 230, 255, 0.28), transparent 29%),
linear-gradient(132deg, #071b45, #0b4fc8 58%, #098fd4);
}
.ratgeber-hero h1,
.ratgeber-hero h2{
color: #ffffff;
}
.ipv6x-hinweis{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 18px;
align-items: start;
max-width: 960px;
margin: 38px auto;
padding: 22px 24px;
border: 1px solid rgba(25, 139, 218, 0.24);
border-radius: 18px;
background: linear-gradient(135deg, rgba(232, 247, 255, 0.96), rgba(255, 255, 255, 0.96));
box-shadow: 0 18px 48px rgba(16, 74, 139, 0.1);
}
.ipv6x-hinweis::before{
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 13px;
color: #ffffff;
background: linear-gradient(135deg, #0b69df, #12badb);
content: "v6";
font-size: 0.78rem;
font-weight: 850;
letter-spacing: -0.02em;
}
.ipv6x-hinweis h2,
.ipv6x-hinweis h3{
margin: 0 0 7px;
color: #0b2d64;
font-size: clamp(1.18rem, 2vw, 1.45rem);
}
.ipv6x-hinweis p{
margin: 0;
color: #4d6481;
}
.ipv6x-hinweis a{
font-weight: 800;
}
.ipv6x-hinweis a:focus-visible{
outline: 3px solid rgba(16, 156, 226, 0.35);
outline-offset: 3px;
}
@media (max-width: 760px){
.ipv6x-hinweis{
grid-template-columns: 1fr;
margin-inline: 15px;
padding: 20px;
}
}
@media print{
.ipv6x-hinweis{
display: none !important;
}
}


.ratgeber-abbildung{
  margin: 28px 0;
  padding: 14px;
  border: 1px solid rgba(10, 63, 168, 0.12);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.96));
  box-shadow: 0 14px 34px rgba(20, 52, 89, 0.08);
}

.ratgeber-abbildung img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.ratgeber-abbildung figcaption{
  margin-top: 14px;
  color: #4e6172;
  font-size: 0.95rem;
  line-height: 1.58;
}

.ratgeber-abbildung-gross{
  margin-top: 32px;
}

@media (max-width: 760px){
  .ratgeber-abbildung{
    margin: 24px 0;
    padding: 10px;
    border-radius: 20px;
  }

  .ratgeber-abbildung img{
    border-radius: 14px;
  }

  .ratgeber-abbildung figcaption{
    font-size: 0.91rem;
  }
}