/* ==========================================================================
   Basis-Layout & Typografie
   ========================================================================== */
body { 
  background: #FFFFFF; 
  font-size: 100%; 
  margin: 0em; 
  padding: 0em; 
  max-width: 100%; 
  font-family: Helvetica, Arial, sans-serif; 
}

p { margin-left: 20px; padding: 0; margin-bottom: .01em; text-align: left; }
h1 { font-size: 1.2em; margin: 0; line-height: 1em; color: #000; padding-left: 26px; }
h2 { margin-left: 16px; margin-bottom: 0; font-size: 1.0em; margin: .8em 10px .8em 15px; }
h3 { margin-left: 18px; text-align: left; font-size: 1.0em; margin-bottom: .01em; line-height: 1.2em; }
ol, ul { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 0; }
li { list-style: square; line-height: 1.2em; color: #2f2d2c; margin: .213em 0 .313em 0; padding: 0; text-indent: -1.2em; }
img { width: 90%; height: auto; max-width: 800px; }
select { font-size: 1.0em; }

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

#header { background: url(/handwerk-2014.jpg) no-repeat center top / contain; margin-top: 0.2em; width: 100%; height: 168px; }
#header img { max-width: 800px; max-height: 100px; text-align: center; box-shadow: 0 0 5px -5px #4c4948; border-radius: 5px; }


#menubar { display: block; text-align: center; background: #fff; }
.menuanfang { text-align: center; }
.hide, .show { display: none; border-top: 1em double #a2b7ca; border-bottom: .4em solid #a2b7ca; width: 10%; }
.inhalt { display: block; height: auto; background: #a2b7ca; text-align: center; margin-bottom: 1em; box-shadow: 0 0 2px 1px #4c4948; border-radius: 5px; }
.inhalt ul { display: block; margin: 0; padding: 0; }
.inhalt ul li { display: inline; margin: 0 .4em 0 .01em; white-space: nowrap; }
.inhalt ul li a { color: #000; font-weight: 700; font-size: 1.0em; line-height: 1.8em; padding: .263em .238em .275em .238em; transition: background .2s; -webkit-transition: background .2s; }
.inhalt ul li a:hover { background: #678198; border-bottom: .188em solid #6e8ba5; box-shadow: 0 0 1px 1px #4c4948; border-radius: 5px; }
.inhalt ul li a.active { border-bottom: .188em solid #6e8ba5; }

/* ==========================================================================
   Suche & Filterbereich
   ========================================================================== */
#container-suchen { width: 100%; clear: both; padding-top: .02em; margin-bottom: .4em; height: auto; line-height: .8em; display: -webkit-flex; display: flex; flex-direction: row; background: #fff; text-align: center; }
#branchenrollfeld { width: 40%; height: auto; float: left; font-size: 1.0em; margin-left: 20px; line-height: 1.2em; padding: 0; margin-bottom: 0; text-align: left; }
#suchfeld { width: 40%; height: auto; float: right; margin-left: 20px; font-size: 1.0em; line-height: 1.2em; padding: 0; margin-bottom: 0; text-align: left; }

/* ==========================================================================
   Hauptbereich & Content-Container
   ========================================================================== */
#ueber { clear: both; width: 100%; height: auto; }
#text-anfang { clear: both; width: 100%; height: auto; margin: 3px 0 10px 0; background: #a2b7ca; box-shadow: 0 0 2px 1px #4c4948; border-radius: 5px; }
.text-orte-ueb { line-height: 24px; font-weight: 520; font-size: 1.2em; margin: 10px 10px 20px 26px; }
#content { width: 100%; clear: both; margin-top: .4em; height: auto; display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between; }
#eintrag { vertical-align: top; width: 60%; height: auto; float: left; margin-left: 20px; }
.text2 { font-size: 1.0em; }
.url { font-size: 1.0em; margin-bottom: 2px; color: #000; margin-top: 10px; font-weight: 700; word-wrap: break-word; }
.beschreibung { font-size: 1.0em; margin-bottom: 2px; color: #000; margin-top: 1px; }
.strasse { font-size: 1.0em; margin-bottom: 2px; color: #000; margin-top: 1px; font-weight: 550; }
.plz-adr { font-size: 1.0em; margin-bottom: 30px; color: #000; margin-top: 1px; font-weight: 550; }

/* ==========================================================================
   Rechte Seitenspalte
   ========================================================================== */
#rechte-spalte { vertical-align: top; width: 30%; height: auto; float: right; margin: 0 10px 0 10px; font-size: 90%; margin-bottom: 50px; }
#rechte-spalte img { max-width: 240px; box-shadow: 5px 5px 1px 2px #A2B7CA; border-radius: 5px; margin-bottom: 0.5em; }
.p3 { margin-left: 20px; font-size: 1.0em; line-height: 1.4em; padding: 0; margin-bottom: 0; text-align: left; }
.p5 { margin-left: 2px; font-size: 1.0em; line-height: 1.4em; padding: 0; margin-bottom: 0; text-align: left; }
.p5 ul li { list-style: none; }
.char { list-style-type: none; margin-left: 10px; font-weight: 700; font-size: 1.2em; }
ul.char li:before { content: "\25BA" " "; color: #1b8f00; }
.b1 { color: #000; background: #9ab4cb; box-shadow: 0 0 1px 1px #4c4948; border-radius: 5px; }

/* Hilfsklassen & Zusatzstrukturen */
#parent-element-id { margin-left: 10px; box-shadow: 5px 5px 5px 5px #A2B7CA; border-radius: 5px; word-wrap: break-word; }
#parent-element-id img { max-width: 130px; padding-left: 20px; }
.anz-ama { margin-left: 10px; padding-top: 20px; }
.anz-ama u { background-color: #A2B7CA; box-shadow: 2px 2px 2px 1px #A2B7CA; border-radius: 3px; text-decoration: none; }
.ama-txt { font-size: 1.0em; margin: 20px 10px 0 10px; }
.autor { font-size: 0.8em; margin: 10px 10px 0 10px; }
.anzeigen-ama { font-size: 0.8em; margin-bottom: 4px; margin-top: 10px; text-decoration: underline black; }
.anzeigen-ama strong { background-color: yellow; }
.ama-link { font-size: 1.0em; }
.hwk-ihk { font-size: 1em; padding-left: 15px; }
.shariff li { text-indent: .2em; }
.neue { line-height: 1.4em; font-size: 1.0em; color: #000; padding: 5px 5px 5px 10px; margin: .8em 10px .8em 10px; background: #df5e27; box-shadow: 5px 5px 2px 1px #a2b7ca; border-radius: 5px; }
#artikelbeitrag-rechte-spalte { word-wrap: break-word; vertical-align: top; margin: 0; float: left; }
#artikelbeitrag-rechte-spalte img { max-width: 200px; box-shadow: 5px 5px 1px 2px #a2b7ca; border-radius: 5px; margin: 1em .8em 1em .313em; }
#angebot { vertical-align: top; }
#angebot img { max-width: 250px; box-shadow: 15px 0 10px -5px #a2b7ca; border-radius: 5px; }

/* ==========================================================================
   Paginierung & Footer
   ========================================================================== */
#unten { clear: both; width: 100%; height: auto; background: #a2b7ca; box-shadow: 0 0 1px 1px #4c4948; border-radius: 5px; }
.textzahl { font-size: 1.0em; color: #00bf00; text-align: center; }
.textzahl a { color: #000; margin: 1.4em .8em .6em .8em; line-height: 1.8em; font-size: 1.2em; }
.aktuelle_seitennummer { font-size: 1.0em; color: #470000; }
#unten-banner { clear: both; text-align: center; width: 100%; height: auto; background: #a2b7ca; }
#unten-banner img { max-width: 120px; text-align: center; margin: .5em 0 0 0; box-shadow: 0 0 1px 1px #4c4948; border-radius: 5px; }
#links { line-height: 2em; font-size: 1.2em; margin: 1.5em 0 .625em 0; box-shadow: 0 0 1px 1px #4c4948; border-radius: 5px; }

/* ==========================================================================
   Media Queries (Responsive Web Design)
   ========================================================================== */
@media screen and (max-width: 800px) {
  body { font-size: 100%; }
  .text4 { line-height: 1.2em; }
  .text4 a { line-height: 1em; }
  #goog { width: 100%; margin: .8em 0; height: auto; background: #a2b7ca; display: flex; flex-direction: row; float: left; box-shadow: 0 0 1px 1px #4c4948; border-radius: 5px; }
  #suchfeld { display: none; }
}

@media screen and (max-width: 750px) {
  #branchenrollfeld, #container-suchen, #content, #eintrag, #header, #media, #rechte-spalte, #suchfeld, #text-anfang, #ueber, #unten, #unten-banner { width: 96%; display: block; margin: .625em auto; }
  #rechte-spalte { line-height: 1.4em; margin: .8em 0.5em .8em .2em; width: 95%; }
  #suchfeld { display: none; }
  #header { background: url(https://handwerkernet.de/handwerk-2018.jpg) no-repeat center top / contain; width: 100%; height: 50px; }
  .hide, .show img { width: 40px; height: 11px; }
  .hide { display: block; margin: -1.4em 0 1.5em 1em; }
  .show { display: block; margin: -1.4em 0 .5em 1em; }
  #akkordeon:not(:target) .inhalt, #akkordeon:not(:target) .hide, #akkordeon:target .show, .neuanmeldung { display: none; }
  #akkordeon:target .inhalt { display: block; word-wrap: break-word; }
  .inhalt ul li a { color: #000; font-weight: 700; font-size: 1.0em; white-space: normal; line-height: 1.8em; padding: .263em .438em .275em .438em; transition: background .2s; }
  
  h1 { font-size: 1.0em; padding-bottom: 6px; border-bottom: 2px solid #a2b7ca; margin-bottom: 10px; }
  #eintrag { width: 90%; margin-right: 20px; margin-left: 15px; font-size: 0.90em; }

  /* --- SAUBERE PAGINIERUNG FÜR HANDY --- */
  #unten { padding: 8px 4px !important; text-align: center !important; }
  .textzahl { font-size: 0.9em !important; line-height: 2.2em !important; color: #00bf00; text-align: center !important; margin: 0 !important; }
  
  .textzahl a, 
  #unten .textzahl a { 
    display: inline !important; 
    width: auto !important; 
    margin: 0 2px !important; 
    padding: 3px 6px !important; 
    background: #ffffff !important; 
    color: #000000 !important; 
    text-decoration: none !important; 
    border-radius: 3px !important; 
    font-size: 0.95em !important;
    white-space: nowrap !important;
  }
  
  .aktuelle_seitennummer, 
  #unten .aktuelle_seitennummer { 
    display: inline !important; 
    width: auto !important; 
    margin: 0 2px !important; 
    padding: 3px 7px !important; 
    background: #470000 !important; 
    color: #ffffff !important; 
    border-radius: 3px !important; 
    font-size: 0.95em !important;
  }
  
  #rechte-spalte {
    margin-bottom: 10px !important;
  }
}

@media screen and (max-width: 550px) {
  body { font-size: 100%; width: 100%; margin: 0; padding: 0; }
  #header { font-size: 10%; }
  #text-anfang, .p5, h3, .beschreibung { display: none; height: auto; }
  #rollfeld { width: 80%; }
  #menubar { margin-bottom: 2.5em; margin-top: .5em; }
  #header img { max-width: 40%; }
  
  /* Flexbox-Umbruch erzwingen */
  #content { display: block !important; width: 100% !important; margin: 0 !important; }

  /* 1. Hauptursache für Überbreite: Bilder begrenzen */
  img, #rechte-spalte img, #unten-banner img { 
    max-width: 100% !important; 
    height: auto !important; 
  }

  /* 2. Hauptursache: Lange Wörter/URLs brechen */
  #eintrag, #rechte-spalte, .url, .text2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 3. Bündige Ausrichtung mit calc() verhindern, dass 100% + Margin überstehen */
  #eintrag { 
    display: block !important;
    float: none !important;
    font-size: 0.9em !important; 
    width: calc(100% - 20px) !important; 
    margin: 0.2em 0 0 15px !important; 
    padding: 0 !important;
  }

  #rechte-spalte { 
    display: block !important;
    float: none !important;
    font-size: 0.85em !important; 
    line-height: 1.3em; 
    width: calc(100% - 20px) !important; 
    margin: 0.5em 0 0 15px !important; 
    padding: 0 !important;
  }

  #rechte-spalte p, #rechte-spalte .p3 { 
    margin-left: 0 !important; 
    margin-bottom: 0 !important; 
    padding: 0 !important; 
  }

  #unten { 
    width: calc(100% - 20px) !important; 
    margin: 0.4em auto 0 auto !important; 
  }

  #container-suchen { display: flex; justify-content: center; width: 100%; }
  #branchenrollfeld { width: 100%; float: none; margin-left: 0; margin-right: 0; text-align: center; }
  #rollfeld { width: 90%; margin: 0 auto; display: block; }
}