/* senexpert.ch - Darstellung
   fluid, Spalten in Prozent. Schrift gross, weil die Leserschaft ab 60 ist. */

html			{ margin:0; padding:0 }
body			{ margin:0; padding:0; font-family:"Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Verdana,sans-serif; font-size:18px; line-height:1.55; color:#111; background:#fff }
a:link			{ color:#04f }
a:visited		{ color:#508 }
a:focus-visible, button:focus-visible, input:focus-visible + span { outline:3px solid #e08a1e; outline-offset:2px }
img			{ border:0 }
p			{ margin:0.9em 2px }
table			{ border-collapse:collapse; border-spacing:0 }
td, th			{ vertical-align:top }
hr			{ border:0; border-bottom:1px solid #ccc }

/* Kopf */
.kopf			{ position:relative; padding:5px 10px 0 10px; min-height:84px }
.marke			{ font-size:21px; line-height:1.2; text-decoration:none }
.marke a		{ text-decoration:none; color:#04f }
.marke .kl		{ color:#999 }
.marke .rot		{ color:#b5462b }
.anspruch		{ color:#888; font-weight:bold; font-size:15px; margin:1px 0 0 0 }
.seitenzahl		{ position:absolute; right:14px; bottom:12px; font-size:13px; color:#999 }

/* Reiterzeile: Sprungmarken in die Seite */
.reiterzeile		{ display:flex; flex-wrap:wrap; align-items:flex-end; padding:0 0 0 0; border-bottom:1px solid #e3b98c }
.reiter			{ display:block; text-align:center; padding:4px 9px 2px 9px; font-weight:bold; font-size:16px; line-height:1.15 }
.reiter a		{ color:#222; text-decoration:none }
.reiter a:hover		{ text-decoration:underline }
.reiter small		{ display:block; font-size:11px; color:#555; font-weight:bold; margin-top:2px }
.reiter.aktiv		{ background:#fbe6cf; border:1px solid #e3b98c; border-bottom:0; margin-bottom:-1px; padding-bottom:3px }
.reiterrest		{ margin-left:auto; padding:0 12px 6px 12px; font-size:15px; white-space:nowrap }

/* das Band unter den Reitern (bei der Vorlage war das die Suchleiste) */
.band			{ background:#fbe6cf; padding:8px 10px 9px 10px; font-size:16px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px }
.band b			{ font-size:17px }
.band .knopf		{ font:inherit; font-weight:bold; font-size:15px; padding:2px 10px; background:#f3f3f3; border:1px solid #888; border-radius:2px; color:#111; text-decoration:none }
.band .klein		{ font-size:13px }

/* drei Spalten, fluid */
.spalten		{ display:flex; align-items:flex-start; padding:14px 0 0 0 }
.sp-links		{ width:22%; padding:0 0.5em 0 0; box-sizing:border-box }
.sp-mitte		{ width:54%; padding:0 0.9em 0 0.4em; box-sizing:border-box; min-width:0 }
.sp-rechts		{ width:24%; padding:0 0 0 0.5em; box-sizing:border-box }

/* Module (Kästchen mit Klammer-Titel) */
.modul			{ margin:0 0 17px 0; font-size:16px }
.modul-kopf		{ display:flex; justify-content:space-between; color:#555; font-size:16px; padding:0 2px }
.modul-kopf .rot	{ color:#b5462b }
.modul-kopf button	{ font:inherit; font-size:13px; background:none; border:0; color:#04f; text-decoration:underline; cursor:pointer; padding:0 2px }
.modul-inhalt		{ padding:3px 2px 0 2px }
.modul.zu .modul-inhalt	{ display:none }
.inhaltsliste		{ margin:0; padding:0; list-style:none; counter-reset:nr }
.inhaltsliste li	{ margin:0 0 4px 0; padding-left:1.9em; text-indent:-1.9em }
.inhaltsliste li:before	{ counter-increment:nr; content:counter(nr) ". "; color:#888; display:inline-block; width:1.9em; text-indent:0 }
.zahlen			{ width:100%; font-size:15px }
.zahlen td		{ padding:3px 2px; border-bottom:1px solid #e6e6e6 }
.zahlen td.b		{ text-align:right; white-space:nowrap; font-weight:bold }
.grau			{ background:#eee; padding:7px 9px 9px 9px }

/* Haupttext */
.sp-mitte h1		{ font-size:27px; line-height:1.25; margin:0 0 0.4ex 0 }
.sp-mitte h2		{ font-size:22px; margin:31px 0 9px 0 }
.sp-mitte h3		{ font-size:18px; margin:19px 0 10px 0; padding:0.25ex 0.6em; background:#eee; background:linear-gradient(#f4f4f4 0%, #eee 50%, #e7e7e7 100%) }
.sp-mitte ul, .sp-mitte ol { margin:0.6em 0 0.9em 1.4em; padding:0 }
.sp-mitte li		{ margin:0 0 5px 0 }
.unterzeile		{ color:#666; font-size:16px; margin:0 2px 14px 2px }
.einstieg		{ font-size:19px }
.vergleich-wrap		{ overflow-x:auto; margin:12px 0 6px 0 }
.vergleich		{ width:100%; font-size:15.5px; line-height:1.4 }
.vergleich th		{ text-align:left; background:#fbe6cf; padding:5px 6px; font-size:15px }
.vergleich td		{ padding:5px 6px; border-bottom:1px solid #ddd }
.vergleich tr:nth-child(even) td { background:#f7f7f7 }
.vergleich td:first-child { font-weight:bold; width:24% }
.fussnote		{ font-size:14px; color:#555 }
.zitat			{ margin:16px 0 18px 0; padding:9px 13px; background:#eee; font-style:italic }

/* Entscheidungshilfe */
.hilfe			{ background:#eee; padding:11px 13px 14px 13px; margin:12px 0 10px 0 }
.hilfe fieldset		{ border:0; border-bottom:1px solid #ccc; margin:0 0 9px 0; padding:0 0 10px 0 }
.hilfe legend		{ font-weight:bold; padding:0; margin:0 0 5px 0 }
.hilfe label		{ display:block; padding:3px 0 3px 1.9em; text-indent:-1.9em; cursor:pointer }
.hilfe input[type=radio] { width:1.1em; height:1.1em; margin:0 0.6em 0 0; vertical-align:-0.12em }
.hilfe .zeile		{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.hilfe button		{ font:inherit; font-weight:bold; padding:5px 14px; background:#f8f8f8; border:1px solid #777; border-radius:2px; cursor:pointer }
.hilfe .neu		{ font-weight:normal }
.hinweis		{ color:#a33; font-size:16px; margin:0 }
#ergebnis		{ background:#fff; border:1px solid #ccc; padding:4px 13px 8px 13px; margin-top:12px }
#ergebnis[hidden]	{ display:none }
#ergebnis h4		{ font-size:19px; margin:9px 0 4px 0 }

.faq dt			{ font-weight:bold; margin:16px 0 3px 0 }
.faq dd			{ margin:0 0 0 0 }
.quellen		{ font-size:15px; word-break:break-all }
.quellen li		{ margin-bottom:3px }

/* Fuss */
.fuss			{ margin:30px 0 0 0; padding:6px 10px 14px 10px; border-top:1px solid #ccc; font-size:14px; color:#555 }
.fuss a			{ color:#555 }
.nachoben		{ float:right }
.endfloat		{ clear:both; font-size:1pt; height:0 }

/* Unterseiten (Über mich, Impressum, Datenschutz) */
.einzeln		{ max-width:46em; padding:14px 10px 0 12px }
.einzeln h1		{ font-size:25px; margin:0 0 12px 0 }
.einzeln h2		{ font-size:19px; margin:25px 0 6px 0 }

/* .modul-kopf .zu-x { display:inline }  -- X-Knopf wie bei der Vorlage, braucht es nicht */
/* TODO: Druckansicht noch anschauen */

@media (max-width: 900px) {
  .sp-links		{ width:30% }
  .sp-mitte		{ width:70%; padding-right:10px }
  .sp-rechts		{ display:none }
  .sp-rechts.mobil-da	{ display:block }
}
@media (max-width: 680px) {
  body			{ font-size:18px }
  .kopf			{ min-height:0; padding-bottom:8px }
  .seitenzahl		{ display:none }
  .reiterzeile		{ border-bottom:0 }
  .reiter			{ font-size:15px; padding:4px 6px 3px 6px }
  .reiter small		{ display:none }
  .reiter.aktiv		{ margin-bottom:0; border-bottom:1px solid #e3b98c }
  .reiterrest		{ width:100%; margin:4px 0 0 0; padding:0 9px 6px 9px; font-size:14px }
  .spalten		{ display:block; padding-top:10px }
  .sp-links, .sp-mitte, .sp-rechts { width:auto; display:block; padding:0 11px }
  .sp-links .modul.inh	{ border-bottom:1px solid #ddd; padding-bottom:6px }
  .sp-links .modul.wer	{ display:none }
  .sp-mitte h1		{ font-size:24px }
  .vergleich		{ font-size:14.5px; min-width:560px }
}