@charset "utf-8";

/* =============================================================================
   Responsive Basis
   ============================================================================= */
@media only screen and (max-width: 550px) {
  body { 
    font-size: 0.9em; /* Statt 0.8em für bessere Lesbarkeit */
  }
  
  /* Responsive Überschriften mit Mindestgröße */
  h1 { font-size: max(1.8rem, calc(14px + 2*(100vw - 400px)/400)); }
  h2 { font-size: max(1.6rem, calc(13px + 2*(100vw - 400px)/400)); }
  h3 { font-size: max(1.4rem, calc(12px + 2*(100vw - 400px)/400)); }
  h4 { font-size: max(1.2rem, calc(11px + 2*(100vw - 400px)/400)); }
  h5 { font-size: max(1.1rem, calc(10px + 2*(100vw - 400px)/400)); }
  
  /* Buttons für Touch-Geräte optimieren */
  button, input[type="button"], input[type="submit"] {
    padding: 14px 24px; /* Größere Touch-Ziele */
    min-width: 120px;   /* Mindestbreite für bessere Bedienbarkeit */
  }
  
  /* Layout-Anpassungen für kleine Screens */
  #fusszeile {
    position: relative; /* Absolute Positionierung aufheben */
    line-height: 1.5;
  }
}
/* =============================================================================
   Variablen
   ============================================================================= */
:root {
  --font-base:        1em/1.3 Verdana, Helvetica, Arial, sans-serif;
  --font-heading:     1.5em Arial, Verdana, Helvetica, sans-serif;
  --font-mono:        monospace;
  --color-text:       #4a6491;
  --color-bg:         #F3F0E0;
  --color-link:       #004f9b;
  --color-link-hover: #0057aa;
  --color-border:     #ccc;
  --color-focus:      #51aaff;
  --color-fusslink:   #4B5F6D;
  --color-inaktiv:    #b6b6b6;
}

/* ==========================================================================
   Farb-Utilities
   ========================================================================== */
.red       { color: red; }
.orange    { color: orange; }
.green     { color: green; }
.grey      { color: #708090; }
.darkgrey  { color: #696969; }

/* =============================================================================
   Imports (bei Bedarf aktivieren)
   ============================================================================= */
/*
@import url('/css/css-nav/normalize.css') screen;
@import url('/css/css-nav/atmosphere.css') screen;
@import url('/css/css-nav/layout.css') screen;
@import url('/css/table.css') screen;
@import url('/css/print_standard.css') print;
*/

/* =============================================================================
   Grund-Styling
   ============================================================================= */
body {
  margin:0.1em;
  font: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
}

#box { margin-top:0; }
.entwurfsmodus #box { margin:0 20px; }
.main    { padding:3px; }
footer   { font-size:0.8em; }

/* =============================================================================
   Überschriften
   ============================================================================= */
h1,h2,h3,h4,h5,h6 {
  margin:0 0 .5em;
  color:var(--color-text);
  line-height:1.2;
  font-family: var(--font-heading);
}
h1 { font-size:calc(18px + 6*(100vw - 400px)/400); margin-bottom:.6em; }
h2 { font-size:calc(16px + 6*(100vw - 400px)/400); margin:.5em 0; }
h3 { font-size:calc(14px + 6*(100vw - 400px)/400); margin:.4em 0; }
h4 { font-size:calc(13px + 5*(100vw - 400px)/400); margin:.3em 0; }
h5 { font-size:calc(12px + 5*(100vw - 400px)/400); margin:.2em 0; }
h6 { margin:.1em 0; }

/* =============================================================================
   Absätze & Links
   ============================================================================= */
p { margin:.5em 0; }

a, a:visited {
  color: var(--color-link);
  text-decoration: none;
  transition: color .3s;
}
a:hover { color: var(--color-link-hover); }

/* =============================================================================
   Formulare & Buttons
   ============================================================================= */
input, select, textarea, button, label {
  font-size:16px!important;
  font-family:inherit;
  margin:0;
}

input, select, textarea, button {
  border:1px solid var(--color-border);
  border-radius:3px;
  padding:3px;
  color:#000;
  transition:all .3s ease-in-out;
  outline:none;
}

input:focus, textarea:focus {
  box-shadow:0 0 5px var(--color-focus);
}

button {
  display:inline-block;
  padding:12px 22px;
  background:#d3d3d3;
  border:none;
  cursor:pointer;
  text-align:center;
}

button.green-button, button.OK,
input.weiter, button.weiter {
  background:#4CAF50;
  color:#fff;
  font-weight:bold;
  letter-spacing:.06em;
}

button.break-button {
  background:#f0f0f0;
  border:2px solid silver;
  font-weight:bold;
  letter-spacing:.06em;
}

input.zurück, button.zurück { min-width:100px; }
button.normal { padding:4px 10px; }

/* =============================================================================
   Layout-Helper & Fußzeile
   ============================================================================= */
#fusszeile {
  position:absolute;
  bottom:0;
  width:100%;
  line-height:28px;
  text-align:center;
}

#stiller-link, footer a, footer a:visited {
  color: var(--color-fusslink);
  text-decoration:none;
}

.div_center, .block-center { margin:0 auto; text-align:center; }

.left   { text-align:left; }
.center { text-align:center; }
.right  { text-align:right; }
.bocksatz, .justify { text-align:justify; }

.h-abstand { margin-right:24px; }
.v_middle  { vertical-align:middle!important; }
.bottom    { vertical-align:bottom; }

/* =============================================================================
   Typografie-Feinschliff
   ============================================================================= */
.smallest { font-size:xx-small; }
.smaller  { font-size:smaller; }
.larger   { font-size:larger; }
.x-large  { font-size:x-large; }

.kursiv   { font-style:italic; }
.fett, .bold { font-weight:bold; }
.normal    { font-weight:normal; font-style:normal; }

.silbentrennung {
  hyphens:auto;
  -ms-hyphens:auto;
}

/* =============================================================================
   Sonstiges
   ============================================================================= */
textarea.fixed { overflow-x:hidden; }

.nodisplay, .no-display, .no_display { display:none; }
.hidden { visibility:hidden; }
.inaktiv { color: var(--color-inaktiv)!important; cursor:default; }
.deleted  { background:#B22222!important; color:#fff!important; }