@charset "UTF-8";

/* styles_common.css – Bruno Hoffmann */
/* Geteilte Stile — wird von Desktop und Mobile geladen.
   Nur Regeln, die auf beiden Versionen identisch sind. */


/* ─── Grundstruktur ─────────────────────────────────────────────────────────── */

nav, section { display: block; }

#alles {
  width:  100%;
  height: 100%;
}

#inhalt {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
}


/* ─── Canvas-Bereich ────────────────────────────────────────────────────────── */

#content {
  width:    100%;
  height:   100%;
  overflow: auto;
}

#overflowHidden { overflow: hidden; }

#drawingContainer {
  position:    absolute;
  top:         50px;
  left:        20px;
  width:       3792px;
  height:      8376px;
  line-height: 0;
  z-index:     1;
}

.canvasHolder {
  display:     block;
  float:       left;
  width:       1264px;
  height:      698px;
  overflow:    hidden;
  line-height: 0;
}

.drawing {
  display: block;
  float:   left;
  width:   1264px;
  height:  698px;
  border:  none;
}


/* ─── Seitenstruktur ────────────────────────────────────────────────────────── */

#description {
  width:      100%;
  height:     40px;
  margin-top: 120px;
  text-align: center;
}

#index {
  width:  100%;
  height: 50px;
}

#slides {
  width:      100%;
  height:     auto;
  overflow:   auto;
  text-align: center;
}

#slides p {
  padding-left:  30px;
  padding-right: 30px;
  margin-top:    60px;
}

.malerei,
.zeichnung {
  text-align: center;
  width:      100%;
}


/* ─── Navigation & Links ────────────────────────────────────────────────────── */

.dotholder {
  display:          block;
  float:            left;
  clear:            left;
  background-color: #3FC;
  width:            10px;
  height:           10px;
  border-radius:    5px;
  margin:           4px 10px 0 10px;
}

#lebenslauf a       { text-decoration: underline; color: #000; }
#lebenslauf a:hover { font-style: italic; }

#links a            { text-decoration: none; color: #000; }
#links a:hover              { font-style: italic; }
#links a:hover   .dotholder { background-color: #000; }
#links a:visited .dotholder { background-color: #9CC; }


/* ─── Kontakt ───────────────────────────────────────────────────────────────── */

.kontakt {
  width:       500px;
  height:      50px;
  position:    absolute;
  top:         200px;
  left:        50%;
  margin-left: -250px;
}

.kontakt a       { text-decoration: none; color: #000; }
.kontakt a:hover { font-style: italic; }


/* ─── Textklassen ───────────────────────────────────────────────────────────── */

.Stil5             { font-size: 10px; padding-right: 50px; }
.Stil5 a           { text-decoration: underline; color: #000; }
.Stil5 img         { margin-top: 10px; margin-left: 15px; padding: 0; }

.eingerueckt { margin-left: 30px; }


/* ─── Seitenspezifisch ──────────────────────────────────────────────────────── */

#orf {
  position:    absolute;
  left:        50%;
  top:         200px;
  margin-left: -340px;
}


/* ─── Kontaktformular ───────────────────────────────────────────────────────── */

.kontakt-wrap {
  width:       500px;
  position:    absolute;
  top:         100px;
  left:        50%;
  margin-left: -250px;
}

.kontakt-wrap p {
  margin-bottom: 24px;
  color:         #000;
}

.form-intro {
  margin-bottom: 20px;
  color:         #000;
  font-size:     12px;
  line-height:   1.6;
}

.form-status {
  margin-bottom: 16px;
  font-size:     12px;
  color:         #000;
}

.kontakt-form label {
  display:       block;
  font-size:     11px;
  margin-bottom: 3px;
  color:         #000;
}

.kontakt-form input,
.kontakt-form textarea {
  display:       block;
  width:         100%;
  margin-bottom: 14px;
  padding:       5px;
  font-family:   Verdana, Arial, sans-serif;
  font-size:     12px;
  border:        1px solid #999;
  box-sizing:    border-box;
  background:    #fff;
  color:         #000;
}

.kontakt-form textarea {
  height: 140px;
  resize: vertical;
}

.kontakt-form button {
  padding:     5px 16px;
  font-family: Verdana, Arial, sans-serif;
  font-size:   12px;
  border:      1px solid #000;
  background:  #fff;
  cursor:      pointer;
}

.kontakt-form button:hover {
  background: #f0f0f0;
}

/* Honeypot: für Menschen unsichtbar, Bots füllen es aus */
.hp-field {
  position:   absolute;
  left:       -9999px;
  visibility: hidden;
}